网页设计与制作HTML5+CSS3

任务5制作“在线留言”子页面

第2章网页的基本结构实现知识目标技能目标素质目标（1）理解表单的工作原理。（2）掌握表单相关标签及属性。（3）掌握表单及表单元素的应用方法。（1）能够制作出符合网站需求的各种表单页面。（2）能够创建具有相应功能的表单元素。（3）能够灵活运用常用的表单元素。（1）培养自主学习和解决问题的能力。（2）培养精益求精的工匠精神。（3）培养严谨的编程习惯。

表单及其相关元素任务实现第2章网页的基本结构实现

1.表单及其相关元素1.1表单的基本概念1.2常用的表单元素1.3表单按钮1.4表单元素的属性1.5表单元素的分组第2章网页的基本结构实现

1.1表单的基本概念1.表单及其相关元素表单：用于收集用户的信息和意见，是网站管理者与浏览者之间沟通的桥梁。表单的创建：（1）确定表单的目的和内容。需要搜集用户的哪些数据。（2）建立表单。选择合适的表单元素控件。（3）设计表单处理程序。即接受表单所收到的数据并进一步处理数据，通常由ASP.NET、JSP、PHP等技术实现）。

1.1表单的基本概念1.表单及其相关元素表单基本组成：表单标签、表单元素、表单按钮

1.1表单的基本概念1.表单及其相关元素表单标签：form表单是一个包含表单元素的容器，可以使用form标签在网页中创建表单。格式：formaction=urlmethod=get|postname=value…/formaction属性：提交的地址；method属性：提交的方式；name属性：用于指定表单的名称，以区分同一个页面的多个表单；

1.1表单的基本概念1.表单及其相关元素formaction=http://localhost/action.phpmethod=post!--表单域--账号： !--提示信息--inputtype=textname=zhanghao/ !--表单控件--密码： !--提示信息--inputtype=passwordname=pwd/ !--表单控件--inputtype=submitvalue=提交/ !--表单控件--/form

1.2常用表单元素1.表单及其相关元素表单元素：即表单域，也叫表单控件。包括常用的输入框、文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉菜单、文件上传框和按钮等。“input”输入框：是最重要的表单元素。input有很多种形态，通过type属性区分。（1）单行文本输入框：允许用户输入一些简短的单行信息，如用户姓名。格式：inputtype=textname=namemaxlength=valuesize=valuevalue=text/（2）密码输入框：用于保密信息的输入，如密码。用户输入的时候显示的是“*”号。格式：inputtype=passwordname=namemaxlength=valuesize=value/（3）单选按钮：用于单项选择，例如问卷调查中的单选，或者选择性别等。格式：inputtype=radioname=field_namevalue=valuechecked

1.2常用表单元素1.表单及其相关元素（4）复选框：允许用户在一组选项中选择多个。例如问卷调查中的多选，或者选择兴趣爱好等。格式：inputtype=checkboxname=namevalue=value（5）隐藏域：对于用户是不可见的，主要用于后台编程时使用。格式：inputtype=hiddenname=namevalue=value/（6）文件域：选择文件，并上传文件的表单元素。格式：inputtype=filename=name/（7）email类型：email类型的input元素是一种专门用于输入电子邮件地址的文本输入框，可以用来验证email输入框的内容是否符合email邮件地址格式。格式：inputtype＝email/（8）url类型：url类型的input元素是一种用于输入URL地址的文本框，如果所输入的内容是URL地址格式的文本，则会提交数据到服务器。格式：inputtype＝url/

1.2常用表单元素1.表单及其相关元素（9）tel类型：tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式，因此，tel类型通常会和pattern属性配合使用。pattern属性的值是通过其检查输入值的正则表达式。格式：inputtype＝telpattern=正则表达式/