输入类型
text
<input type="text"> 定义供文本输入的单行输入字段:
1 < form >
2 First name:< br >
3 < input type = "text" name = "firstname" >< br >< br >
4 Last name:< br >
5 < input type = "text" name = "lastname" >
6 </ form >
password
<input type="password"> 定义密码字段:
1 < form >
2 User name:< br >
3 < input type = "text" name = "username" >< br >< br >
4 User password:< br >
5 < input type = "password" name = "psw" >
6 </ form >
注释:password 字段中的字符会被做掩码处理(显示为星号或实心圆)。
submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
1 < form action = "action_page.php" >
2 First name:< br >
3 < input type = "text" name = "firstname" value = "Mickey" >< br >< br >
4 Last name:< br >
5 < input type = "text" name = "lastname" value = "Mouse" >< br >< br >
6 < input type = "submit" value = "Submit" >
7 </ form >
如果您省略了提交按钮的 value 属性,那么该按钮将获得默认文本。
radio
<input type="radio"> 定义单选按钮。
1 < form >
2 < input type = "radio" name = "sex" value = "male" checked > Male< br >
3 < input type = "radio" name = "sex" value = "female" > Female
4 </ form >
checkbox
<input type="checkbox"> 定义复选框。
1 < form >
2 < input type = "checkbox" name = "vehicle" value = "Bike" > I have a bike< br >
3 < input type = "checkbox" name = "vehicle" value = "Car" > I have a car
4 </ form >
<input type="button"> 定义按钮。
1 < input type = "button" onclick = "alert('Hello World!')" value = "Click Me!" >
HTML5 输入类型
HTML5 增加了多个新的输入类型:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。
number
<input type="number"> 用于应该包含数字值的输入字段。
1 < form >
2 Quantity (between 1 and 5):< br >
3 < input type = "number" name = "quantity" min = "1" max = "5" >
4 </ form >
输入限制
这里列出了一些常用的输入限制:
属性
描述
disabled
规定输入字段应该被禁用。
max
规定输入字段的最大值。
maxlength
规定输入字段的最大字符数。
min
规定输入字段的最小值。
pattern
规定通过其检查输入值的正则表达式。
readonly
规定输入字段为只读(无法修改)。
required
规定输入字段是必需的(必需填写)。
size
规定输入字段的宽度(以字符计)。
step
规定输入字段的合法数字间隔。
value
规定输入字段的默认值。
date
<input type="date"> 用于应该包含日期的输入字段。
1 < form >
2 Birthday:< br >
3 < input type = "date" name = "bday" >
4 </ form >
color
<input type="color"> 用于应该包含颜色的输入字段。
1 < form >
2 Select your favorite color:< br >
3 < input type = "color" name = "favcolor" >
4 </ form >
range
<input type="range"> 用于应该包含一定范围内的值的输入字段。
1 < form >
2 < input type = "range" name = "points" min = "0" max = "10" >
3 </ form >
month
<input type="month"> 允许用户选择月份和年份。
1 < form >
2 Birthday (month and year):< br >
3 < input type = "month" name = "bdaymonth" >
4 </ form >
week
<input type="week"> 允许用户选择周和年。
1 < form >
2 Select a week:< br >
3 < input type = "week" name = "week_year" >
4 </ form >
time
<input type="time"> 允许用户选择时间(无时区)。
1 < form >
2 Select a time:< br >
3 < input type = "time" name = "usr_time" >
4 </ form >
datetime
<input type="datetime"> 允许用户选择日期和时间(有时区)。
1 < form >
2 Birthday (date and time):< br >
3 < input type = "datetime" name = "bdaytime" >
4 </ form >
datetime-local
<input type="datetime-local"> 允许用户选择日期和时间(无时区)。
1 < form >
2 Birthday (date and time):< br >
3 < input type = "datetime-local" name = "bdaytime" >
4 </ form >
email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
1 < form >
2 E-mail:< br >
3 < input type = "email" name = "email" >
4 </ form >
search
<input type="search"> 用于搜索字段。
1 < form >
2 Search Google:< br >
3 < input type = "search" name = "googlesearch" >
4 </ form >
tel
<input type="tel"> 用于应该包含电话号码的输入字段。
1 < form >
2 Telephone:< br >
3 < input type = "tel" name = "usrtel" >
4 </ form >
url
<input type="url"> 用于应该包含 URL 地址的输入字段。
1 < form >
2 Add your homepage:< br >
3 < input type = "url" name = "homepage" >
4 </ form >