首页 > 代码库 > HTML超文本标记语言（九）——表单输入类型
HTML超文本标记语言（九）——表单输入类型
1、<inpur type="text">：定义供文本输入的单行输入字段；
2、<input tyope="password">：定义密码字段。password字段中的字符会被做掩码处理（显示为星号或实心圆）；
3、<input type="submit" value="http://www.mamicode.com/submit">：定义提交按钮，将表单数据提交至表单处理程序。若省略value属性，按钮以中文“提交”显示；
4、<input type="radio">：定义单选按钮。
<form> <input type="radio" name="sex" value="male" checked>Male <br/> <input type="radio" name="sex" value="female">Female <br/><br/> <input type="submit"> </form>
5、<input type="checkbox">：定义复选框。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br/> <input type="checkbox" name="vehicle" value="Car">I have a car <br/><br/> <input type="submit"> </form>
6、<input type="button">：定义按钮。
<input type="button" value="按我!" onclick="alert(‘Hello World!‘)"> <button input="button" onclick="alert(‘Hello World!‘)">Click Me!</button>
感受下<input>元素button属性和<button>元素的区别。
HTML5增加了多个新的输入类型：
7、<input type="number">：用于应该包含输入数字值的输入字段。可以通过属性对数字做出限制。
<form> Quantity(between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit" value="提交查询内容"> </form>
8、<input type="date">：用于应该包含日期的输入字段。可以利用min、max等对日期进行限制。根据浏览器支持，日期选择器会出现在输入字段中。
<form> Enter a date before 1980-01-01: <br/> <input type="date" name="bday" max="1979-12-31"> <br/><br/> Enter a date after 2000-01-01: <br/> <input type="date" name="bday" min="2000-01-02"> <br/><br/> <input type="submit"> </form>
9、<input type="color">：用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现在输入字段中。
<form> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form>
10、<input type="range">：用于应该包含 一定范围内的值 的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。可以使用min、
max、step、value属性来规定限制。
<form> Points: <input type="range" name="points" min="0" max="10" step="5"> <input type="submit"> </form>
11、<input type="month">：允许用户选择月份和年份。根据浏览器支持，日期选择器会出现在输入字段中。
<form> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form>
12、<input type="week">：允许用户选择周和年。根据浏览器，日期选择器会出现在输入字段中。
<form> Select a week: <input type="week" name="year_week"> <input type="submit"> </form>
13、<input type="time">：允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现在输入字段中。
<form> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form>
14、<input type="dtetime">：允许用户选择日期和时间（有时区）。根据浏览器支持，日期选择器会出现在输入字段中。
15、<input type="datetime-local">：允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现在输入字段中。
16、<input type="email">：用于应该包含电子邮件地址的输入字段。
17、<input type="search">：用于搜索字段（搜索字段的表现类似常规文本字段）。
18、<input type="tel">：用于应该包含电话号码的输入字段。
19、<input type="url">：用于应该包含URL地址的输入字段。
HTML超文本标记语言（九）——表单输入类型