HTML5新增了一些表单元素,包括以下内容:
1、input元素的type属性新增了一些值,例如email、url、number、date等,可以用来限制用户输入的内容类型,方便数据的处理和验证。
2、datalist元素可以和input元素配合使用,用于提供一个下拉菜单列表,让用户选择。
3、output元素可以用来展示计算结果或者某些输入的结果,它可以通过for属性和表单控件关联起来,当表单控件的值发生改变时,输出的内容也会相应地发生改变。
4、textarea元素可以用来让用户输入多行文本,它可以通过rows和cols属性来设置文本框的行数和列数。
5、progress元素可以用来展示某个任务的完成进度,它可以通过value属性来设置任务的完成百分比。
6、meter元素可以用来展示一个度量值,例如一个温度计或者一个油量计,它可以通过value和min、max属性来设置度量值的范围和当前的值。
下面是一个使用HTML5新增的表单元素的示例:
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="0" max="120" required>
<label for="gender">性别:</label>
<select id="gender" name="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5"></textarea>
<input type="submit" value="提交">
</form>
在这个示例中,我们使用了input元素的type属性来限制用户输入的内容类型,使用了required属性来设置必填项,使用了datalist元素提供一个下拉菜单,使用了textarea元素让用户输入多行文本,使用了select元素提供一个单选菜单,以及使用了submit按钮提交表单。
正文完