Input 类型文本
定义一行文本输入字段:
名字:
姓氏:
Input 类型密码
定义一个密码字段:
用户名:
密码:
在密码字段的字符被屏蔽(显示为星号或圆)。
Input 类型提交
定义将表单数据提交给表单处理程序的按钮。
表单处理程序通常是能够处理输入数据的脚本的服务器页面。
表单处理程序指定表单的action属性:
First name:
Last name:
如果忽略提交按钮的值属性,按钮将得到默认文本:
First name:
Last name:
Input 类型重置
定义重置按钮,将所有表单值重置为默认值:
First name:
Last name:
如果您更改输入值,然后单击“重置”按钮,表单数据将重置为默认值。
Input 类型单选按钮
定义一个单选按钮。
单选按钮让用户只选择一个:
男
女
其他
Input 类型多选
定义了一个复选框。
复选框让用户选择零个或多个有限的选择选项。
我有一辆直行车
我有一辆汽车
Input 类型按钮
定义一个按钮:
οnclick="alert('Hello World!')" value="点击我!">
HTML5 Input类型
HTML5 添加了几种新的输入类型:
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
旧web浏览器不支持的新输入类型将表现为 .
Input 类型数字
定义一个数字输入字段。
您还可以设置限制什么号码接受。
下面的示例显示数字输入字段,您可以在其中输入值从1到5:
数量 (1到5之间):
Input 限制
下面列出了一些常见的输入限制(有些是新的HTML5):
属性
描述
disabled
指定一个输入字段应该是 disabled
max
指定输入字段的最大值.
maxlength
指定输入字段的字符的最大数目.
min
定输入字段的最小值.
pattern
指定检查输入值的正则表达式.
readonly
指定只读输入字段(不能更改).
required
指定需要输入字段(必须填写)
size
指定输入字段的宽度(字符).
step
指定输入字段的合法编号间隔.
value
指定输入字段的默认值.
在下一章中,您将了解更多有关输入限制的知识。
下面的示例显示一个数字输入字段,在这里您可以输入值从0到100,步长为10。默认值为30:
数量:
min="0" max="100" step="10" value="30">
Input 类型日期
用于包含日期的输入字段。
这取决于浏览器的支持,日期选择器可以显示在输入字段。
Birthday:
您还可以添加日期的限制:
输入一个 1980-01-01 之前的日期:
输入一个 2000-01-01 之后的日期:
Input 类型颜色
用于包含颜色的输入字段。
这取决于浏览器的支持,颜色选择器可以显示在输入字段。
选择一个你喜欢的颜色:
Input 类型范围
用于输入字段,该字段应包含范围内的值。
根据浏览器支持,输入字段可以显示为滑块控件。
点:
您可以使用以下属性来指定限制:最小值,最大值,步长和值。
Input 类型月份
允许用户选择一个月和一年。
这取决于浏览器的支持,日期选择器可以显示在输入字段。
你的生日 (年和月):
Input 类型星期
允许用户选择一个星期和一年。
这取决于浏览器的支持,日期选择器可以显示在输入字段。
选择一个星期:
Input 类型时间
允许用户选择时间(没有时区)。
这取决于浏览器的支持,一时间选择器可以显示在输入字段。
选择一个时间:
Input 类型本地日期时间
指定没有时区的日期和时间输入字段。
这取决于浏览器的支持,日期选择器可以显示在输入字段。
生日 (日期和时间):
Input 类型 Email
用于包含电子邮件地址的输入字段。
根据浏览器的支持,提交时可以自动验证电子邮件地址。
一些智能手机识别的电子邮件类型,并添加.com的键盘,以配合电子邮件输入。
E-mail:
Input 类似搜索
用于搜索字段(搜索字段的行为像常规文本字段)。
搜索:
Input 类型电话
用于包含电话号码的输入字段。
电话型目前只在Safari 8支持。
电话:
Input 类型 Url地址
用于包含URL地址的输入字段。
根据浏览器的支持,提交时可以自动验证URL字段。
一些智能手机识别的URL类型,并添加.com到键盘,以配合URL输入。
添加你的主页: