input表单元素

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 元素的标注

猜你喜欢

转载自blog.csdn.net/weixin_48549175/article/details/109565913
今日推荐