第7章表单的应用.pptx

让IT教学更简单，让IT学习更有效第七章表单的应用表单的构成表单样式的控制表单相关元素

7.2表单属性7.1认识表单7.3Input元素及属性?目录7.4其他表单元素7.5CSS控制表单样式7.6制作信息登记表

7.1认识表单1表单的构成2创建表单

7.1知识点讲解在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成，如下图所示，即为一个简单的HTML表单界面及其构成。1、表单的构成

7.1知识点讲解对于表单构成中的表单控件、提示信息和表单域，初学者可能比较难理解，对它们的具体解释如下：表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。1、表单的构成

7.1知识点讲解通过认识表单，我们知道要想让表单中的数据传送给后台服务器，就必须定义表单域。在HTML中，form/form标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form/form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：2、创建表单formaction=url地址method=提交方式name=表单名称 各种表单控件/form

7.2表单属性1表单属性

7.2知识点讲解action属性在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。例如：表示当提交表单时，表单数据会传送到名为?form_action.asp的页面去处理。action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。例如：表示当提交表单时，表单数据会以电子邮件的形式传递出去。1、表单属性formaction=form_action.aspformaction=mailto:htmlcss@163.com

7.2知识点讲解method属性method属性用于设置表单数据的提交方式，其取值为get或post。在HTML5中，可以通过form标记的method属性指明表单服务器处理数据的方法，示例代码如下：在上面的代码中，get为method属性的默认值，采用get方法，提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，所以使用method=post可以大量的提交数据。1、表单属性formaction=form_action.aspmethod=get

7.2知识点讲解name属性name属性用于指定表单的名称，以区分同一个页面中的多个表单。1、表单属性

7.2知识点讲解autocomplete属性autocomplete属性用于指定表单是否有自动完成功能，所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值，对它们的解释如下：on：表单有自动完成功能off：表单无自动完成功能1、表单属性

7.2知识点讲解novalidate属性novalidate属性指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。1、表单属性注意：form标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在form与/form之间添加相应的表单控件。

7.3Input元素及属性1Input元素的type属性2Input元素的其他属性

7.3知识点讲解浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：1、Input元素的type属性inputtype=控件类型/

7.3知识点讲解为了使初学者更好地理解不同的input控件类型，下面对它们做一个简单的介绍。（1）单行文本输入框inputtype=text/单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。（2）密码输入框inputtype=password/密码输入框用来输入密码，其内容将以圆点的形式显示。（3）单选按钮inputtype=radio/单选按钮用于单项选择，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”