《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块7 网页表单设计PPT.pptx

模块五网页表单设计

目录任务一任务二任务三注册页面的设计读者留言板的设计

引入知识点任务1注册页面的设计7.1了解表单7.2输入元素input

任务1注册页面的设计7.1了解表单一个表单由三部分组成：（1）表单标记：包括处理表单数据所用的CGI程序（通用网关接口）的URL和数据提交到服务器的方法。（2）表单域：包括文本框、密码框、复选框、单选框、下拉选择框、文件上传框、多行文本框和隐藏域等。（3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用来控制其他定义了处理脚本的处理工作。

任务1注册页面的设计7.1了解表单1、表单的作用表单在网页中的主要作用是采集用户数据，它提供一个页面，一个入口。表单处理信息的一般过程为：用户在表单中完成信息的填写后，单击表单中的提交按钮时，用户所输入的信息就会提交到服务器，服务器中的应用程序会对这些信息进行处理和响应，完成用户和服务器之间的交互。

任务1注册页面的设计7.1了解表单2、表单元素form表单是网页上一个特定的区域，这个区域是由form标记定义的，它是一对双标记，form标记代表表单区域的开始，/form标记代表表单区域的结束，在form和/form标记之间的所有内容都属于表单内容。form标记的基本语法格式如下：formname=表单名称action=表单提交地址method=数据传输方式…/form

任务1注册页面的设计7.1了解表单表单常用属性

任务1注册页面的设计7.2输入元素input基本语法格式inputtype=输入控件类型name=控件名字

任务1注册页面的设计7.2输入元素input根据type属性值的不同可以得到不同的控件类型type常用的属性值

任务1注册页面的设计7.2输入元素input1、文本框text基本语法格式：inputtype=textname=field_namevalue=field_valuesize=size_valuemaxlength=max_value文本框属性

任务1注册页面的设计7.2输入元素input2、密码框password基本语法格式：inputtype=passwordname=field_namevalue=field_valuesize=size_valuemaxlength=max_value密码框属性

任务1注册页面的设计7.2输入元素input单选按钮属性3、单选按钮radio基本语法格式：inputtype=radioname=field_namevalue=valuechecked

任务1注册页面的设计7.2输入元素input复选框属性4、复选框checkbox基本语法格式：inputtype=checkboxname=field_namevalue=valuechecked

任务1注册页面的设计7.2输入元素input普通按钮属性5、普通按钮button基本语法格式：inputtype=buttonname=field_namevalue=button_text

任务1注册页面的设计7.2输入元素input提交按钮属性6、提交按钮submit基本语法格式：inputtype=submitname=field_namevalue=submit_text

任务1注册页面的设计7.2输入元素input重置按钮属性7、重置按钮reset基本语法格式：inputtype=resetname=field_namevalue=reset_text

任务1注册页面的设计7.2输入元素input图片按钮属性8、图片按钮image基本语法格式：inputtype=imagename=field_namesrc=image_url

任务1注册页面的设计7.2输入元素input文本域属性9、文本域file基本语法格式：inputtype=filename=field_name

任务1注册页面的设计7.2输入元素input隐藏域属性10、隐藏域hidden基本语法格式：inputtype=hiddenname=field_name

任务1注册页面的设计任务实现（1）创建一个HTML5页面，制作注册页面；（3）使用表格对注册页面的结构进行控制；（2）在页面中插入一个form元素；（4）在表格相对应的位置放入表单输入元素。

任务1注册页面的设计注册界面

引入知识点任务2读者留言板的设计7.3下拉选择框元素select7.4多行文本域