首页 > 软件操作教程 > 编程开发 > HTML
题目内容

HTML5 表单应用 输入型控件

题目答案

    HTML5拥有多个新的表单输入型控件,这些新特性提供了更好的输入控制和验证,下面就来为大家介绍一下这些新的表单输入型控件。

    1.Input类型-email

    email类型用于应该包含e-mail地址的输入域。在提交表单时,会自动验证email域的值,代码实例如下:

    E-mail:<input type="email" name="email_url" />

2.Input类型-url

    url类型用于应该包含url地址的输入域。在提交表单时,表单会自动验证url域的值,代码实例如下:

    Home-page: <input type="url" name="user_url" />

3.Input类型-number

number类型用于应该包含数值的输入域。还能够设定对所接受数字的限定,代码实例如下:

points: <input type="numbert" name="points" max="10" min="1"/>

请使用如表所示的属性来规定对数字类型的限定。

属性



max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果step= “3”,则合法的数是-303,6等)

vdlue

number

规定默认值

4.Input类型-range

    range类型用于应该包含一定范围内数字值的输入域。range类型在页面中显示为可移动的滑动条,还能够设定对所接受数字的限定,代码实例如下:

    <input type="range" min="2" max="9" />

请使用如表所示的属性来规定对数字类型的限定。

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果step="3",则合法的数是-3, 0, 3, 6等)

value

number

规定默认值

5.Input类型-Date Pickers (日期选择器)

    HTML5拥有多个可供选取曰期和时间的新输入类型,包括:

© date:选取日、月、年。

© month:选取月、年。

© week:选取周、年。

© time:选取时间(小时和分钟)。

© datetime:选取时间、日、月、年(UTC时间)。

© datetime-local:选取时间、日、月、年(本地时间)。

如果我们想要从日历中选取一个日期,代码如下:

Date: 〈input type*3"date" xiame^Hdate" />

6.Input类型-search

    search类型用于搜索域,开发者可以用在大名鼎鼎的百度搜索。search域在页面中显示为常规的单行文本输入框。

7.Input 类型-color

color类型用于颜色,可以让用户在浏览器中直接使用拾色器找到自己想要的颜色。color会在页面中生成一个允许用户选取颜色的拾色器。

代码实例如下:

color: <input type="color" name="color_type" />


网友评论(共0条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端