HTML中的HTML5新增的表单元素有哪些?

60次阅读
没有评论

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按钮提交表单。

正文完
 
评论(没有评论)