HTML5 表单元素
HTML5表单元素技术文档
HTML5引入了许多新的表单元素,使得开发人员可以更好地控制表单的外观和功能。在这篇文章中,我们将介绍这些新的表单元素,它们的用途以及如何使用它们。
1. input元素
最常见的表单元素之一就是input元素了。HTML5新增了一些类型以及属性,使得它更加多功能化。
类型
- text:标准的单行文本输入框。
- password:掩码文本输入框,输入的字符会被掩盖为星号或小圆点。
- date:日期选择器。
- time:时间选择器。
- datetime-local:本地日期和时间输入框,支持设置年月日时分秒。
- email:电子邮件输入框,浏览器会进行邮箱格式验证。
- url:URL输入框,浏览器会验证URL的格式是否正确。
- search:搜索框,可以用于搜索与过滤。
- number:数字输入框,只允许输入数字。
- range:滑块控件,用于设置数字范围。
- color:颜色选择器,用于选择颜色。
属性
- placeholder:在输入框为空时显示的占位符。
- required:指示该输入框为必填项。
- pattern:正则表达式,用于输入框内容的格式验证。
- autocomplete:启用或禁用自动完成,可以设置“on”或“off”。
- autofocus:指示在页面加载时该输入框是否获得焦点。
- readonly:指示输入框只读。
- disabled:指示输入框禁用。
2. datalist元素
datalist元素可以与input元素一起使用,它可以在输入框中提供一些可选项,用户可以根据输入框内容的提示来选择。
用法
<label for="myInput">请选择:</label>
<input list="options" id="myInput" name="myInput" />
<datalist id="options">
<option value="选项1">
<option value="选项2">
<option value="选项3">
</datalist>
3. textarea元素
textarea元素用于创建多行文本框。
属性
- cols:指示文本框的可见宽度。
- rows:指示文本框的可见高度。
- wrap:指示文本框文本的换行方式,可以设置“soft”、“hard”或“off”。
4. select元素
select元素用于创建下拉菜单。
属性
- multiple:指示是否可以多选。
- required:指示该下拉菜单为必选项。
用法
<label for="mySelect">请选择:</label>
<select id="mySelect" name="mySelect">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>
5. output元素
output元素用于显示计算结果或者文本内容。
属性
- for:指示该元素与哪个文本输入框相关联。
用法
<label for="myInput">请输入数字:</label>
<input id="myInput" type="number" onchange="output.value = myInput.value">
<output id="output"></output>
6. progress元素
progress元素用于表示一个任务的完成进度。
属性
- value:指示任务已经完成的百分比。
7. meter元素
meter元素用于表示数字的范围。
属性
- value:指示数字的当前值。
- min:指示数字的最小值。
- max:指示数字的最大值。
结论
上述表单元素技术文档介绍了HTML5新增的主要表单元素和属性,以及如何基于这些元素创建一些基础的表单。当然,这些元素只是其中的一部分,如果你想深入学习HTML5表单的更多知识,网上有很多学习资源。