HTML 表单用于收集不同类型的用户输入。是非常常用的标签,需要form元素的配合
<form>
.
input 元素
.
</form>
在标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
常用type属性
属性值 | 描述 |
---|---|
button | 定义一个点击按钮(一般用于js) |
checkbox | 定义复选框。 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
hidden | 定义胞藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
定义重置按钮
<input type="reset" name="button" id="button" value="重置">
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。
HTML5新增的input类型
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
-type=“month”- | -限制用户输入必须为月类型- |
type="date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“number”– | -限制用户输入必须为数字类型- |
type=“tel” | 手机号码 |
type="search” | 搜索框 |
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
HTML 与 XHTML 之间的差异
在 HTML 中,input 标签没有结束标签。
在 XHTML 中,input标签必须被正确地关闭。
提示和注释: input 元素是空的,它只包含标签属性。你可以使用 label 元素来定义 input 元素的标注