输入类型
本章描述输入类型的<input>元素。
输入类型：文本
<input type="text">定义了文本输入的一行输入字段：
例
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> 试一试» 这是怎样的HTML代码中会在浏览器中显示：
名字：
姓：
输入类型：密码
<input type="password">定义了一个密码字段 ：
例
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> 试一试» 这是怎样的HTML代码中会在浏览器中显示：
用户名：
用户密码：
在密码字段中的字符被掩码(shown as asterisks or circles) 。
输入类型：提交
<input type="submit">定义了提交表单输入到表单处理程序的按钮。
的形式处理程序通常是具有用于处理输入数据的脚本服务器页面。
表单处理程序是表单的action属性指定：
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> 试一试» 这是怎样的HTML代码中会在浏览器中显示：
名字：
姓：
如果省略提交按钮的值属性，按钮将获得一个默认的文字：
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> 试一试» 输入类型： radio
<input type="radio">定义了一个radio按钮 。
Radio按钮，让用户选择的选择数量有限的只有一个：
例
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> 试一试» 这是怎样的HTML代码中会在浏览器中显示：
男
女
其他
输入类型： checkbox
<input type="checkbox">定义了一个checkbox 。
Checkboxes让用户选择的选择数量有限的零个或多个选项。
例
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> 试一试» 这是怎样的HTML代码中会在浏览器中显示：
我有一辆自行车
我有一辆车
输入类型： button
<input type="button">定义了一个button ：
这是怎样的HTML代码中会在浏览器中显示：
HTML5 Input类型
HTML5增加了几个新input类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input类型，而不是旧的Web浏览器的支持，将表现为input型文本。
Input类型： number
所述<input type="number">被用于应该包含一个数值输入字段。
您可以设置号码的限制。
根据浏览器的支持，这些限制可以适用于输入字段。
例
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> 试一试» Input限制
下面是一些常见的列表input限制(some are new in HTML5) ：
| 属性 | 描述 |
|---|---|
| disabled | 指定的输入字段应该被禁用 |
| max | 规定输入字段的最大值 |
| >maxlength | 指定字符的最大数目为输入域 |
| min | 规定输入场的最小值 |
| pattern | 正则表达式来检查对输入值 |
| readonly | 指定一个输入域是只读(cannot be changed) |
| required | 指定一个输入字段是必需的(must be filled out) |
| size | 指定宽度(in characters)的输入字段的 |
| step | 指定合法的数字间隔输入字段 |
| value | 规定输入字段的默认值 |
您将了解更多关于input在下一章限制。
例
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> 试一试» Input类型： date
所述<input type="date">被用于应该包含日期输入字段。
根据浏览器的支持，日期选择器可以在输入字段中显示的。
您可以添加限制的input ：
例
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> 试一试» Input类型：颜色
所述<input type="color">被用于应该包含一个颜色输入字段。
根据浏览器的支持，颜色选择器可以在输入字段中显示的。
Input类型：范围
所述<input type="range">被用于应该包含的范围内的值的输入字段。
根据浏览器的支持，输入字段，可以显示为滑块控件。
您可以使用following属性来指定限制：最小，最大，步骤，值。
Input类型： month
所述<input type="month">允许用户选择一个月份和年份。
根据浏览器的支持，日期选择器可以在输入字段中显示的。
Input类型： week
所述<input type="week">允许用户选择一个星期和一年。
根据浏览器的支持，日期选择器可以在输入字段中显示的。
Input类型： time
所述<input type="time">允许用户选择时间(no time zone) 。
根据浏览器的支持，一时间选择器可以在输入字段中显示的。
Input类型： datetime
所述<input type="datetime">允许用户选择一个日期和时间(with time zone) 。
 | 输入类型的日期时间从HTML标准除去。 使用日期时间本地代替。 |
|---|
输入类型：日期时间本地
所述<input type="datetime-local">允许用户选择一个日期和时间(no time zone) 。
根据浏览器的支持，日期选择器可以在输入字段中显示的。
输入类型：电子邮件
所述<input type="email">被用于应该包含电子邮件地址输入字段。
根据浏览器支持，电子邮件地址，可以自动提交时验证。
一些智能手机识别出邮件类型，并增加了".com"的键盘相匹配的电子邮件的输入。
输入类型：搜索
所述<input type="search">用于搜索字段(a search field behaves like a regular text field) 。
输入类型：电话
所述<input type="tel">被用于应该包含一个电话号码输入字段。
该电话类型目前只在Safari 8支持。
输入类型：网址
所述<input type="url">被用于应该包含一个URL地址的输入域。
根据浏览器支持，URL字段可以自动提交时验证。
一些智能手机识别URL类型，并增加了".com"的键盘相匹配的网址输入。