XHTML、CSS与javascript入门经典_第五章 表单

用文本框、单选按钮、选择框以及提交按钮创建<form>表单，及结构化表单内容

5.1表单简介

5.2使用<form>元素创建表单

    <form>不能相互嵌套

5.2.1action特性

5.2.2method特性

5.2.3id特性

    可以用frm作为表单id的起始字符，eg：frmLogin

5.2.4name特性（ 弃用）

5.2.5onsubmit特性

5.2.6onreset特性

    清空表单中所有内容

5.2.7enctype特性

    指定浏览器数据编码的方式，有两种

    1.application/x-www-form-urlencoded（默认）：大多数表单使用的方式，一些字符（空格、加号和其他一些非字母字符会被其他字符替换）

    2.multipart/form-data：允许数据以多个部分的方式进行发送，每个连续的部分对应一个表单控件，发送顺序按他们在表单中出现的顺序，通常用于上传照片

5.2.8accept-charset特性

    指定服务器能够处理的编码，以空格或者逗号隔开字符列表，eg：accept-charset="utf-8"

5.2.9accept特性

     浏览器暂未支持

5.2.10target特性

    指定在哪个表单或者框架中显示表单结果

5.2.11空白格<form>元素

    浏览器遇到<form>元素时，周围会产生部分空白，使用CSS无法解决，只能细心设置布局方式

5.3表单控件

    主要介绍输入框、按钮、单选框和复选框、下拉框、文本选择框和隐藏控件

5.3.1文本输入

    单行文本输入框控件（文本框）：由<input>创建

    密码输入控件：由<input>创建

    多行文本输入控件：由<textarea>创建

     创建文本id时，建议用txt开头

    1.文本框：

        type：type值为text，指定输入控件的类型

        name：发送给服务器的“名称/值”中的名称部分

        value："名称/值"中的值部分，一般初始设置为提示语

        size：设置文本框的宽度

        maxlength：文本框能够输入的最大字符数

        还支持disabled、readonly、tabindex、accesskey

    2.密码输入控件：

        以星号或原点显示，但是仍然作为纯文本通过Internet发送

    3.多行文本输入控件：

        <textarea>元素中的内容，被视为在一个<pre>中编写，会保留源文档的格式

        name：“名称/值”中的名称

        rows：指定<textarea>的行数

        cols：指定<textarea>的列数，即宽度

        支持disabled、readonly、tabindex、accesskey特性

        warp（ 不是XHTML的部分）：off（默认）：超出文本宽度，添加滚动条

                                                        virtual：超出文本宽度时换行显示，但是发送给服务器时，仍是一行，除非输入时自己按下Enter

                                                        physical：超出文本宽度是换行显示，服务器接收也是这样

5.3.2按钮

     创建按钮id时，建议用btn开头

    1.使用<imput>方式创建按钮

        type取值：submit、reset、button

    2.为按钮添加图像

        讲type特性值设置为“image”,然后用src指定图像来源

    3.使用<button>元素创建按钮

5.3.3复选框

     创建复选框id时，建议用chk开头

    复选框可以单独出现，每个复选框有自己的name

    复选框可以分组出现，每个组共用一个name

    复选框特性：type="checkbox"、name、value、checked、disabled、readonly、tabindex、accesskey

5.3.4单选按钮

     创建单选按钮id时，建议用rad开头

    当存在一组共享名称的单选按钮时，用户只能选择其中的一个按钮

    单选按钮特性type="radio"、name、value、checked、size（ IE8不支持）

5.3.5选择框

     创建选择框时，建议用sel开头

    eg：

        <select name="XX">

            <option value="1">1</option>

            <option value="2">2</option>

        </select>

    1.<select>元素

        <select>元素是下拉列表框的包含元素，特性：

            name特性：控件名称

            size特性：可用于表示滚动列表框，它的值是列表中可见的行数

            multiple特性：允许用户从下拉框中选择多项，若没有，就只能选择一项，使用这个特性会改变下拉框的外观

    2.<option>元素

        <option>元素具有：

            value特性：选中该项，它的值，就发送给服务器

            selected特性：设置默认选中项，可以有多个，即使<select>元素中不存在multiple特性

            label：为选项设置标签的一种替代方式（通过特性，而不是元素内容为选项指定一个标签），常与<optgroup>元素搭配使用

    3.创建滚动选择框

        使用<select>元素，使用size特性

    4.利用multiple选择多个选项

        允许用于选择多个选项，multiple特性的值必须是multiple。如使用该特性，最好告之用户：通过按下“Ctrl+单击”可多选

    5.使用<optgroup>元素分组选项

        如果选择框的选项非常多，可以使用<optgroup>元素将他们进行分组，<optgroup>可以附带<lable>元素，eg：

            <select name="XX">

                     <optgroup label="label1">

                        <option value="1">1</option>

                        <option value="2">2</option>

                     </optgroup>

                     <optgroup label="label2">

                        <option value="3">3</option>

                        <option value="4">4</option>

                     </optgroup>

            </select>

        对元素进行分组的另外一种方式是使用disable特性（可以阻止用户选择该项）的<option>元素，eg：

            <select name="XX">

                        <option value="1">1</option>

                        <option value="2">2</option>

                         <option  disabled="disabled"  value="">---</option>

                        <option value="3">3</option>

                        <option value="4">4</option>

            </select>

    6.选择框的特性

5.3.6文本选择框

    如果允许用户上传文件，就需要用到文本选择框也称作文件选择框，使用<input>将type设置为file

    有<input>的name、value、accept及tabindex、accesskey、disabled、readonly特性

5.3.7隐藏控件

5.3.8对象控件

5.4为控件创建标签与<label>元素

    <label>元素的for特性：用于指定与该标签相关联的表单控件，for特性的值必须对应表单控件的id特性的值。

    for特性省略的话，就叫隐身标签，这样无法控制标签相对于表单控件的显示位置

5.5使用<fieldset>元素和<legend>元素结构化表单

    <fieldset>：表单控件周围创建边框

    <legend>：为<fieldset>指定一个主题，使用<legend>时，必须是<fieldset>的第一个子元素

5.6焦点

5.6.1焦点移动顺序

    通过tabindex（1~32767）控制，可以附带这个特性的元素：

    <a>、<area>、<button>、<input>、<select>、<textarea>、<object>

5.6.2访问键

    通过accesskey特性控制

5.7禁用的和只读的控件

    disabled：禁用表单控件，从而不能改变该控件，不会将“名称/值”发送给服务器

    readonly：阻止用户改变控件本身的值，其“名称/值”发送给服务器

5.8向服务器发送表单数据

5.8.1HTTP get方法

    优点：可以将其作为书签

    缺点：不适合发送敏感数据，上传的东西不是文件不能用这种方法，只能发送ASCII字符

5.8.2HTTP post方法

    表单数据被包含在HTTP头中透明（以纯文本形式）发送给服务器，也无法保证安全性

5.9本章小结

    本章主要介绍了表单控件，5.3是核心