HTML表单总结

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

…

<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

将input标记中的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表单新增属性

---

(1)form属性

在HTML4中，表单的元素必须书写在表单内部；

在HTML5中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。

姓名：

确认：

简历：

(2)formmethod和formaction属性

在HTML4中，表单通过惟一的action属性将表单内的所有元素统一提交到另一个页面（应用程序），也通过惟一的method属性来指定统一的提交方法是get或post。

在HTML5中增加的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面.也可以使用formmethod属性对每个表单元素分别指定不同的提交方法。

示例

代码

用户名：

---

S1处理：

S2处理：

S3处理：提交到s3

S4处理：

效果

(3)placeholder属性

placeholder是指当文本框处于未输入状态时文本框中显示的输入提示。例如：

<input type="text" placeholder＝"default text" />

(4)autofocus属性

给文本框、选择框或按钮等加上该属性，当页面打开时，该控件将自动获得焦点，从而替代使用JavaScript代码。例如：

<input type="text" autofocus />

(5)autocomplete属性

用于辅助输入的自动完成功能。

autocomplete属性，可以指定其值为"on" “off"与” "三类值。

不指定时，使用浏览器的默认值。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
text" autofocus />`

(5)autocomplete属性

用于辅助输入的自动完成功能。

autocomplete属性，可以指定其值为"on" “off"与” "三类值。

不指定时，使用浏览器的默认值。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-0MLc4arg-1714867624342)]

[外链图片转存中…(img-tiU7FAGX-1714867624342)]

[外链图片转存中…(img-TlPNApEg-1714867624342)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！