首页 > 代码库 > 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超文本标记语言(九)——表单输入类型