输入类型
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>button
<input type="button"> 定义按钮。
1<input type="button" onclick="alert('Hello World!')" value="Click Me!">HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- 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><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>