表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.

　　表单用form标签来定义,form表单只要有以下几个属性:

　　　　name--用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单

　　　　action--浏览者输入的数据被传送到的地方.

　　　　method--表示提交方式,可以选择post和get,默认为get方式.两种方式的区别:

　　　　post--所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式

　　　　get--所有提交参数都会在地址栏显示,参数总量最大4-5K.不建议使用

　　　　enctype--表示表单的封装方式,只有在进行文件上传时才会使用,当执行文件上传时,必须将这个值设置为 enctype="multipart/form-data"

　　　　onsubmit--当表单提交时自动执行的javascript事件,一般在需要进行提交验证时使用.

　　input标签

　　input标签代表html表单的单行输入域,input标签分为3种类型

　　　　1.输入型--包括text,password,file.

　　　　2.选择型--包括checkbox和radio

　　　　3.点击型--包括button,image,sbumit,reset.

　　其中除了name属性是必选的以外，其他属性都是可选的。这些属性的功能和用法介绍如下：

　　　　name--该属性用于指定保存用户输入文本的变量和名称

　　　　title--该属性用于input元素的标签，通常是位于输入框前的提示信息。

　　　　type--用于指定文本输入区的类型.

    　　　　

　　　　value--该属性用于指定name属性所定义变量的值，它将显示在输入框中。

　　　　default--该属性用于指定name属性所定义变量的默认值。

　　　　format--该属性用于格式化输入的数据。

　　　　maxlength--该属性用于指定用户可输入字符串的最大长度。该属性的上限为256，最多不能超过256个字符。

　　　　emptyok--用于指定用户是否可以不在输入框内输入内容。

　　　　size--该属性用于指定输入框的宽度，宽度值为字符个数。

　　　　tabindex--用于指定多个输入框存在时，类似于HTML中Tab键的具体位置。

　　　示例:

　　　　<input name="variable" title="label" type="type" value="value" default="default" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>

　　input标签的type属性值有以下几种:

　　　　text -- 文字输入域(输入型)

　　　　password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)

　　　　file -- 可以输入一个文件路径(输入型)

　　　　checkbox -- 复选框.可以选择零个或多个(选择型)

　　　　radio -- 单选框.只可以选择一个而且必须选择一个(选择型)

　　　　hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器

　　　　button -- 按钮(点击型)

　　　　image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)

　　　　submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)

　　　　reset -- 重置按钮,可以把表单中的信息清空(点击型)

　　input标签的checked属性

　　checked是使选择型输入域或者框被选中.如:<input type="checkbox"  id="11" name="22" checked="checked" />

　　input标签的disabled属性

　　disabled属性是禁止对输入域进行操作.<input type="checkbox"  id="11" name="22" disabled="disabled" />

　　input标签的disabled属性

　　readonly属性表示只读(只能看到,不能修改)的输入域(框).<input type="checkbox"  id="11" name="22" readonly="readonly" />

　　textarea标签

　　textarea标签代表html表单的多行输入域.有以下属性:

　　　　cols--多行输入域的列数

　　　　rows--多行输入域的行数

　　　　accesskey--表单的快捷键访问方式

　　　　disabled--输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

　　　　readonly--输入域可以选择,但是无法修改

　　　　tabindex--输入域,使用"tab"键的遍历顺序

　　　　如:<textarea cols="50" rows="10" id="jianyi" name="jianyi">默认值,可有可无</textarea>  

　　select标签

　　select标签可创建单选或多选菜单.主要属性有以下几种

　　size -- 选择域的高度

　　multiple -- 可以有多个选择

　　disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

　　tabindex -- 使用"tab"键的遍历顺序

　　name --规定下拉列表的名称。

　　示例:

　　　　<select size="1" id="select" name="select">

   　　　　 <option>北京市</option>

   　　　　 <option>上海市</option>

   　　　　 <option>天津市</option>

   　　　　 <option>重庆市</option>

　　　　</select>

　　select标签下的option标签

　　代表选择列表的一个选择项,属性如下:

　　label -- 说明选择项

　　value -- 说明选择项的值

　　selected -- 此选择项已经被选择

　　disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

　　tabindex -- 使用"tab"键的遍历顺序

　　select标签下的optgroup标签

　　optgroup标签代表分组选择项的类别名(此类别名不能选择),有个label属性,是选择项的标题,对选择项进行说明.

　　示例:


　　<select id="WebDesign" name="WebDesign">

   　　 <optgroup label="client">

     　　   <option value="HTML">HTML</option>

       　　 <option value="CSS">CSS</option>

       　　 <option value="javascript">javascript</option>

   　　 </optgroup>

   　　 <optgroup label="server">

      　　  <option value="PHP">PHP</option>

       　　 <option value="ASP">ASP</option>

       　　 <option value="JSP">JSP</option>

  　　  </optgroup>

    　　<optgroup label="database">

      　　  <option value="Access">Access</option>

        　　<option value="MySQL">MySQL</option>

       　　 <option value="SQLServer">SQLServer</option>

  　　  </optgroup>

　　</select>

　　label标签

　　label标签是为 input 元素定义标注.

　　label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

　　<label> 标签的 for 属性应当与相关元素的 id 属性相同。

　　示例:

　　<form>

　　<label for="name">姓名</label>

　　<input type="text"  id="name" />　

　　</form>

　　fieldset和legend标签

　　fieldset 标签--对表单进行分组

　　legend 标签 -- 对表单的每组内容进行说明

　　表单综合示例:

　　        <form id="xinxi" action="chuli.php" method="post">

            <p>

                <fieldset>

                    <legend>姓名密码单行输入</legend>                        

                        <label for="name">姓名:<input type="text" id="name"/></label>

                        <label for="password">密码:<input type="password" id="password"/></label>

                        <label for="guoji">国籍:<input type="text" id="guoji" value="中国" readonly="readonly" /></label>

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>性别单选</legend>                        

                        <label for="nan">男:<input type="radio" name="sex" id="nan"/></label>

                        <label for="nv">女:<input type="radio" name="sex"  id="nv"/></label>

                        <label for="baomi">保密:<input type="radio"  name="sex" id="baomi"/></label>

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>爱好多选</legend>                        

                        <label for="xuexi">学习<input type="checkbox" name="aihao" id="xuexi" checked="checked" /></label>

                        <label for="lvyou">旅游<input type="checkbox" name="aihao"  id="lvyou" /></label>

                        <label for="diaoyu">钓鱼<input type="checkbox"  name="aihao" id="diaoyu" /></label>

                        <label for="zuguo">祖国<input type="checkbox"  name="aihao" id="zuguo" checked="checked" disabled="disabled" /></label>

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>单行单选下拉列表</legend>                        

                        <label for="shengfen">选择省份</label>

                        <select size="1" name="xuanze" id="shengfen">

                            <option value="1">山东省</option>

                            <option value="2">河北省</option>

                            <option value="3" selected="selected">江苏省</option>

                            <option value="4">浙江省</option>

                            <option value="5">安徽省</option>

                            <option value="6">湖南省</option>

                        </select>                        

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>多行单选或ctrl单击多选下拉列表</legend>                        

                        <label for="chengshi">选择城市</label>

                        <select size="5" name="xuanze" multiple="multiple" id="chengshi">

                            <option value="1">济南市</option>

                            <option value="2">石家庄市</option>

                            <option value="3" selected="selected">南京市</option>

                            <option value="4">杭州市</option>

                            <option value="5">合肥市</option>

                            <option value="6">长沙市</option>

                        </select>                        

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>分组单选下拉列表</legend>                        

                        <label for="fenzu"></label>

                        <select size="1" name="xuanze"  id="fenzu">

                            <optgroup label="山东省">

                                <option value="jinan">济南市</option>

                                <option value="qingdao">青岛市</option>

                                <option value="yantai">烟台市</option>

                                <option value="weihai">威海市</option>

                            </optgroup>

                            <optgroup label="河南省">

                                <option value="zhengzhou">郑州市</option>

                                <option value="kaifeng">开封市</option>

                                <option value="luoyang">洛阳市</option>

                                <option value="xinyang">信阳市</option>

                            </optgroup>

                            <optgroup label="湖南省">

                                <option value="changsha">长沙市</option>

                                <option value="xiangtan">湘潭市</option>

                                <option value="yueyang">岳阳市</option>

                                <option value="huaihua">怀化市</option>

                            </optgroup>

                            <optgroup label="四川省">

                                <option value="chengdu">成都市</option>

                                <option value="mianyang">绵阳市</option>

                                <option value="yibin">宜宾市</option>

                                <option value="leshan">乐山市</option>

                            </optgroup>

                        </select>                        

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>文件上传以及留言文字域</legend>                        

                        <label for="wenjian">上传文件:

                        <input type="file" name="shangchuan" id="wenjian" size="35" maxlength="255" />

                        </label>

                        <br /><br />

                        <label for="">留言<br />

                            <textarea cols="50" rows="10">默认留言,可有可无</textarea>

                        </label>

                </fieldset>

            </p>

            

            <p>

                <fieldset>

                    <legend>按钮</legend>    

                        <input type="submit" value="提交"  name="anniu" id="tijiao" />

                        <input type="reset" value="重写"  name="anniu" id="chongxie" />

                        <input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" title="这是图像按钮"  />

                        <input type="button" value="普通按钮"  name="anniu" id="anniu" />

                        

                </fieldset>

            </p>

        </form>