HTML+CSS+JavaScript网页设计-第4章-HTML表单.ppt

1、HTML+CSS+JavaScript网页设计第4章HTML表单第1页第第4章章HTML 表单表单本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第4章HTML表单第2页本章概述本章概述l表单是实现用户与网页之间数据交互的必表单是实现用户与网页之间数据交互的必要标签，通过在网页中添加表单可以实现要标签，通过在网页中添加表单可以实现诸如会员注册、用户登录、提交资料等交诸如会员注册、用户登录、提交资料等交互功能。本章将主要讲解如何在网页中制互功能。本章将主要讲解如何在网页中制作表单，并使用表单元素创建表单。作表单，并使用表单元素创建表单。HTML+CSS+JavaSc

2、ript网页设计第4章HTML表单第3页本章的学习目标本章的学习目标l了解表单的基本组成部分了解表单的基本组成部分l掌握掌握元素的常用属性及其用法元素的常用属性及其用法l掌握掌握HTML 中的常用表单输入类型中的常用表单输入类型l了解了解元素的常用属性及其用法元素的常用属性及其用法l掌握下列列表的创建与使用掌握下列列表的创建与使用l掌握多行文本控件的用法掌握多行文本控件的用法l了解了解元素的基本用法元素的基本用法l掌握掌握和和元素的用法元素的用法HTML+CSS+JavaScript网页设计第4章HTML表单第4页主要内容主要内容4.1 表单概述表单概述4.2 创建表单创建表单4.3 组织表单

3、结构组织表单结构4.4 disabled与与readonly控件控件4.5 本章小结本章小结4.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第4章HTML表单第5页4.1 表单概述表单概述l表单是可以把浏览者输入的数据传送到服务器端表单是可以把浏览者输入的数据传送到服务器端的的HTML标签元素，服务器端程序可以处理表单标签元素，服务器端程序可以处理表单传过来的数据，从而完成与用户的各种交互动作传过来的数据，从而完成与用户的各种交互动作l网页上具有可输入表项及项目选择等控件所组成网页上具有可输入表项及项目选择等控件所组成的栏目称为表单，其中包括各种对象，如文字输的栏目称

4、为表单，其中包括各种对象，如文字输入框、单选按钮、复选框和提交按钮等。通俗地入框、单选按钮、复选框和提交按钮等。通俗地讲，表单就是一个将用户信息组织起来的容器。讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用将需要用户填写的内容放置在表单容器中，当用户单击户单击“提交提交”按钮时，表单会将数据统一发送按钮时，表单会将数据统一发送给服务器给服务器HTML+CSS+JavaScript网页设计第4章HTML表单第6页表单概述表单概述l几乎每当需要从网站访问者那里收集信息时，都几乎每当需要从网站访问者那里收集信息时，都需要使用需要使用“表单表单”。典型的表单应用场

5、景有：。典型的表单应用场景有：登录、注册：登录时输入用户名和密码，单击登录、注册：登录时输入用户名和密码，单击“登录登录”按钮；注册时填写个人信息，提交到服务器。按钮；注册时填写个人信息，提交到服务器。网上订单：在网上购买商品时，提交订单，输入个人网上订单：在网上购买商品时，提交订单，输入个人信息和付款方式等。信息和付款方式等。调查问卷：通常是一些选择题形式的问卷，回答这些调查问卷：通常是一些选择题形式的问卷，回答这些问题，以便形成统计数据，进一步分析。问题，以便形成统计数据，进一步分析。网上搜索：输入关键字，搜索想要的信息或资源。网上搜索：输入关键字，搜索想要的信息或资源。HTML+CSS+

6、JavaScript网页设计第4章HTML表单第7页表单概述表单概述l将表单数据发送给服务器时，会将其转换将表单数据发送给服务器时，会将其转换成成“名称名称/值值”对的形式。名称对应于表单对的形式。名称对应于表单控件的名称，而值则是用户输入的内容或控件的名称，而值则是用户输入的内容或一个被选定选项的值。服务器接收到数据一个被选定选项的值。服务器接收到数据后，会处理数据并返回相应的结果。后，会处理数据并返回相应的结果。HTML+CSS+JavaScript网页设计第4章HTML表单第8页主要内容主要内容4.1 表单概述表单概述4.2 创建表单创建表单4.3 组织表单结构组织表单结构4.4 dis

7、abled与与readonly控件控件4.5 本章小结本章小结4.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第4章HTML表单第9页4.2 创建表单创建表单lHTML中用于创建表单的标签是中用于创建表单的标签是，然后在，然后在元素中，可以放置各种类型的表单控件。元素中，可以放置各种类型的表单控件。l在网页中，在网页中，和和这对标签用来创建这对标签用来创建一个表单，在标签对之间的一切都属于表单的内一个表单，在标签对之间的一切都属于表单的内容。容。l元素通常是一些用来采集用户输入信息的元素通常是一些用来采集用户输入信息的表单控件，也还可以包含其他标记，如段落、标表单控件

8、，也还可以包含其他标记，如段落、标题等。但是，它不能包含另外一个题等。但是，它不能包含另外一个元素，元素，即即不能嵌套。不能嵌套。HTML+CSS+JavaScript网页设计第4章HTML表单第10页l在在标记中，可以设置表单的基本属标记中，可以设置表单的基本属性，一般情况下，一个性，一般情况下，一个标签应该至标签应该至少带有少带有action和和method两个属性。除此之两个属性。除此之外，还可以包含所有通用通性及以下属性外，还可以包含所有通用通性及以下属性：enctype、novalidate、target、autocomplete和和accept-charset。HTML+CSS+J

9、avaScript网页设计第4章HTML表单第11页action属性属性laction属性指明表单提交后对数据的处理。通常属性指明表单提交后对数据的处理。通常，action属性的值是一个地址，也就是表单收集属性的值是一个地址，也就是表单收集到的信息将要传递到这个地址，这个地址可以是到的信息将要传递到这个地址，这个地址可以是绝对地址，也可以是相对地址，还可以是其它形绝对地址，也可以是相对地址，还可以是其它形式的处理程序。式的处理程序。l例如，一个登录表单，用户输入的登录名和密码例如，一个登录表单，用户输入的登录名和密码信息可能被传送到信息可能被传送到Web服务器中一个以服务器中一个以ASP.NE

10、T编写的页面，叫做编写的页面，叫做login.aspx，如果该页面与当，如果该页面与当前页面在同一目录，则可以使用相当地址：前页面在同一目录，则可以使用相当地址：HTML+CSS+JavaScript网页设计第4章HTML表单第12页method属性属性l浏览器向服务器发送表单数据能够使用的有两种浏览器向服务器发送表单数据能够使用的有两种方法：方法：HTTP get和和HTTP post。使用。使用标标签的签的method属性指定应该使用哪一种方法。该属性指定应该使用哪一种方法。该属性有两个取值，分别对应两种方法：属性有两个取值，分别对应两种方法：get：使用：使用HTTP get方法向服务器

11、发送表单数据，表方法向服务器发送表单数据，表单数据被附加在单数据被附加在元素中由元素中由action属性指定的属性指定的URL尾部。表单数据与尾部。表单数据与URL之间使用问号分隔。在问之间使用问号分隔。在问号之后是各表单控件的号之后是各表单控件的“名称名称/值值”对。每个对。每个“名称名称/值值”对之间使用与符号对之间使用与符号&分隔。分隔。post：使用：使用HTTP post方法向服务器发送来自表单的方法向服务器发送来自表单的数据，表单数据将在数据，表单数据将在HTTP头部中透明地传送。头部中透明地传送。HTML+CSS+JavaScript网页设计第4章HTML表单第13页Id和和na

12、me属性属性lid属性可以唯一标识页面中的属性可以唯一标识页面中的元素。就如元素。就如同可以使用它唯一标识页面中的任何其它同可以使用它唯一标识页面中的任何其它HTML元素一样。元素一样。id属性的值在文档中应该是唯一的。属性的值在文档中应该是唯一的。lname属性是属性是id属性的前任，而且如属性的前任，而且如id属性一样，属性一样，其取值在文档内应该保持唯一。其取值在文档内应该保持唯一。l一种好的命名习惯是以字符一种好的命名习惯是以字符frm作为表单的作为表单的id和和name属性值的起始，并使用值的剩余部分描述属性值的起始，并使用值的剩余部分描述表单收集数据的类型表单收集数据的类型例如，例

13、如，frmLogin或或frmSearch。HTML+CSS+JavaScript网页设计第4章HTML表单第14页enctype属性属性l如果使用如果使用HTTP post方法向服务器发送数据，则可以使用方法向服务器发送数据，则可以使用enctype属性指定浏览器在将数据发送到服务器之前对其属性指定浏览器在将数据发送到服务器之前对其进行编码。浏览器通常支持如下进行编码。浏览器通常支持如下3种类型的编码方式：种类型的编码方式：application/x-www-form-urlencoded：这是大多数表单使用：这是大多数表单使用的标准方法。浏览器使用该方法是因为一些字符，如空格、加号的标准方

14、法。浏览器使用该方法是因为一些字符，如空格、加号以及一些非字母数字字符，不能直接发送到以及一些非字母数字字符，不能直接发送到Web服务器。所以这服务器。所以这些字符会被其他用以替换它们的字符所替代。些字符会被其他用以替换它们的字符所替代。multipart/form-data：允许数据分成部分传送，每一个连续部：允许数据分成部分传送，每一个连续部分以其在表单中出现的顺序对应于一个表单控件。通常被用于访分以其在表单中出现的顺序对应于一个表单控件。通常被用于访问者需要向服务器上传文件问者需要向服务器上传文件(如照片如照片)时。时。text/plain：以纯文本形式不加修改地将数据发送至服务器。：以

15、纯文本形式不加修改地将数据发送至服务器。HTML+CSS+JavaScript网页设计第4章HTML表单第15页accept-charset属性属性l不同语言通过不同的不同语言通过不同的“字符集字符集”(character set)或字符组书写。然而，在创建网站时，开发人员或字符组书写。然而，在创建网站时，开发人员不会将网站设计成能够理解所有语言。不会将网站设计成能够理解所有语言。accept-charset属性背后的思想是，使用该属性可以指定属性背后的思想是，使用该属性可以指定一系列用户能够输入，并且之后服务器可以处理一系列用户能够输入，并且之后服务器可以处理的字符编码。该属性的值应该是一个

16、由空格或逗的字符编码。该属性的值应该是一个由空格或逗号分隔的字符集列表。号分隔的字符集列表。l例如，下面的代码指明服务器可以接受例如，下面的代码指明服务器可以接受UTF-8编编码：码：accept-charset=utf-8HTML+CSS+JavaScript网页设计第4章HTML表单第16页novalidate属性属性lnovalidate属性是属性是HTML 5新增的一个布尔新增的一个布尔属性，用以指定表单在提交时是否应该进属性，用以指定表单在提交时是否应该进行校验。如果使用了该属性，则关闭对表行校验。如果使用了该属性，则关闭对表单内所有元素的有效性检查。如果希望只单内所有元素的有效性检

17、查。如果希望只取消表单中较少部分内容的验证，则需要取消表单中较少部分内容的验证，则需要在这些不需要验证表单控件上使用在这些不需要验证表单控件上使用novalidate属性。属性。l目前支持该属性的浏览器有目前支持该属性的浏览器有Chrome 6+、Firefox 4+、Opera 10.6+以及以及IE 10+。HTML+CSS+JavaScript网页设计第4章HTML表单第17页target和和autocomplete属性属性ltarget属性指定一个命名窗口或关键字，用属性指定一个命名窗口或关键字，用于处理表单提交。该属性的取值与上一章于处理表单提交。该属性的取值与上一章中介绍的中介绍的

18、标签的标签的target属性一样。属性一样。lautocomplete属性也是属性也是HTML 5中新增的中新增的属性，用来指明浏览器是否应该自动填写属性，用来指明浏览器是否应该自动填写表单值。默认值为表单值。默认值为on，如果将之设置为，如果将之设置为off，则指明浏览器不应该自动填写任何内容，则指明浏览器不应该自动填写任何内容。HTML+CSS+JavaScript网页设计第4章HTML表单第18页元素元素l在表单中，用户输入数据使用的文本框、在表单中，用户输入数据使用的文本框、复选框、单选按钮等都是通过复选框、单选按钮等都是通过元素元素创建的，创建的，元素必须在元素必须在元素元素中使用，

19、用来创建表单中的输入元素，如中使用，用来创建表单中的输入元素，如果果元素不在元素不在元素内，则该元素内，则该输入元素不会被输入元素不会被元素收集并传送给元素收集并传送给服务器，只具有页面显示功能。服务器，只具有页面显示功能。标标签的签的type属性用来指定该输入控件的类型属性用来指定该输入控件的类型，type属性的值有很多属性的值有很多HTML+CSS+JavaScript网页设计第4章HTML表单第19页文本框和密码框文本框和密码框l文本框和密码框是用的最多的表单控件，这两个控件非常文本框和密码框是用的最多的表单控件，这两个控件非常类似，所不同的是密码框在输入内容时，输入的信息不可类似，所不

20、同的是密码框在输入内容时，输入的信息不可见，通常使用星号见，通常使用星号(*)或圆点替代用户输入的每个字符。或圆点替代用户输入的每个字符。l当当type属性值为属性值为text或或password时，通常还会用到时，通常还会用到元素的如下几个属性进一步设置文本框或密码框元素的如下几个属性进一步设置文本框或密码框的大小：的大小：name：该属性也是一个必要属性，几乎所有的：该属性也是一个必要属性，几乎所有的元素都要设置该元素都要设置该属性，该属性值就是向服务器发送的属性，该属性值就是向服务器发送的“名称名称/值值”对中的对中的“名称名称”部分。部分。value：该属性用来为文本框提供初始值，用户

21、会在表单加载后看到该值：该属性用来为文本框提供初始值，用户会在表单加载后看到该值 size：设置文本框的宽度，以字符为单位。需要注意的是，：设置文本框的宽度，以字符为单位。需要注意的是，size属性不影属性不影响用户可以输入的字符数量，例如，响用户可以输入的字符数量，例如，size属性的值为属性的值为20，用户依然可以，用户依然可以输入输入40个字符。如果用户输入了多于个字符。如果用户输入了多于size个字符，可以使用方向键向左个字符，可以使用方向键向左及向右滚动查看输入的内容。及向右滚动查看输入的内容。HTML+CSS+JavaScript网页设计第4章HTML表单第20页文本框和密码框文本

22、框和密码框 maxlength：该属性用来指定用户在文本框内可以输入的最大字符数。：该属性用来指定用户在文本框内可以输入的最大字符数。在输入达到最大字符数之后，即使用户继续输入，也不会再有新字符添在输入达到最大字符数之后，即使用户继续输入，也不会再有新字符添加进去。加进去。placeholder：这是：这是HTML 5新增的一个属性，用来位文本框设置输入提新增的一个属性，用来位文本框设置输入提示信息，当文本框处于未输入状态且未获取光标焦点时，模糊显示输入示信息，当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。提示文字。required：这也是：这也是HTML5中新增的属性，该属

23、性是布尔属性，可以应用中新增的属性，该属性是布尔属性，可以应用到大多数输入元素上。在提交时，如果元素中内容为空白，则不允许提到大多数输入元素上。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示提示信息，提示用户必须输入内容。交，同时在浏览器中显示提示信息，提示用户必须输入内容。autocomplete：这也是：这也是HTML 5中新增的属性，该属性可以取两个不同中新增的属性，该属性可以取两个不同的值：的值：on及及off。on表示表单值可以安全地保存及预填写。表示表单值可以安全地保存及预填写。off则表示不则表示不应该保存表单的值。应该保存表单的值。HTML+CSS+JavaS

24、cript网页设计第4章HTML表单第21页autocomplete属性属性l使用使用autocomplete属性，就可以在安全性属性，就可以在安全性方面实现很好的控制。该属性可以允许网方面实现很好的控制。该属性可以允许网页作者控制是否缓存表单条目。将页作者控制是否缓存表单条目。将autocomplete属性设置为属性设置为off，则表示不应，则表示不应该保存表单的值。该保存表单的值。HTML+CSS+JavaScript网页设计第4章HTML表单第22页datalist元素元素ldatalist元素也是元素也是HTML 5新增的表单元素新增的表单元素，用于为输入框提供一个可选的列表，用，用于

25、为输入框提供一个可选的列表，用户可以直接选择列表中的某个预设的项，户可以直接选择列表中的某个预设的项，从而免去输入的麻烦。这个可选的列表由从而免去输入的麻烦。这个可选的列表由datalist元素中的元素中的option元素创建。如果用元素创建。如果用户不希望从列表中选择某项，也可以自行户不希望从列表中选择某项，也可以自行输入其他内容。输入其他内容。l为了把为了把datalist元素提供的列表绑定到某个元素提供的列表绑定到某个输入框，则需要使用输入框的输入框，则需要使用输入框的list属性来引属性来引用用datalist元素的元素的id。HTML+CSS+JavaScript网页设计第4章HTM

26、L表单第23页复选框和单选按钮复选框和单选按钮l当当标签的标签的type属性为属性为checkbox时时，创建的是复选框控件；，创建的是复选框控件；type属性为属性为radio时，创建的是单选按钮控件。时，创建的是单选按钮控件。l这两个控件都有开和关两种状态，用户可这两个控件都有开和关两种状态，用户可以通过单击控件使其在开与关两种状态之以通过单击控件使其在开与关两种状态之间切换。复选框控件通常用在允许用户从间切换。复选框控件通常用在允许用户从候选项目中选择多个条目的场景，而单向候选项目中选择多个条目的场景，而单向按钮则适用于从多个选项中只选择一个的按钮则适用于从多个选项中只选择一个的情况。情

27、况。HTML+CSS+JavaScript网页设计第4章HTML表单第24页复选框和单选按钮复选框和单选按钮l当有一组单选按钮共享同一名称时，只有其中之当有一组单选按钮共享同一名称时，只有其中之一可以被选定。当一个单选按钮被选定后，如果一可以被选定。当一个单选按钮被选定后，如果用户又单击了另一个，则新的选项被选定，而旧用户又单击了另一个，则新的选项被选定，而旧选项便失去选定。选项便失去选定。l不应将单选按钮作为指定开或关的单一表单控件不应将单选按钮作为指定开或关的单一表单控件使用，因为当单一单选按钮被选定后，就无法通使用，因为当单一单选按钮被选定后，就无法通过界面操作再次失去选定。而复选框可以

28、单独出过界面操作再次失去选定。而复选框可以单独出现，此时每一个复选框都有自己的名称。现，此时每一个复选框都有自己的名称。l复选框也可以共享同一名称，作为复选框组出现复选框也可以共享同一名称，作为复选框组出现，在同一组中可以有多个复选框同时被选中。，在同一组中可以有多个复选框同时被选中。HTML+CSS+JavaScript网页设计第4章HTML表单第25页按钮按钮l使用使用元素可以创建多种类型的按钮，当元素可以创建多种类型的按钮，当type属性值为属性值为submit、reset、button或或image时都能创建按钮控件。时都能创建按钮控件。submit：创建一个单击时提交表单的按钮。：创

29、建一个单击时提交表单的按钮。reset：创建一个自动重置表单控件，将它们设置为：创建一个自动重置表单控件，将它们设置为页面载入时初始值的按钮。页面载入时初始值的按钮。button：创建一个用于在用户单击时触发客户端脚本：创建一个用于在用户单击时触发客户端脚本的按钮。的按钮。image：创建一个带图片的提交按钮，单击该按钮也：创建一个带图片的提交按钮，单击该按钮也会提交表单数据。通常需要把会提交表单数据。通常需要把src属性和属性和alt属性一起配属性一起配合使用，还可以适用合使用，还可以适用height和和width属性指定图片的高属性指定图片的高度和宽度。度和宽度。HTML+CSS+Java

30、Script网页设计第4章HTML表单隐藏字段隐藏字段l有些时候需要在页面间传递信息而不希望被用户有些时候需要在页面间传递信息而不希望被用户看到。这就用到了隐藏字段，尽管用户无法在页看到。这就用到了隐藏字段，尽管用户无法在页面中看到它们，如果用户查看页面的源文件的话面中看到它们，如果用户查看页面的源文件的话，还是可以从代码中看到它们的值。因此，隐藏，还是可以从代码中看到它们的值。因此，隐藏控件不应被用于任何不希望用户看到的敏感信息控件不应被用于任何不希望用户看到的敏感信息。l隐藏字段的创建和使用比较简单，只需将隐藏字段的创建和使用比较简单，只需将type属属性值设置为性值设置为hidden，然

31、后指定，然后指定name和和value属性属性即可。表单提交时，即可。表单提交时，name和和value属性将与表单属性将与表单其他元素的其他元素的“名称名称/值值”对一同发送至服务器。对一同发送至服务器。第26页HTML+CSS+JavaScript网页设计第4章HTML表单文件上传控件文件上传控件l文件上传控件用于需要用户上传文件到服务器的文件上传控件用于需要用户上传文件到服务器的情况，使用情况，使用元素，设置元素，设置type属性为属性为file，即可创建一个文件上传控件，该控件的页面显示即可创建一个文件上传控件，该控件的页面显示效果中会出现效果中会出现“浏览浏览”按钮或者按钮或者“选择

32、文件选择文件”按按钮，具体由不同的浏览器确定。钮，具体由不同的浏览器确定。l使用文件上传控件时，使用文件上传控件时，元素的元素的method属属性值必须是性值必须是post，另外还需要增加属性，另外还需要增加属性enctype，其值为，其值为“multipart/form-data”，否则无法实，否则无法实现文件上传功能。现文件上传功能。第27页HTML+CSS+JavaScript网页设计第4章HTML表单日期与时间日期与时间l日期检出器日期检出器(Date Pickers)是网页中经常要用到是网页中经常要用到的一种控件，在的一种控件，在HTML5之前的版本中，并没有提之前的版本中，并没有提

33、供任何形式的日期检出器控件。在网页前端设计供任何形式的日期检出器控件。在网页前端设计中，多采用一些中，多采用一些JavaScript框架来实现日期检出框架来实现日期检出器控件的功能，如器控件的功能，如jQuery UI、YUI等，在具体使等，在具体使用时会比较麻烦。用时会比较麻烦。lHTML 5新增了新增了6个可用于选取日期和时间的输入个可用于选取日期和时间的输入类型：类型：date、datetime、datetime-local、month、time和和week，分别用于选择以下日期格，分别用于选择以下日期格式：日期、日期式：日期、日期+时间、日期时间、日期+时间时间+时区、月、时区、月、时

34、间和星期。时间和星期。第28页HTML+CSS+JavaScript网页设计第4章HTML表单日期与时间日期与时间ll第29页HTML+CSS+JavaScript网页设计第4章HTML表单日期与时间日期与时间ll/第30页HTML+CSS+JavaScript网页设计第4章HTML表单日期与时间日期与时间ll第31页HTML+CSS+JavaScript网页设计第4章HTML表单颜色选择框颜色选择框lcolor类型的输入类型的输入元素提供专门用于元素提供专门用于设置颜色的文本框设置颜色的文本框。通过单击文本框。通过单击文本框，可以快速打开颜，可以快速打开颜色面板，方便用户色面板，方便用户可视

35、化地选择一种可视化地选择一种颜色。颜色。第32页HTML+CSS+JavaScript网页设计第4章HTML表单滑块数字滑块数字lrange类型用于设置要包含指定范围内数字类型用于设置要包含指定范围内数字值的输入，其页面显示形式为一个划块，值的输入，其页面显示形式为一个划块，通过鼠标拖动滑块来改变其值的大小。通过鼠标拖动滑块来改变其值的大小。l因为该类型表示的是一个数字，所以可以因为该类型表示的是一个数字，所以可以使用使用min和和max属性来限制值的范围，通过属性来限制值的范围，通过step属性设置步长大小。属性设置步长大小。第33页HTML+CSS+JavaScript网页设计第4章HTM

36、L表单其它特殊文本类型其它特殊文本类型lllllinput type=tel name=telephone/第34页HTML+CSS+JavaScript网页设计第4章HTML表单Input元素的其它属性元素的其它属性l在在HTML 5之前，表单内的元素一定要放在之前，表单内的元素一定要放在表单中，也就是把表单内的元素嵌入表单中，也就是把表单内的元素嵌入和和标签中，而有了标签中，而有了form属属性后，从属于表单的元素可以放在页面的性后，从属于表单的元素可以放在页面的任何地方，只要在该元素内指定任何地方，只要在该元素内指定form属性属性的值为表单的名称即可。的值为表单的名称即可。第35页HT

37、ML+CSS+JavaScript网页设计第4章HTML表单formaction属性属性l在在HTML 5之前，表单内的所有元素只能通之前，表单内的所有元素只能通过表单的过表单的action属性统一提交到另一个页属性统一提交到另一个页面，而在面，而在HTML 5中，可以为诸如中，可以为诸如、等提交按钮增加等提交按钮增加formaction属性，该属性为单击该按钮时属性，该属性为单击该按钮时将表单数据发送到的地址。将表单数据发送到的地址。第36页HTML+CSS+JavaScript网页设计第4章HTML表单formmethod属性属性l与与formaction类似，对于提交按钮，还可类似，对于

38、提交按钮，还可以使用以使用formmethod属性为每个提交按钮指属性为每个提交按钮指定不同的提交方法，而不是只能使用表单定不同的提交方法，而不是只能使用表单的的method属性来统一指定提交方法。属性来统一指定提交方法。l第37页HTML+CSS+JavaScript网页设计第4章HTML表单formenctype属性属性lformenctype属性也是在提交按钮控件上属性也是在提交按钮控件上使用的属性，它的作用与表单的使用的属性，它的作用与表单的enctype属属性一样，用于指定表单发送到服务器之前性一样，用于指定表单发送到服务器之前应该如何对表单内容进行编码。应用在提应该如何对表单内容进

39、行编码。应用在提交按钮上，从而可以指定不同的编码方式交按钮上，从而可以指定不同的编码方式l第38页HTML+CSS+JavaScript网页设计第4章HTML表单formtarget属性属性lformtarget属性也是适用于提交按钮，可属性也是适用于提交按钮，可以对多个提交按钮分别使用以对多个提交按钮分别使用formtarget属属性来指定提交后在何处打开需要加载的页性来指定提交后在何处打开需要加载的页面。其属性值和用法与表单元素的面。其属性值和用法与表单元素的target属属性一样。性一样。l第39页HTML+CSS+JavaScript网页设计第4章HTML表单autofocus属性属性

40、lautofocus属性是一个布尔属性，为属性是一个布尔属性，为元素加上元素加上autofocus属性，当页面属性，当页面打开时，这些控件将自动获得光标焦点。打开时，这些控件将自动获得光标焦点。autofocus属性的使用方法如下：属性的使用方法如下：l一个页面上只能有一个控件具有一个页面上只能有一个控件具有autofocus属性。属性。第40页HTML+CSS+JavaScript网页设计第4章HTML表单下拉列表下拉列表l下拉列表使用户可以从下拉菜单中选择一下拉列表使用户可以从下拉菜单中选择一个选项。下拉列表可以占用比单选按钮组个选项。下拉列表可以占用比单选按钮组小得多的空间。该控件还可以

41、作为使用单小得多的空间。该控件还可以作为使用单行文本框又希望限制用户输入选项时的替行文本框又希望限制用户输入选项时的替代方案。例如，需要用户填写省份的表单代方案。例如，需要用户填写省份的表单中，如果使用文本框，那么来自河北省的中，如果使用文本框，那么来自河北省的访问者可能会输入不同的内容，例如河北访问者可能会输入不同的内容，例如河北或河北省。而使用下拉列表则可以控制用或河北省。而使用下拉列表则可以控制用户只能从列表中选择一个选项。户只能从列表中选择一个选项。第41页HTML+CSS+JavaScript网页设计第4章HTML表单下拉列表下拉列表l下拉列表包含于下拉列表包含于元素内，列表中的每一

42、元素内，列表中的每一个选项是一个个选项是一个元素，位于元素，位于开标开标签与签与闭标签之间的文本会作为选项的标闭标签之间的文本会作为选项的标签显示给用户，提交表单时，所选选项的签显示给用户，提交表单时，所选选项的value属属性值将作为性值将作为元素的值被传送到服务器。元素的值被传送到服务器。l元素有一个元素有一个size属性，使用该属性可以属性，使用该属性可以创建一种滚动的选择框，创建一种滚动的选择框，size属性的值是希望同属性的值是希望同一时间可见的选项数量。一时间可见的选项数量。第42页HTML+CSS+JavaScript网页设计第4章HTML表单下拉列表下拉列表l有的时候，可能希望

43、选选择框中选择多个选项，有的时候，可能希望选选择框中选择多个选项，就像使用复选框组那样，这时可以使用就像使用复选框组那样，这时可以使用multiple属性，这是一个布尔属性，使用该属性后，选择属性，这是一个布尔属性，使用该属性后，选择框自动会已滚动选择框的形式出现。框自动会已滚动选择框的形式出现。l如果一个下拉列表的选项非常多，则可以使用如果一个下拉列表的选项非常多，则可以使用元素对它们进行分组。元素对它们进行分组。的作用就像一个容器元素，包含需要归入同一组的作用就像一个容器元素，包含需要归入同一组中的元素。中的元素。l元素必须带有一个元素必须带有一个label属性，它的属性，它的值就是该选项

44、分组的标签。值就是该选项分组的标签。第43页HTML+CSS+JavaScript网页设计第4章HTML表单多行文本输入控件多行文本输入控件l在在HTML表单中，创建多行文本使用的是表单中，创建多行文本使用的是元素，元素，元素常用的元素常用的属性主要有属性主要有3个：个：lname：控件的名称。在发送至服务器端的：控件的名称。在发送至服务器端的“名称名称/值值”对中使用。对中使用。lrows：用于指定：用于指定元素应该具有元素应该具有的文本行数，对应于文本区域的高度。的文本行数，对应于文本区域的高度。lcols：用于指定：用于指定元素具有的列元素具有的列数，对应于输入框的宽度。数，对应于输入框

45、的宽度。第44页HTML+CSS+JavaScript网页设计第4章HTML表单元素元素l元素也可以定义一个按钮，在元素也可以定义一个按钮，在元素内部，可以放置文本或图像。这是该元素与元素内部，可以放置文本或图像。这是该元素与使用使用元素创建的按钮之间的不同之处。元素创建的按钮之间的不同之处。l使用使用元素也可以创建元素也可以创建3类按钮：提交按类按钮：提交按钮、重置按钮和普通按钮，通过钮、重置按钮和普通按钮，通过type属性指定。属性指定。不同的浏览器对不同的浏览器对元素的元素的 type 属性使用属性使用不同的默认值，所以使用不同的默认值，所以使用元素创建按钮元素创建按钮时，必须明确指定时

46、，必须明确指定type属性。属性。第45页HTML+CSS+JavaScript网页设计第4章HTML表单第46页主要内容主要内容4.1 表单概述表单概述4.2 创建表单创建表单4.3 组织表单结构组织表单结构4.4 disabled与与readonly控件控件4.5 本章小结本章小结4.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第4章HTML表单第47页4.3 组织表单结构组织表单结构l如果表单过于庞大，可能会使用户感到困惑，为如果表单过于庞大，可能会使用户感到困惑，为此此HTML提供了组织表单结构的元素：提供了组织表单结构的元素：和和。使用这两个元素可以将相关表

47、单控。使用这两个元素可以将相关表单控件组织到一起，使得表单结构更清晰。件组织到一起，使得表单结构更清晰。元素在表单控件组四周添加边框，以表示元素在表单控件组四周添加边框，以表示它们是相关联的一组元素。它们是相关联的一组元素。元素用来为元素用来为元素指定标题，它将元素指定标题，它将作为表单控件组的标题显示。在使用时，作为表单控件组的标题显示。在使用时，元元素应总是素应总是元素的第一个子元素。元素的第一个子元素。HTML+CSS+JavaScript网页设计第4章HTML表单第48页主要内容主要内容4.1 表单概述表单概述4.2 创建表单创建表单4.3 组织表单结构组织表单结构4.4 disabl

48、ed与与readonly控件控件4.5 本章小结本章小结4.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第4章HTML表单4.4 disabled与与readonly控件控件lreadonly属性用来防止用户更改表单控属性用来防止用户更改表单控件的值。但仍然可以通过脚本修改。任何件的值。但仍然可以通过脚本修改。任何readonly控件的名称与值仍将被发送至服控件的名称与值仍将被发送至服务器。务器。ldisabled属性会禁用表单控件或属性会禁用表单控件或元素中的表单控件组，从而使用元素中的表单控件组，从而使用户无法更改。可以使用脚本重新激活控件户无法更改。可以使用脚本

49、重新激活控件，但除非控件被重新激活，否则其名称与，但除非控件被重新激活，否则其名称与值不会被发送至服务器。值不会被发送至服务器。第49页HTML+CSS+JavaScript网页设计第4章HTML表单第50页主要内容主要内容4.1 表单概述表单概述4.2 创建表单创建表单4.3 组织表单结构组织表单结构4.4 disabled与与readonly控件控件4.5 本章小结本章小结4.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第4章HTML表单第51页4.5 本章小结本章小结 l本章主要介绍了本章主要介绍了HTML中的表单。首先介绍了表单的基本中的表单。首先介绍了表单的

50、基本概念和用途，表单在网页设计中起到数据收集的作用，这概念和用途，表单在网页设计中起到数据收集的作用，这也是客户端向服务器端提供数据的唯一方法；接着重点介也是客户端向服务器端提供数据的唯一方法；接着重点介绍了表单的创建，包括绍了表单的创建，包括元素及其属性，以及表单元素及其属性，以及表单中各类控件元素的创建与使用；最后介绍了使用中各类控件元素的创建与使用；最后介绍了使用与与元素组织大型表单的结构。表单是元素组织大型表单的结构。表单是网页与访问者交互的主要途径，几乎所有网站开发中都要网页与访问者交互的主要途径，几乎所有网站开发中都要用到表单，所以，学会创建和使用表单是网页设计的必备用到表单，所以