使用 <form> 标签可以向服务器传输数据，实现用户与服务器的交互。
1.1 用法
示例：
<form action="/demo.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
Out:
1.2 属性
New ：HTML5 中的新属性。
| 属性 |
值 |
描述 |
| accept |
MIME_type |
HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） |
| accept-charset |
character_set |
规定服务器可处理的表单数据字符集。 |
| action |
URL |
规定当提交表单时向何处发送表单数据。 |
| autocompleteNew |
on
off |
规定是否启用表单的自动完成功能。 |
| enctype |
application/x-www-form-urlencoded
multipart/form-data
text/plain |
规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
| method |
get
post |
规定用于发送表单数据的 HTTP 方法。 |
| name |
text |
规定表单的名称。 |
| novalidateNew |
novalidate |
如果使用该属性，则提交表单时不进行验证。 |
| target |
_blank
_self
_parent
_top |
规定在何处打开 action URL。 |
<input> 标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。
<input> 标签通常是与<form>表单联用。
2.1 用法
示例：
<form action="demo-form.php">
User name: <input type="text" name="userName"><br>
Password : <input type="password" name="pwd"><br>
Email : <input type="mail" name="email"><br>
<input type="submit" value="提交">
</form>
2.2 属性
New ：HTML5 中的新属性。
| 属性 |
值 |
描述 |
accept
</td>
<td>audio/*video/*image/*MIME_type</td>
<td>规定通过文件上传来提交的文件的类型。(只针对type="file")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-align.html">align</a>
</td>
<td>leftrighttopmiddlebottom</td>
<td><span class="deprecated">HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")</span>
</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-alt.html">alt</a>
</td>
<td>text</td>
<td>定义图像输入的替代文本。 (只针对type="image")</td>
</tr>
<tr>
<td class="style1"><a href="https://www.w3cschool.cn/att-input-autocomplete.html">autocomplete</a><span
class="new">New</span>
</td>
<td>onoff</td>
<td>autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-autofocus.html">autofocus</a><span class="new">New</span>
</td>
<td>autofocus</td>
<td>属性规定当页面加载时 <input> 元素应该自动获得焦点。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-checked.html">checked</a>
</td>
<td>checked</td>
<td>checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-disabled.html">disabled</a>
</td>
<td>disabled</td>
<td>disabled 属性规定应该禁用的 <input> 元素。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-form.html">form</a><span class="new">New</span>
</td>
<td>form_id</td>
<td>form 属性规定 <input> 元素所属的一个或多个表单。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-formaction.html" target="_blank">formaction</a><span class="new">New</span>
</td>
<td>URL</td>
<td>属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-formenctype.html">formenctype</a><span class="new">New</span>
</td>
<td>application/x-www-form-urlencodedmultipart/form-datatext/plain</td>
<td>属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-formmethod.html">formmethod</a><span class="new">New</span>
</td>
<td>getpost</td>
<td>定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-formnovalidate.html">formnovalidate</a><span class="new">New</span>
</td>
<td>formnovalidate</td>
<td>formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-formtarget.html">formtarget</a><span class="new">New</span>
</td>
<td>_blank_self_parent_topframename</td>
<td>规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-height.html">height</a><span class="new">New</span>
</td>
<td>pixels</td>
<td>规定 <input>元素的高度。(只针对type="image")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-list.html">list</a><span class="new">New</span>
</td>
<td>datalist_id</td>
<td>属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-max.html">max</a><span class="new">New</span>
</td>
<td>numberdate</td>
<td>属性规定 <input> 元素的最大值。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-maxlength.html">maxlength</a>
</td>
<td>number</td>
<td>属性规定 <input> 元素中允许的最大字符数。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-min.html">min</a><span class="new">New</span>
</td>
<td>numberdate</td>
<td>属性规定 <input>元素的最小值。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-multiple.html">multiple</a><span class="new">New</span>
</td>
<td>multiple</td>
<td>属性规定允许用户输入到 <input> 元素的多个值。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-name.html">name</a>
</td>
<td>text</td>
<td>name 属性规定 <input> 元素的名称。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-pattern.html">pattern</a><span class="new">New</span>
</td>
<td>regexp</td>
<td>pattern 属性规定用于验证 <input> 元素的值的正则表达式。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-placeholder.html">placeholder</a><span class="new">New</span>
</td>
<td>text</td>
<td>placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-readonly.html">readonly</a>
</td>
<td>readonly</td>
<td>readonly 属性规定输入字段是只读的。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-required.html">required</a><span class="new">New</span>
</td>
<td>required</td>
<td>属性规定必需在提交表单之前填写输入字段。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-size.html">size</a>
</td>
<td>number</td>
<td>size 属性规定以字符数计的 <input> 元素的可见宽度。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-src.html">src</a>
</td>
<td>URL</td>
<td>src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-step.html">step</a><span class="new">New</span>
</td>
<td>number</td>
<td>step 属性规定 <input> 元素的合法数字间隔。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-type.html">type</a>
</td>
<td>button
<br>checkbox
<br>color
<br>date
<br>datetime
<br>datetime-local
<br>email
<br>file
<br>hidden
<br>image
<br>month
<br>number
<br>password
<br>radio
<br>range
<br>reset
<br>search
<br>submit
<br>tel
<br>text
<br>time
<br>url
<br>week</td>
<td>type 属性规定要显示的 <input> 元素的类型。</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-value.html">value</a>
</td>
<td>text</td>
<td>指定 <input> 元素 value 的值。<strong></strong>
</td>
</tr>
<tr>
<td><a href="https://www.w3cschool.cn/att-input-width.html">width</a><span class="new">New</span>
</td>
<td>pixels</td>
<td>width 属性规定 <input> 元素的宽度。 (只针对type="image")</td>
</tr>
</tbody>
|
三、textarea标签
<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本
该标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。
3.1 用法
示例：
<textarea rows="10" cols="30">
Text Content...
</textarea>
亲自尝试：
3.2 属性
New ：HTML5 中的新属性。
| 属性 |
值 |
描述 |
| autofocusNew |
autofocus |
规定当页面加载时，文本区域自动获得焦点。 |
| cols |
number |
规定文本区域内可见的列数。 |
| disabled |
disabled |
规定禁用文本区域。 |
| formNew |
form_id |
定义文本区域所属的一个或多个表单。 |
| maxlengthNew |
number |
规定文本区域允许的最大字符数。 |
| name |
text |
规定文本区域的名称。 |
| placeholderNew |
text |
规定一个简短的提示，描述文本区域期望的输入值。 |
| readonly |
readonly |
规定文本区域为只读。 |
| requiredNew |
required |
规定文本区域是必需的/必填的。 |
| rows |
number |
规定文本区域内可见的行数。 |
| wrapNew |
hard
soft |
规定当提交表单时，文本区域中的文本应该怎样换行。 |
四、label标签
<label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。
如：当单选框绑定label后点击label中的文本，即可操作该单选框。
4.1 用法
<form action="/demo.html">
<label for="male">男</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">女</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
Out:
4.2 使用说明
4.3 属性
1. for |element_id|规定 label 与哪个表单元素绑定。
2. form|form_id |规定 label 字段所属的一个或多个表单。(HTML5新增)
五、select标签
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
亲自尝试：
