【文档说明】HTML5+CSS3网页设计实例教程-第6章-HTML5表单的应用课件.ppt，共(46)页，401.000 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-92595.html

以下为本文档部分文字说明：

HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第6章HTML5表单的应用本章概述本章的学习目标主要内容HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第2页本章概述几乎每当需要从网站访问者那里收集

信息时，都需要使用“表单”(form)。很多在线表单具有与纸质表单很强的相似性。在网上可以创建一个由“表单控件”(formcontrol)组合而成的表单，包含如“文本框”(textbox)、“复选框”(checkbox)、“选择框”(selectbox)以及“单选按钮”(

radiobutton)等组成的表单。本章将介绍如何将这些不同种类的每一个控件组合入表单中，用于收集来自网站访问者的所有种类的信息。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第3页本章

的学习目标如何创建表单如何使用不同类型的表单控件用户输入数据的处理如何使表单易于访问如何组织表单内容的结构HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第4页主要内容6.1认识表单6.2

使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向

服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第5页6.1认识表单下图展示的是百度的首页，其中包含了两类表单控件：文本输入：

其中可以输入搜索词。提交按钮：向服务器发送表单。本页表单中有一个提交按钮：写着“百度一下”的按钮。百度首页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第6页主要内容6.1认识表单6.2使用<

form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.

8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第7页6.2使用<form>元素创建表单表单位于<form>的元素中。<form>元素还可以

包含其他标记，例如段落、标题等。但是，它不允许包含另外一个<form>元素。页面中可以包含任意数量的表单，应该保持<form>元素间相互分离。例如，可以有一个登录表单、一个搜索表单以及一个报纸订阅表单，这些表单可以全部位于同一页面中。如果真的在一个页面中拥有多于一个表单，那么用户可以一次只

将一个表单的数据发送给服务器。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第8页action特性action特性指明表单提交后对数据的处理。通常，action特性的值是一个页面或程序，位于接收信息的Web服务器中。例如，一个包含用户名和密码的登录表

单，用户输入的详细信息被传送到Web服务器中一个以ASP.NET编写的页面，叫做login.aspx。这里action特性则如下所示：<formaction="http://www.example.org/membership/login.aspx">HTML5+CSS3网页设

计实例教程第6章HTML5表单的应用第9页id特性id特性可以唯一标识页面中的<form>元素。赋予<form>元素一个id特性是一种良好习惯，因为很多表单使用样式表和脚本，就要求使用id特性以识别表单。id特性的值在文档中应该是唯一的，并且还应该遵循id特性的其他取值规则。有时

以字符frm作为表单的id和name特性值的起始，并使用值的剩余部分描述表单收集数据的类型，例如，frmLogin或frmSearch。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用name特性name特性是id特性的前任，而且如id特性一样，其取值在文档内应该保持唯一

。现在不需要使用这个特性了。不过如果使用了，可以赋予与id特性相同的值。第10页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用enctype特性如果使用HTTPpost方法向服务器发

送数据，则可以使用enctype特性指定浏览器在将数据发送到服务器之前如何对其进行编码。如果没有使用此特性，则浏览器会使用第一个值。因此，只有在表单允许用户向服务器上传文件（如图片），或用户将可能使用非ASCII字符时

，才需要使用该特性。第11页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用accept-charset特性不同语言通过不同的“字符集”(characterset)或字符组书写。然而，在创建网站时，开发人员不会将网站设计成能够理解所有语言。accept-char

set特性背后的思想是，使用该特性可以指定一系列用户能够输入，服务器可以处理的字符编码。该特性的值是一个由空格或逗号分隔的字符集列表。第12页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用novalidate特性novalidate特性是一个布尔特性，用以指定表单在提交时

是否应该进行校验。如果该特性存在，浏览器则不应该在提交前校验表单。<formaction="http://www.example.org/membership/login.aspx”novalidate>第13

页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用target特性target特性指定一个命名窗口或关键字，用于处理表单提交。例如，为在新窗口中处理表单，可以将<form>元素的target特性设置为"_blank"。<formaction="http

://www.example.org/membership/login.aspx”target="_blank">第14页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用autocomplete特性该特性指明浏览器是否应该自动填写表单值。将之设置为of

f指明浏览器不应该自动填写任何内容。默认值为on。<formaction="http://www.example.org/membership/login.aspx”autocomplete="off">第15页HTML5+CSS3网页设计

实例教程第6章HTML5表单的应用第16页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签

6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CS

S3网页设计实例教程第6章HTML5表单的应用第17页6.3<form>元素中表单控件<form>元素中不同类型的表单控件，用于收集来自网站访问者的信息，包括：文本输入控件、按钮、复选框与单选按钮、选择框、文件选择框、

新的HTML5表单元素，如进度条和度量控件、隐藏控件。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用文本输入控件“文本输入框”(textinputboxes)在很多网页中都会使用。“输入类型”

是指，可用于对input元素中的type特性进行设置的一些值，以指定该input元素的输入类型。►单行文本输入控件►密码输入控件►多行文本输入控件第18页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用新

的HTML5输入控件类型与特性使用placeholder特性提供示例输入使用autocomplete特性确保用户隐私与安全使用required特性确保信息提供使用autofocus自动获得输入焦点patternlist特性与datalist元

素multiplenovalidate与formnovalidateform特性formaction、formenctype、formmethod以及formtarget第19页HTML5+CSS3网页设计实例教程第6章HTML5表单的

应用按钮按钮最常被用于提交表单。不过，它们有时也被用于清除或重置表单，甚至是触发客户端脚本。可以通过三种方式创建按钮：►使用<input>元素创建按钮►使用图片按钮►使用<button>元素创建按钮第20页按钮的效果HTML5+CSS3网页设计实例

教程第6章HTML5表单的应用复选框复选框类似于电灯开关，状态或者是开，或者是关。在被选中时即处于开状态——用户可以通过简单单击复选框使其在开与关两种状态间切换。复选框可以单独出现，此时每一个复选框都有自己的名称；或者也可以作为复选

框组出现，此时它们共享控件名称，并允许用户为同一属性选择多个值。第21页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用单选按钮单选按钮同样还是使用<input>元素创建，这一次type特性的值应该为radio。例如，下面的单选按钮被用于允许用户选择所希望进行的旅行等级：

第22页单选按钮的效果HTML5+CSS3网页设计实例教程第6章HTML5表单的应用选择框下拉选择框使用户可以从下拉菜单中选择一个条目。下拉选择框可以占用比单选按钮组小得多的空间。下拉选择框还可以作为使用单行文本输入控件又希望限制用户输入选项时的替代方案。使

用选择框则可以控制用户能够输入的选项。►<select>元素►<option>元素►创建滚动选择框►使用multiple特性选择多个选项►使用<optgroup>元素分组选项第23页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用文件选择框如果需要上传文件，则

必须使用“文件上传框”(fileuploadbox)，也被称作“文件选择框”(fileselectbox)。该控件使用<input>元素创建，不过这一次赋予type特性的值应为file：第24页HTML5+CSS3网页设计实例教程

第6章HTML5表单的应用隐藏控件有些时候需要在页面间传递信息而不希望被用户看到。为实现这种功能，可以使用“隐藏表单控件”(hiddenformcontrols)。尽管无法在页面中看到它们，如果查看页面的源码，还是可以从代码中看到它们的值。因此，隐藏控件不要用于不希望用户

看到的敏感信息。第25页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用新的HTML5表单元素使用新的<progress>元素跟踪任务完成度使用<meter>元素表示一定范围内标量的测量值使用<inpu

t>元素及新的<datalist>元素创建自动完成列表第26页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第27页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label

>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章H

TML5表单的应用6.4创建一个联系方式表单实例在本例中，需要结合多种表单控件，为ExampleCafé构建一个联系方式表单。第28页联系方式表单的效果HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第29页主要内容6.1认识表单6.2使

用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6

.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第30页6.5使用<label>元素为控件创建标签如果要为网站创建一个表单，需要为它提供好的标签描述，以使用户能够知道在哪里填写什么样的数

据。一些表单控件，如按钮，本身已经具有标签。但对于大多数表单控件而言，必须为其提供标签。对于没有标签的控件，应该使用<label>元素。除了告知用户应该填写何种信息之外，该元素不会对表单产生任何影响。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用

第31页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及

<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第32页6.6使

用<fieldset>及<legend>元素组织表单结构大型表单需要将相关表单控件组织到一起。<fieldset>以及<legend>就是用来完成控件分组的元素。►<fieldset>元素在表单控件组四周添加边框，以表示它们是相关联元素

。►<legend>元素可以为<fieldset>元素指定标题，它将作为表单控件组的标题显示。在使用时，<legend>元素应总是作为<fieldset>元素的第一个子元素出现。HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第33页主要内

容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8

disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用6.7焦点当一个网页中包含了一些链接或表单控件时，可以使

用Tab键在它们之间移动，或使用Shift+Tab反向在元素间移动。当在元素间移动时，浏览器通常会为该元素（链接或表单控件）添加某种类型的边框或高亮效果。这被称作焦点。只有用户可以与之交互的元素，如链接及表单控件，可以获得焦点。第34页HTML5+CSS3网页设计实例教程第6章HT

ML5表单的应用标签遍历顺序如果想要控制元素能够获得焦点的顺序，可以使用tabindex特性赋予元素一个0到32767的数字，作为遍历顺序的一部分。每一次用户单击Tab键时，焦点就移动到下一个拥有最大遍历顺序值的元素。同样地，

Shift+Tab以相反顺序移动焦点。当用户遍历过文档中所有可以获得焦点的元素之后，焦点可能会被赋予浏览器的其他功能区域，最常见的情况是地址栏。第35页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用快捷键

快捷键的作用与键盘快捷方式很类似。快捷键是文档字符集中预计应存在于用户键盘上的一个单一字符。当该键与另一按键一同使用时，浏览器会自动跳转到该区域。快捷键使用accesskey特性定义。该特性的值是希望用户按下的字符，即键盘上的按键，与之结合的其他按键取决

于操作系统及浏览器。第36页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第37页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元

素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小

结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第38页6.8disabled与readonly控件可以带有disabled和readonly特性的元素：►readonly特性防止用户更改表单控件自身的值。但仍然可以通过脚本修改。任何readonl

y控件的名称与值仍将被发送至服务器。►disabled特性会禁用表单控件或<fieldset>元素中的表单控件组，从而使用户无法更改。可以使用脚本重新激活控件，但除非控件被重新激活，否则其名称与值不会被发送至服务器。HTML5+CSS3网页设计实例教程第6章HTML5表单

的应用第39页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<l

egend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用6.9向服务器发送表单数据当浏览器请

求一个网页以及当服务器向浏览器发送回一个页面时，所使用的是“超文本传输协议”(HyperTextTransferProtocol，HTTP)。浏览器向服务器发送表单数据能够使用的有两种方法：HTTPget和HTTPpost。在form元素中可以使用method特性

指定使用哪一种方法。第40页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用HTTPget在使用HTTPget方法向服务器发送表单数据时，表单数据被附加在<form>元素中由action特性指定的URL尾部。表单数

据与URL之间使用问号分隔。在问号之后是各表单控件的“名称/值”对。每个“名称/值”对之间使用与符号&分隔。第41页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用HTTPpost方法在使用HT

TPpost方法向服务器发送来自表单的数据时，表单数据将在HTTP头部中透明地传送。尽管你无法看到这些头部信息，但严格地说，它们自身也是不安全的。如果发送如信用卡细节之类的敏感信息，数据应该在“安全套接字层”(SecureSocketsLayer，SSL)之下发送，同时还应被加密。第42

页HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第43页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label

>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页

设计实例教程第6章HTML5表单的应用6.10创建更有用的表单字段重新创建联系方式表单，使用本章后半部分学到的技术添加新的字段并使其更加可用。第44页联系方式表单HTML5+CSS3网页设计实例教程第6章HTML5表单的应用第

45页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabl

ed与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结HTML5+CSS3网页设计实例教程第6章HTML5表单的应用6.11本章小结本章全面讲述了创建在线表单的世界，对很多网站而言这都是至

关重要的部分。在使用表单控件创建了一个表单之后，需要确保为每个元素都恰当地添加了标签，从而用户可以了解应该填写何种信息，或者应该做何种选择。最后，讲解了何时应该使用HTTPget或post方法将表单数据发送至服务器。第46页