HTML表单标签

HTML 表单用于收集不同类型的用户输入。

1. <form> 用户输入的表单

可以向服务器传输数据。

例：这是带有一个输入框的HTML表单

<form action="demo_form.php" method="get">
  user: <input type="text" name="uid"><br>
</form>

2. <input> 输入框

创建交互式空间，基于web表单，可以输入，可以接收。

<form action="demo_form.php" method="get">
  user: <input type="text" name="uid"><br>
</form>

属性	值	描述
accept	audio/*video/*image/*MIME_type	规定通过文件上传来提交的文件的类型。(只针对type="file")
align	leftrighttopmiddlebottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocompleteNew	onoff	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
formNew	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew	application/x-www-form-urlencodedmultipart/form-datatext/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew	getpost	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew	_blank_self_parent_topframename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew	pixels	规定 <input>元素的高度。(只针对type="image")
listNew	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew	numberdate	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
minNew	numberdate	属性规定 <input>元素的最小值。
multipleNew	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
patternNew	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
requiredNew	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
stepNew	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
width (new)	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

3. <textarea> 多行文本框

<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本.
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

属性	值	描述
autofocus New	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
form New	form_id	定义文本区域所属的一个或多个表单。
maxlength New	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholder New	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
required New	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrap New	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

4. <button> 按钮

<button type="button">点我!</button>

属性	值	描述
autofocus New	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form New	form_id	规定按钮属于一个或多个表单。
formaction New	URL	规定当提交表单时向何处发送表单数据。覆盖form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctype New	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethod New	get post	规定用于发送表单数据的HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidate New	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtarget New	_blank _self _parent _top framename	规定在何处打开action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name	name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

5. <select> 下拉列表

使用option元素定义列表中的可用选项

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

属性	值	描述
autofocusNew	autofocus	规定在页面加载时下拉列表自动获得焦点。
disabled	disabled	当该属性为true 时，会禁用下拉列表。
formNew	form_id	定义select 字段所属的一个或多个表单。
multiple	multiple	当该属性为true 时，可选择多个选项。
name	name	定义下拉列表的名称。
requiredNew	required	规定用户在提交表单前必须选择一个下拉列表中的选项。
size	number	规定下拉列表中可见选项的数目。

6. <optgroup> 下拉列表分组

对select元素提供的选项进行分组。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

属性	值	描述
disabled	disabled	规定禁用该选项组。
label	text	为选项组规定描述。

7. <option> 列表项

<option> 标签用于定义包含在<select>、<optgroup> 或 <datalist> 元素中的项。
<option> 标签可以表示 HTML 文档中弹出窗口中的菜单项和其他项目列表。
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
label	text	定义当使用<optgroup> 时所使用的标注。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

8. <label> 标签

为 input 元素定义标注（标记），触发对应表单控件功能。

<form action="demo-form.php">
 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" value="female"><br>
 <input type="submit" value="提交">
</form>

属性	值	描述
for	element_id	规定label 与哪个表单元素绑定。
formNew	form_id	规定label 字段所属的一个或多个表单。

9. <fidldset> 绘制边框

会在相关表单元素周围绘制边框，<legend> 标签为 <fieldset> 元素定义标题且必须是子元素。

<form>
 <fieldset>
   <legend>个人信息:</legend>
   姓名: <input type="text"><br>
   邮箱: <input type="text"><br>
   生日: <input type="text">
 </fieldset>
</form>

属性	值	描述
disabledNew	disabled	规定该组中的相关表单元素应该被禁用。
formNew	form_id	规定fieldset 所属的一个或多个表单。
nameNew	text	规定fieldset 的名称。

10. <legend>

用来组合表单的相关元素，表示了其父级 <fieldset> 内容的标题。

<form>
 <fieldset>
   <legend>个人信息:</legend>
   姓名: <input type="text"><br>
   邮箱: <input type="text"><br>
   生日: <input type="text">
 </fieldset>
</form>

属性	值	描述
align	top bottom left right	HTML5 不支持。 HTML 4.01 已废弃。不建议使用。 请使用样式代替。为 fieldset 中的标题定义对齐方式。

11. <datalist> 表示可选列表 (new)

需要与 <input> 标签配合使用。

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

12. <output> 显示计算或用户操作的结果 (new)

作为计算结果输出显示

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

属性	值	描述
forNew	element_id	描述计算中使用的元素与计算结果之间的关系。
formNew	form_id	定义输入字段所属的一个或多个表单。
nameNew	name	定义对象的唯一名称（表单提交时使用）。