HTML5 引入了许多新的表单元素和属性，这些新特性不仅增强了表单的功能性，还提高了用户体验。以下是对 HTML5 表单元素的详细介绍，包括代码示例。
1. 输入类型 (<input type="...">)
HTML5 为 <input> 元素增加了多种新的 type 属性值，这些值定义了用户输入的数据类型。
文本字段
·
text：标准文本字段。
·
html
|
<input type="text" name="username" placeholder="Username"> |
·
password：密码字段，输入内容会被遮罩。
·
html
|
<input type="password" name="password" placeholder="Password"> |
·
search：搜索字段，在某些浏览器中显示为圆角的输入框。
·
html
|
<input type="search" name="search" placeholder="Search..."> |
·
email：邮箱地址字段，会自动验证输入是否符合邮箱格式。
·
html
|
<input type="email" name="email" placeholder="Email"> |
·
url：URL 字段，会自动验证输入是否为有效的 URL。
·
html
|
<input type="url" name="website" placeholder="Website URL"> |
·
tel：电话号码字段，不会进行特定的验证，但可以用于移动设备的特定键盘布局。
·
html
|
<input type="tel" name="phone" placeholder="Phone Number"> |
·
number：数字字段，允许用户输入数字，可以带有小数点和负号。
·
html
|
<input type="number" name="quantity" min="1" max="10" value="1"> |
·
range：滑块字段，允许用户选择一定范围内的数字。
·
html
|
<input type="range" name="volume" min="0" max="100" value="50"> |
·
datetime-local：日期和时间字段，允许用户选择日期和时间。
·
html
|
<input type="datetime-local" name="birthday"> |
·
date：日期字段，允许用户选择日期。
·
html
|
<input type="date" name="birthday"> |
·
month：月份字段，允许用户选择月份和年份。
·
html
|
<input type="month" name="birthday"> |
·
week：周字段，允许用户选择周和年份。
·
html
|
<input type="week" name="weekofyear"> |
·
time：时间字段，允许用户选择时间（小时和分钟）。
·
html
|
<input type="time" name="usertime"> |
·
color：颜色字段，允许用户选择一个颜色。
·
html
|
<input type="color" name="favoritecolor"> |
2. 其他表单元素
文本区域 (<textarea>)
<textarea> 元素用于多行文本输入。
html
|
<textarea name="message" rows="4" cols="50"> |
|
Enter your message here... |
|
</textarea> |
选择列表 (<select>)
<select> 元素用于创建下拉列表。
html
|
<select name="cars"> |
|
<option value="volvo">Volvo</option> |
|
<option value="saab">Saab</option> |
|
<option value="mercedes">Mercedes</option> |
|
<option value="audi">Audi</option> |
|
</select> |
数据列表 (<datalist>)
<datalist> 元素与 <input> 元素一起使用，可以定义预定义的选项列表供用户选择。
html
|
<input list="browsers" name="browser"> |
|
<datalist id="browsers"> |
|
<option value="Internet Explorer"> |
|
<option value="Firefox"> |
|
<option value="Chrome"> |
|
<option value="Opera"> |
|
<option value="Safari"> |
|
</datalist> |
输出 (<output>)
<output> 元素用于显示表单计算的结果。
html
|
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> |
|
<input type="number" id="a" value="50"> + |
|
<input type="number" id="b" value="50"> = |
|
<output name="x" for="a b"></output> |
|
</form> |
进度条 (<progress>)
<progress> 元素用于显示任务的进度。
