首页理论教育基于HTML与CSS网页设计-第3章表单与表单元素

基于HTML与CSS网页设计-第3章表单与表单元素

2023-10-19 理论教育版权反馈

【摘要】：视频教学资源学校目标理解表单的作用理解表单与表单元素的关系掌握表单标签及其属性掌握各种表单元素标签及其属性认识表单提交本章单词请在预习前完成下列单词的学习，将其写在横线上。图3.1表单示例_百度首页博客园的登录表单，如图3.2 所示。图3.3表单示例_华声论坛注册由上面的例子可以看到，浏览者可以填写表单中的文本框、密码框等表单元素，并确认向服务器发送这批数据，由此实现浏览器与服务器之间的数据交互。

pagenumber_ebook=67,pagenumber_book=56

视频教学资源

学校目标

理解表单的作用

理解表单与表单元素的关系

掌握表单标签及其属性

掌握各种表单元素标签及其属性

认识表单提交

本章单词

请在预习前完成下列单词的学习，将其写在横线上。

① form（[fɔ：m] 表，表单）____________________________________________

② input（['ɪnpʊt] 输入）____________________________________________

③ text（[tekst] 文本）______________________________________________

④ password（['pɑ：swɜ：d] 密码）______________________________________

⑤ radio（['reɪdɪəʊ] 无线电，收音机，单选按钮）_________________________

⑥ checkbox（[ˈtʃekbɒks] 检验盒，复选框）______________________________

⑦ file（[faɪl] 文件）_______________________________________________

⑧ hidden（['hɪdn] 隐藏）_____________________________________________

⑨ submit（[səb'mɪt] 呈送，提交）______________________________________

⑩ reset（[ˌri：'set] 清零，重置）______________________________________

⑪ button（['bʌtn] 纽扣，电钮，按钮）__________________________________

⑫ textarea（[tekst 'eərɪə]文本区域，文本框）___________________________

预习任务

1.以下（　）全部都能由<input />标签创建。（选择一项）

A.文本框列表框复选框密码框

B.复选框多行文本框提交按钮

C.自定义命令按钮文件域隐藏域

D.密码框提交按钮图片按钮列表框

2.以下（　）全部都可作为<input />标签type 属性的值。（选择一项）

A.text password radio checkbox

B.file hidden image select

C.submit reset button option

D.textarea label fieldset

3.以下（　）全部都是<input />标签的属性。（选择一项）

A.id name value selected

B.size maxlength src text(www.chuimin.cn)

C.checked disabled cols rows

D.type alt readonly enctype

4.<button></button>标签未设置type 属性时，在IE 和Firefox 浏览器中，这个属性的默认值分别是（　）。（选择一项）

A.input button

B.reset submit

C.button submit

D.submit button

5.要将包含密码数据的登录表单提交到WEB 服务器中处理，应为<form></form>的（　）属性的值设置表单处理程序的地址，并应将表单的（　）属性的值设置为（　）。（选择一项）

A.post action method

B.action method get

C.method post action

D.action method post

6.在网页中显示一个文本框，如下图所示。（参考本章例3.2）

pagenumber_ebook=69,pagenumber_book=58

文本框

7.在网页中显示一个提交按钮和重置按钮，如下图所示。（参考本章例3.3）

pagenumber_ebook=69,pagenumber_book=58

提交和重置按钮

8.在网页中显示一个下拉列表框，如下图所示。（参考本章例3.7）

pagenumber_ebook=69,pagenumber_book=58

下拉列表框

9.在网页中显示电子产品调查表信息，使用表单元素进行合理地排版，如下图所示。（参考本章例3.11）

pagenumber_ebook=69,pagenumber_book=58

电子产品调查表

在WEB 网页中，浏览者经常需要与WEB 服务器进行数据交互。当浏览者需要填写数据并将这些数据发送到服务器端时，需要在页面中创建表单。

百度首页的搜索表单，如图3.1 所示。

pagenumber_ebook=70,pagenumber_book=59

图3.1　表单示例_百度首页

博客园的登录表单，如图3.2 所示。

pagenumber_ebook=70,pagenumber_book=59

图3.2　表单示例_博客园登录页

华声论坛的注册表单，如图3.3 所示。

pagenumber_ebook=71,pagenumber_book=60

图3.3　表单示例_华声论坛注册

由上面的例子可以看到，浏览者可以填写表单中的文本框、密码框等表单元素，并确认向服务器发送这批数据，由此实现浏览器与服务器之间的数据交互。