目录

Form表单

 表单元素

学习效果反馈

 表单元素一

 文本框

 密码框

 单选按钮

学习效果反馈 

 表单元素二

 复选框

 文件

 提交按钮

 重置按钮

学习效果反馈 

 表单元素三

 下拉列表

 多行文本框

 label

 学习效果反馈

 HTML5新增type类型一

 url

 search

 tel

color

学习效果反馈

 HTML5新增type类型二

 number

 range

 date

 month

 week

 HTML5新增属性

 autofocus 属性

 placeholder 属性

 required 属性

学习效果反馈 

 表单实操一

表单实操二

Form表单

 

 表单在 Web 网页中用来给用户填写信息&＃xff0c;从而能采用户信息&＃xff0c;使网 页具有交互的功能。

 所有的用户输入内容的地方都用表单来写&＃xff0c;如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的 输入框,提交按钮等&＃xff0c;这些输入框,按钮叫做控件,表单就是容器,它能 够容纳各种各样的控件

 表单元素

学习效果反馈

1.以下哪个元素不是表单元素&＃xff1a;图片

 表单元素一

 文本框

文本域通过 标签来设定&＃xff0c;当用户要在表单中键入字
母、数字等内容时&＃xff0c;就会用到文本域


First name:


Last name:


 密码框

密码字段通过标签 来定义


Password:


 单选按钮

标签定义了表单单选框选项


Male


Female


学习效果反馈 

1.设置输入框为密码框&＃xff0c;type属性应该填写内容&＃xff1a;password

 表单元素二

 复选框

定义了复选框. 用户需要从若干给定的选择中选取
一个或若干选项


I have a bike


I have a car


 文件

定义文件选择字段和 "浏览..." 按钮&＃xff0c;供文件上传

 提交按钮

当用户单击确认按钮时&＃xff0c;表单的内容会被传送到另一个文件。表单 的动作属性定义了目的文件的文件名。由动作属性定义的这个文件 通常会对接收到的输入数据进行相关的处理


Username:



 重置按钮

定义重置按钮&＃xff08;重置所有表单值为默认值&＃xff09;


Username:



 按钮

 没有任何功能的按钮



点我


 图像图片按钮

定义图像作为提交按钮

学习效果反馈 

1.设置输入框为文件选择&＃xff0c;type属性应该填写内容&＃xff1a;file

 表单元素三

 下拉列表



Volvo
Saab
Mercedes
Audi



标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使 标签能够很简单的将相关选项组合在一起。





Volvo
Saab


Mercedes
Audi




 多行文本框

标签定义一个多行的文本输入控件。文本区域中可容纳无限<br>数量的文本。<br>可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小&＃xff0c;不过更好的<br>办法是使用 CSS 的 height 和 width 属性</code></pre> <p><code class="hljs"><br> <textarea rows&＃61;"10" cols&＃61;"30">我是一个文本框


 label

标签为 input 元素定义标注&＃xff08;标记&＃xff09;。
label 元素不会向用户呈现任何特殊效果。不过&＃xff0c;它为鼠标用户改进
了可用性。如果您在 label 元素内点击文本&＃xff0c;就会触发此控件。就是
说&＃xff0c;当用户选择该标签时&＃xff0c;浏览器就会自动将焦点转到和标签相关
的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同

 学习效果反馈

1.下列实现一个下拉列表&＃xff0c;划横线处应该填写内容是&＃xff1a;


___
Volvo
Saab
value&＃61;"mercedes">Mercedes
Audi
___


答案:




 HTML5新增type类型一

 email

定义用于 e-mail 地址的字段&＃xff08;当提交表单时会自动对 email 字段的 值进行验证&＃xff09;


E-mail:



 url

定义用于输入 URL 的字段

 search

定义搜索字段&＃xff08;比如站内搜索或谷歌搜索等&＃xff09;


Search Google:



 tel

定义用于输入电话号码的字段


电话号码:



color

从拾色器中选取颜色


选择你喜欢的颜色:




学习效果反馈

 1.下列哪个属性是定义用于 e-mail 地址的字段&＃xff1a; type&＃61;"email"

 HTML5新增type类型二

 number

定义用于输入数字的字段&＃xff08;您可以设置可接受数字的限制&＃xff09;


数量 ( 1 到 5 之间):




 range

定义用于精确值不重要的输入数字的控件&＃xff08;比如 slider 控件&＃xff09;。您也可以设置可接受数字的限制

 date

定义 date 控件


生日:



 month

定义 month 和 year 控件&＃xff08;不带时区&＃xff09;


生日 ( 月和年 ):



 week

定义 week 和 year 控件&＃xff08;不带时区&＃xff09;


选择周:




 1.下来哪个属性是定义用于日期的字段&＃xff1a;type&＃61;"date"

 HTML5新增属性

 autofocus 属性

autofocus 属性规定在页面加载时&＃xff0c;域自动地获得焦点。


User name:




 placeholder 属性

placeholder 属性提供一种提示&＃xff08;hint&＃xff09;&＃xff0c;描述输入域所期待的值

 required 属性

required 属性规定必须在提交之前填写输入域&＃xff08;不能为空&＃xff09;


Name:



学习效果反馈 

1.关于 placeholder 下列表述正确的是&＃xff1a;提供一种提示&＃xff08;hint&＃xff09;&＃xff0c;描述输入域所期待的值

 表单实操一

 

align&＃61;"center" width&＃61;"500" height&＃61;"300">





























教员搜索
搜索类型	搜索教员信息 Java Web Python	教员身份	不限 高级讲师 中级讲师 初级讲师
所在地区	不限 北京 上海 西安 太原	性别	男 女
学习科目	请在以下列表中选择 Java Web Python
学习
专业

表单实操二

 



















































姓名&＃xff1a;
密码&＃xff1a;
确认密码&＃xff1a;
密码提示问题&＃xff1a;	请选择一个问题 我的名字 我的性别 我的年龄
密码提示答案&＃xff1a;
性别&＃xff1a;	男 女
年龄&＃xff1a;
籍贯&＃xff1a;	请选择 内蒙古 陕西 山西 省/直辖市 请选择 太原 临汾 大同 市
爱好&＃xff1a;	上网 看电影 学习
个人介绍&＃xff1a;
上传头像&＃xff1a;