HTML表单总结

2000~4000

4000~8000

8000~10000

10000~20000

效果

示例 2

代码

请输入

用户名：

密　码：

效果

[](()2.列表框元素 select

---

select 标记同时嵌套列表项标记 option，可以实现列表框效果。

选项显示内容 选项显示内容

…

<select>标记用于定义列表框，<option>标记用于向列表框中添加列表项目，其中的 size 属性用于定义列表框的行数.

示例 3

代码

请选择:

旅游须知 旅游景点 旅游图库

餐饮娱乐 购物街区 酒店住宿

效果

练习

请选择你喜欢的网站:

新浪 雅虎 搜狐 google 网易

[](()3.文本域输入元素 textarea

---

文本域用来输入文字信息，行间可以换行。

<form><textarea name=“mytext” rows=“5” cols=“100” ></textarea></form>

示例 4

代码

请对本次旅游服务做出评价：

效果

[](()三、HTML5 新增的表单元素和属性

=================================================================================

[](()1.HTML5新增input类型

---

[](()(1)数值输入域——number

input 标记的 type 属性为 number 时，可以在表单中插入数值输入域，还可以限定输入数字的范围。

<input name=" " type="number" min=" " max=" " step=" " value=" " />

数值输入域的属性、取值及说明

示例 5

代码

请输入数字：

请输入大于等于 1 的数字：

请输入 1-10 之间的数字：

效果

[](()(2)滑动条——range

将 input 标记中的 type 属性设置为 range，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围.

<input name="" type="range" min="" max="" step="" value="">

示例

代码

请输入大于等于1的数字：

请输入1-10之间的数字：

效果

[](()(3)日期选择器——date pickers

将in 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 put标记中的type属性设置为以下几种类型中的一种就可以完成网页中日期选择器的定义。

 date——选取日、月、年

 month——选取月、年

 week——选取周和年

 time——选取时间（小时和分钟）

 datetime——选取时间、日、月、年（UTC—世界标准时间）

 datetime-local——选取时间、日、月、年（本地时间）

示例

代码

请选择日期:

效果

[](()(4)url类型

url类型的input元素是专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。

<input name="u1" type="url" value=http://www.icourses.cn />

[](()(5)email类型

email类型的文本框具有一个multiple属性一它允许在该文本框中输入一串以逗号分隔 的email地址。

<input name="emaill" type="email" value=fning@163.com />

[](()(6)tel类型

• 作用

tel类型让input元素生成一个只能输入电话号码的文本框。但目前，这种类型的文本框并没有提供额外的要求，即用户在该文本框中输入任意的字符串，浏览器都不会执行校验操作。

• 基本语法

<input type="tel">

[](()(7)search类型

• 作用

search类型让input元素生成一个专门用于输入搜索关键字的文本框，用户输入搜索关键字后，文本框右侧会出现一个“×”按钮，单击该按钮将清空文本框中的输入内容。

• 基本语法

<input type="search" name="…">

• 注意：

Firefox浏览器不支持该特性，search类型在

Firefox浏览器中跟普通的文本框完全一样。

[](()(8) color类型

• 作用

color类型让input元素生成一个颜色选择器。当用户在颜色选择器中选中某种颜色后，color文本框内自动显示用户选中的颜色。

• 基本语法

<input type="color" name="…">

• 注意：

IE11则不支持color类型，在该浏览器中color类型

文本框就跟“text”文本框完全一样。

[](()2.HTML5表单新增属性

---