S1/使用HTML语言和CSS开发商业站点/03-表单

表单的内容

创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在<form>……</form>标签对之间一起使用，也可以在表单之外用来创建用户界面。

表单标签及表单属性

在HTML中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于一个容器标签，其他表单标签需要在它的范围中才有效，<input>便是其中一个，用以设定各种输入资料的方法。表单标签有两个常用的属性，如下表所示。

<form>标签的属性

采用post和get方法提交表单信息后浏览器地址栏的变化。

以post方式提交表单，在名字和密码标签后，分别输入用户名lucker和密码123456，单击提交按钮，地址栏中的URL信息没有发生变化，这就是以post方式提交表单的特点。

以get方式提交表单，在页面单击提交按钮提交表单信息之后，在浏览器的地址栏中，URL信息会发生变化。仔细观察不难发现，在URL信息中清晰地显示出表单提交的数据内容，即刚刚输入的用户名和密码都完全显示在地址栏中，清晰可见。

1、即，psot提交方式不会改变地址栏状态，表单数据不会被显示。

2、即，使用get提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。

所以，基于以上两点区别，post方式提交的数据安全性要明显高于get方式提交的数据。

表单元素及格式

<input>标签中有很多属性，下面对一下比较常用的属性进行整理。

<input>元素的属性

1、文本框

在表单中最常用、最常见的表单输入元素就是文本框（text）,它用于输入单行文本信息，如用户名的输入框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text就可以了。还可以分别使用size属性和value属性对登录名的长度及形姓氏的默认值进行设置。还可以使用maxlength属性指定输入的数据长度。例如，登录名的长度不得超过20个字符，代码如下。

<p>登录名：

<input name="sname"  type="text"  size="30"  maxlength="20">

</p>

上面的代码设置结果是，文本框显示的长度为30，而允许输入的最多字符个数为20。

对于size属性和maxlength属性一定要能够严格的进行区分作用，size属性用于指定文本框的长度，而maxlength属性用于指定文本框输入的数据长度，这就是二者的区别。

2、密码框

密码框与文本框类似，区别在于需要设置文本框控件的type属性设为password。设置了type属性后，在密码框输入的字符全部都以黑色实心的圆点来显示，从而实现了对数据的处理。

3、单选按钮

单选按钮空间用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显式的value属性。

如果希望在页面加载时，单选按钮有一个默认的选项，那么可以使用checked属性。例如，性别选项默认选中为“男”，则修改代码如下。

<input name="gen" type="radio" class="input" value="男" checked="checked">男

4、复选框

复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框。复选框的命名与单选按钮有些区别，既可以多个复选框选用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框。用户可以选中某个复选框，也可以取消选中。一旦用户选中了某个复选框，在表单提交时，会将复选框的name值和对应的value值一起提交。

与单选按钮一样，checkbox复选框也可以设置默认选项，同样使用checked属性进行设置。例如，将爱好中的运动选项默认选中，则代码修改如下。

<input type="checkbox" name="cb1" value="sports checked="checked">运动

单选按钮应具有相同的名字，便于互斥选择；而复选框的名称则要根据应用环境来确定是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取。例如，兴趣爱好，一个人有多个兴趣爱好，这样复选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。否则，每个选项都需要单独进行读取，从而降低了效率。

5、列表框

列表框是为了用户快速、方便、正确的选择一些选项，并且节省页面空间，它是通过<select>标签和<option>标签来实现的。<select>标签用于显示可供用户选择的下拉列表，每个选项由一个<option>标签表示，<select>标签必须包含至少一个<option>标签。

语法：

<select name="指定列表名称" size="行数">

<option value="可选项的值" selected="selected">……</option>

<option value="可选项的值" >……</option>

</select>

其中，再有多条选项可供用户滚动查看时，size确定列表中可同时看到的行数；selected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。

下拉列表框中添加的option选项会按照顺序进行排列，但是如果希望其中某个选项默认显示，就需要使用selected属性来进行设置。例如，让月份默认显示十月，则相应代码修改如下。

<option value="10" selected="selected">十月</option>

6、按钮

按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。

语法：

<input type="reset" name="Reset" value="重填">

其中，type="button"表示是普通按钮；type="submit"表示是提交按钮；type="reset"表示是重置按钮。Name用来给按钮命名，value用来设置显示在按钮上的文字。

/1/reset按钮：用户单击该按钮后，不论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到初始状态，而填写或输入的数据将被清空。

/2/submit按钮：用户单击该按钮后，表单将会提交到action属性所指定的URL，并传递表单数据。

/3/button按钮：属于普通的按钮，需要与事件关联使用。Onclick事件

说明：onclick事件是表单元素被点击时所激发的事件，并只限于按钮。在事件中可以调用相应的脚本代码，执行一些特定的客户端程序。

实现图片按钮的效果有多种方法，比较简单的方式就是配合使用“type”和“src”属性，如下所示。

<input type="image" src="images/login.gif" />

7、多行文本域

用于在网页中输入两行或两行以上的文本时，它使用的标签是<textarea>。

语法：

<textarea name="textarea" cols="显示的列的宽度" rows="显示的行数">

文本内容

</textarea>

其中，cols用来指定多行文本框的列的宽度；rows属性用来指定多行文本框的行数。在<textarea>……</textarea>标签对中不能使用value属性来赋初始值。

8、文件域

文件域的作用是用于实现文件的选择，在应用时只需把type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。

在使用文件域时，需要特别注意的是，包含文件域的表单，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的“entype”编码书型为“multipart/from-data”，表示将表单数据分为多部分提交。

设置表单的隐藏域

将tytpe属性设置为hidden隐藏类型即可创建一个隐藏域。

表单的只读与禁用设置

在某些情况下，需要对表单元素进行设置，即设置表单元素为只读或禁用。他们常见的应用场景如下。

A、只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。

B、禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮；播放器控件在播放状态时，不能单击“播放”按钮等。

制度和禁用效果分别通过设置“readonly”和“disabled”属性来实现。

通常只读属性用于不希望用户对数据进行修改的场合，而禁用则可以配合其他控件使用。最常见的就是在安装程序时，如果用户不选中“同意安装许可协议”的复选框，则“安装”或“下一步”按钮无法使用“

规范：W3C XHTML标准中，规定属性值不能省略，要求写为属性=“属性值”的形式。

例如，下拉列表框的默认选中，应写为selected="selected"，而不能仅写selected。同理，复选框的默认选中，应写为checked="checked"，只读应写为readonly="readonly"，禁用应写为disabled="disabled"。

语义化的表单

1、域

在表单中，可以使用<fieldset>标签实现域的定义。什么是域呢？简单地说就是将一组表单元素放到<fieldset>标签内，浏览器就会以特殊的方式来显示他们，这些表单元素可能有特殊的边界、效果。

使用<fieldset>标签后，该标签会将表单内容进行整合，从而生成一组与表单相关的字段。

2、域标题

所谓域标题就是给创建的域设置一个标题。设置域标题需要使用一个新的标签，即<legend>标签，在该标签内的内容就被视为域的标题。

通常<fieldset>标签与<legend>标签会一起使用。

表单元素的标注

对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进。但是如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。

为表单元素进行标注时，需要使用<label>标签，该标签的语法如下。

语法：

<label for="表单元素的id">标注的文本</label>

在<label>标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素。

<form>

请选择性别：

    <label for="male">男</label>

    <input type="radio" name="gender" id="male" />

    <label for="female">女</label>

    <input type="radio" name="gender" id="female" />

</form>

上面代码中，对于表单元素而言，其name属性与id属性都是必须的。Name属性由表单负责处理，而id属性是给<label>标签和表单元素进行关联使用的。

用户在选择性别是，可以不用单击单选按钮，而是可以用鼠标直接单击与单选按钮对应的文本。例如，在本例中，鼠标单击文本“男”时，则性别男对应的单选按钮被自动选中。