5️⃣ HTML5 新属性

⚠️ 大多数浏览器不支持

<input>

• 可以在其中输入数据的输入字段
• 输入字段可通过多种方式改变，取决于 type 属性

属性名	值	说明
type	button 按钮 checkbox 复选框 color5️⃣ 拾色器 date5️⃣ 日历控件 datetime5️⃣ 日历时间控件，基于UTC时区）。 datetime-local5️⃣ 日历时间控件，不带时区）。 email5️⃣ e-mail 地址 file 文件选择 hidden 隐藏输入字段。 image 图像作为提交按钮。 month5️⃣ month 和 year 控件（不带时区）。 number5️⃣ 用于输入数字的字段。 password 密码字段（字段中的字符会被遮蔽）。 radio 单选按钮。 range5️⃣ 用于精确值不重要的输入数字的控件（比如 slider 控件）。 reset 重置按钮（重置所有的表单值为默认值）。 search5️⃣ 用于输入搜索字符串的文本字段。 submit 提交按钮。 tel5️⃣ 用于输入电话号码的字段。 text 默认。一个单行的文本字段（默认宽度为 20 个字符）。 time5️⃣ 用于输入时间的控件（不带时区）。 url5️⃣ 用于输入 URL 的字段。 week5️⃣ week 和 year 控件（不带时区）。	输入字段类型
name	string	元素的名称
disabled	disabled	禁用
readonly	readonly	只读
required5️⃣	required	必填字段
autofocus5️⃣	autofocus	页面加载时自动获得焦点
autocomplete5️⃣	on off	是否启用自动完成
placeholder5️⃣	text	简短的提示信息
maxlength	number	允许的最大字符数
size	number	元素的可见宽度
pattern5️⃣	regexp	验证元素的值的正则表达式
checked	checked	预先选中。 type="checkbox" type="radio"
accept	audio/* 接受所有的声音文件。 image/* 接受所有的图像文件。 video/* 接受所有的视频文件。 MIME_type	文件的类型。 type="file"
alt	string	替代文本 type="image"
src	URL	图像的 URL type="image"
width5️⃣	pixels	元素的宽度 type="image"
height5️⃣	pixels	元素的高度 type="image"
value	text	元素的值
form5️⃣	form_id	元素所属的一个或多个表单。
list5️⃣	datalist_id	引用 <datalist> 元素
max5️⃣	number date	最大值。
min5️⃣	number date	最小值。
step5️⃣	number	合法数字间隔。
multiple5️⃣	multiple	允许输入多个值。
formaction5️⃣	URL	覆盖 <form> 元素的 action 属性 type="submit" type="image"
formenctype5️⃣	application/x-www-form-urlencoded multipart/form-data text/plain	发送前编码 type="submit" type="image"
formmethod5️⃣	get post	发送方法。 type="submit" type="image"
formnovalidate5️⃣	formnovalidate	覆盖 <form> 元素的 novalidate 属性。
formtarget5️⃣	_blank 新窗口打开 _self 当前窗口打开 _parent 父窗口打开 _top 顶层窗口打开	接收响应的窗口或框架的名称。 type="submit" type="image"

<p>button<input type="button"></p>
<p>checkbox<input type="checkbox"></p>
<p>color<input type="color"></p>
<p>date<input type="date"></p>
<p>datetime-local<input type="datetime-local"></p>
<p>email<input type="email"></p>
<p>file<input type="file"></p>
<p>hidden<input type="hidden"></p>
<p>image<input type="image"></p>
<p>month<input type="month"></p>
<p>number<input type="number"></p>
<p>password<input type="password"></p>
<p>radio<input type="radio"></p>
<p>range<input type="range"></p>
<p>reset<input type="reset"></p>
<p>search<input type="search"></p>
<p>submit<input type="submit"></p>
<p>tel<input type="tel"></p>
<p>text<input type="text"></p>
<p>time<input type="time"></p>
<p>url<input type="url"></p>
<p>week<input type="week"></p>

<textarea>

• 一个多行的文本输入控件
• 输入字段可通过多种方式改变，取决于 type 属性

属性名	值	说明
autofocus5️⃣	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的宽度。
disabled	disabled	规定禁用文本区域。
form5️⃣	form_id	定义文本区域所属的一个或多个表单。
maxlength5️⃣	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholder5️⃣	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
required5️⃣	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrap5️⃣	hard 浏览器插入的换行会被提交 soft 浏览器插入的换行不会被提交	规定当提交表单时，文本区域中的文本应该怎样换行。

<textarea rows="5" cols="40">
这是一个多行的文本输入控件
</textarea>

<button>

• 定义一个按钮
• 与<input>不同的是可以放置内容，比如文本或图像

属性名	值	说明
autofocus5️⃣	autofocus	页面加载时获得焦点。
disabled	disabled	标记禁用。
form5️⃣	form_id	定义按钮属于一个或多个表单。
formaction5️⃣	URL	覆盖 <form> 元素的 action 属性 与 type="submit" 配合使用。
formenctype5️⃣	application/x-www-form-urlencoded multipart/form-data text/plain	发送前编码 与 type="submit" 配合使用。
formmethod5️⃣	get post	发送方法 与 type="submit" 配合使用。
formnovalidate5️⃣	formnovalidate	覆盖 <form> 元素的 novalidate 属性。 与 type="submit" 配合使用。
formtarget5️⃣	_blank 新窗口打开 _self 当前窗口打开 _parent 父窗口打开 _top 顶层窗口打开	接收响应的窗口或框架的名称。 与 type="submit" 配合使用。
name	name	规定按钮的名称。
type	button 默认 submit 提交 reset 重置按钮（清除表单数据）	规定按钮的类型。
value	text	规定按钮的初始值。

<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

<option>

• 下拉列表中的一个选项（一个条目）
• 作为 <select> 或者<datalist> 一个元素使用

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

<select>
    <option value="Apple">Apple</option>
    <option value="Banana" selected>Banana</option>
    <option value="Orange" disabled>Orange</option>
</select>

<select>

• 下拉列表
• <option>标签定义了列表中的可用选项

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

<select multiple size="3" name="fruits">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Orange">Orange</option>
    <option value="Mango">Mango</option>
    <option value="Pineapple">Pineapple</option>
</select>

<optgroup>

• 把相关的选项组合在一起

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

<select>
    <optgroup label="Fruits">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Orange">Orange</option>
    <option value="Mango">Mango</option>
    <option value="Pineapple">Pineapple</option>
    </optgroup>
    <optgroup label="Veggies" disabled>
    <option value="Carrot">Carrot</option>
    <option value="Broccoli">Broccoli</option>
    <option value="Cucumber">Cucumber</option>
    <option value="Spinach">Spinach</option>
    </optgroup>
    <optgroup label="Dairy">
    <option value="Cheese">Cheese</option>
    <option value="Milk">Milk</option>
    <option value="Yogurt">Yogurt</option>
</select>

<label>

• 为 input 元素定义标注（标记）
• 请把 "for" 属性的值设置为相关元素的 id 属性的值,则与之绑定

属性名	值	说明
for	element_id	规定 label 与哪个表单元素绑定。
form5️⃣	form_id	规定 label 字段所属的一个或多个表单。

<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><br>
  <input type="submit" value="提交">
</form>

<fieldset>

• 将表单内的相关元素分组。
• 在相关表单元素周围绘制边框。

属性名	值	说明
disabled5️⃣	disabled	规定该组中的相关表单元素应该被禁用。
form5️⃣	form_id	规定 fieldset 所属的一个或多个表单。
name5️⃣	text	规定 fieldset 的名称。

<form>
  <fieldset>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
  <fieldset disabled>
        Phone: <input type="text"><br>
        Address: <input type="text">
          </fieldset>
</form>

<legend>

• 为 <fieldset>元素定义标题。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
  <fieldset>
        <legend>Contact information:</legend>
        Phone: <input type="text"><br>
        Address: <input type="text">
          </fieldset>
</form>

<datalist>

• 规定了 <input> 元素可能的选项列表
• 提供"自动完成"的特性, 里边的选项是预先定义好的，将作为用户的输入数据。

属性名	值	说明

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

<keygen> ⚠️

• 该标签在新的 Web 标准中已废弃

<output>

• 作为计算结果输出显示(比如执行脚本的输出)

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

<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>

• Form。
• 用于创建和处理 HTML 表单。
• 包含 <input>、<select>、<textarea>、<button> 等元素。

属性名	值	说明
accept-charset	UTF-8 ISO-8859-1 ...	提交时使用的字符编码列表，多个字符编码使用空格分隔。
action	URL	表单提交目标地址
autocomplete5️⃣	on off	是否应该启用自动填充功能
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	表单数据编码类型
method	get post	HTTP 方法。
name	string	表单名称
novalidate5️⃣	novalidate	使用该属性，则提交表单时不进行验证
target	_blank 新窗口打开 _self 当前窗口打开 _parent 父窗口打开 _top 顶层窗口打开	规定在何处打开 action URL。

<form action="/" method="post" target="_blank" autocomplete="off">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

贡献者: yulc