1、text元素
见前前章
2、password元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
user name:<br/>
<input type="text" name="username">
<br/>
password:
<br/>
<input type="password" name="psd">
<br/>
</form>
</body>
</html>
结果：
3、submit元素
见前前章
4、radio元素
见前前章
5、checkbox元素定于复选框
允许客户在有限数量的选项中选择零个或者多个选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com">
<input type="checkbox" name="vehicle" value="bike">i have a bike
<br/>
<input type="checkbox" name="vehicle" value="car">i have a car
<br/>
</form>
</body>
</html>
结果
对比与selection
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com">
<select name="colors">
<option value="red">red</option>
<option value="red" selected>blue</option>
<option value="red">green</option>
<option value="red">black</option>
</select>
<br/>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>
结果：
6、button元素
见前章
HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
7、number元素
用于包含数字值的输入字段，限制可应用到的数字字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
quantity(between 1 and 5)
<input type="number" name="quantity" min="1" max="100" step="10" value="20">
</form>
</body>
</html>
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
8、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com" method="get">
quantity(between 1 and 5)
<input type="number" name="quantity" min="1" max="100" step="10" value="20">
<br/>
birthday:<br/>
enter a date before 2017-10-31:<br/>
<input type="date" name="bday" max="2017-10-30"><br/> #date元素用于包含日期的输入字段
select your favorite color:<br/>
<input type="color" name="favcolor"><br/> #color用于应该包含颜色的输入字段
points:<br/>
<input type="range" name="points" min="0" max="100"> #range字段包含一定范围内值的输入字段 输入字段能显示为滑动字块
<input type="submit"><br/>
birthday(month and year):<br/>
<input type="month" name="birthmonth"><br/> #允许用户选择月份和年份
select a week:<br/>
<input type="week" name="week_year"><br/> #允许用户选择周和年
select a time:<br/>
<input type="time" name="user_time"> #允许用户选择时间无时区
<input type="submit"><br/>
birthday(day and time):<br/>
<input type="datetime" name="bdaytime"> #允许用户选择日期和时间有时区
<input type="submit"><br/>
birthday(day and time):<br/>
<input type="datetime-local" name="bdaytime"> #允许用户选择日期和时间有时区
<input type="submit" value="send"><br/>
E-mail:<br/>
<input type="email" name="email"> #用于包含电子邮件地址的输入字段 能够在提交时对邮件地址进行验证
<input type="submit"><br/>
search google:<br/>
<input type="search" name="search"> #用于搜索字段
<input type="submit"><br/>
telephone:<br/>
<input type="tel" name="usertel"> #用于应该包含电话号码的字段 目前只有safari支持tel类型
<input type="submit"><br/>
add your homepage:<br/>
<input type="url" name="userurl"> #用于包含URL地址的输入字段 在提交时自动验证URL
<input type="submit"><br/>
</form>
</body>
</html>