图像形式的提交按钮<input type="image" />
<input type="image" src="images/login.gif" />
图像形式的提交按钮与普通的提交按钮在功能上基本相同,只是它用图像替代了默认的按钮,外观上更加美观。
隐藏域<input type=" hidden" />
<input type="hidden" />
隐藏域对于用户是不可见的,通常用于后台的程序,读者了解即可。
文件域<input type="file" />
<input type="file" />
当定义文件域时,页面中将出现一个文本框和一个“浏览...”按钮,用户可以通过填写文件路径或直接选择文件的方式,将文件提交给后台服务器。
email类型<input type="email" />
请输入您的邮箱:<input type="email" name="formmail"/>
email类型的input元素是一种专门用于输入E-mail地址的文本输入框,用来验证email输入框的内容是否符合Email邮件地址格式;如果不符合,将提示相应的错误信息。
url类型<input type="url" />
请输入个人网址:<input type="url" name="user_url"/>
url类型的input元素是一种用于输入URL地址的文本框。
tel类型<input type="tel" />
请输入电话号码:<input type="tel" name="telphone" pattern="^\d{11}$"/>
tel类型用于提供输入电话号码的文本框,由于电话号码的格式千差万别,很难实现一个通用的格式。因此,tel类型通常会和pattern属性配合使用。
search 类型<input type="search" />
输入搜索关键词:<input type="search" name="searchinfo"/>
search 类型是一种专门用于输入搜索关键词的文本框,它能自动记录一些字符。在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。
color类型<input type="color" />
请选取一种颜色:<input type="color" name="color1"/>
color类型用于提供设置颜色的文本框,用于实现一个RGB颜色输入。其基本形式是#RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色。
number类型<input type="number" />
请输入数值:<input type="number" name="number1" value="1" min="1" max="20" step="4"/>
number类型的input元素用于提供输入数值的文本框。在提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内,则会出现错误提示。
range类型<input type="range" />
请输入数值:<input type=“range" name="number1" value="1" min="1" max="20" step="4"/>
range类型的input元素用于提供一定范围内数值的输入范围,在网页中显示为滑动条。它的常用属性与number类型一样。
Date pickers类型<input type= date, month, week…" />
<input type="date"/>
Date pickers类型是指时间日期类型,HTML5中提供了多个可供选取日期和时间的输入类型,用于验证输入的日期