【表单】专题解析

表单（form）由表单元素组成。常用的表单元素有以下几种标记：输入域标记<input>、选择域标记<select>和<option>、文本域标记<textarea>等。下面分别进行介绍。

1．输入域标记<input>

输入域标记<input>是表单中最常用的标记之一。常用的文本域、按钮、单选按钮及复选框等构成了一个完整的表单。

语法：

    <form> 
    <input name="filed_name"  type="type_name"> 
    </form>

参数name是指输入域的名称，参数type是指输入域的类型。在<input type="">标记中一共提供了10种类型的输入区域，用户所选择使用的类型由type属性决定。type属性取值及举例如表9.3所示。

表9.3 type属性取值及举例

续表

2．选择域标记<select>和<option>

通过选择域标记<select>和<option>可以建立一个列表或者菜单。菜单节省空间，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。

语法：

1 <select name="name" size="value" multiple>
2  <option value="value" selected>选项1</option>
3  <option value="value">选项2</option>
4  <option value="value">选项3</option>
5 …
6  </select>

参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以菜单方式显示数据，省略则以列表方式显示数据。

选择域标记<select>和<option>的显示方式及举例如表9.4所示。

表9.4 选择域标记<select>和<option>的显示方式及举例

语句动态添加菜单项。

3．文本域标记<textarea>

文本域标记<textarea>用来制作多行的文本域，可以在其中输入更多的文本。

语法：

1     <textarea name="name" rows=value cols=value value="value" warp="value"> 
2         …文本内容  
3     </textarea>

参数name表示文本域的名称；rows表示文本域的行数；cols表示文本域的列数（这里的rows和cols以字符为单位）；value表示文本域的默认值。warp用于设定显示和送出时的换行方式，值为off表示不自动换行；值为hard表示自动按Enter键换行，换行标记一同被发送到服务器，输出时也会换行；值为soft表示自动按Enter键换行，换行标记不会被发送到服务器，输出时仍然为一列。

文本域标记<textarea>的值及举例如表9.5所示。

表9.5 文本域标记<textarea>的值及举例

====================分============割============线==========================

表单

表单是用来与服务端交换数据的主要方式。你在浏览器中所看到的页面是保存在服务器上的，当你在地址栏输入站点地址时，页面内容通过http协议下载到你的计算机上。要将页面上的内容提交给服务端，从形式上看有2种，即前面已经学过的链接<a href="url">......</a>和表单<form>......</form>。如果按方式可分为get和post二种，链接便属于get方式，表单既可为get方式，也可以是post方式。

所谓提交，就是将对象的名字和内容通过fttp协议传送到服务端，服务端根据名字得到其相应的内容。必须要有服务端才能提交，服务端可以是ASP、CGI、PHP、JSP或Servlet等，另外还必须有相应的页面来接受处理并反馈内容。有人将表单提交给email,说“这不是没有服务端吗？”，email是有服务器的，可以作为服务端的一种。

不是所有的内容都可以提交，用表单来提交时，只有特定的对象才能提供，这些对象是：文字输入框(Text)、多行文字输入框(TextArea)、口令输入框(Password)、隐含框(Hidden)、单选按钮(Radio)、检查框按钮(CheckBox)、选择框(包括组合框、列表框、选项分给框)、文件选择框(File)、对象分组(FieldSet)。另外还有起辅助作用的对象：标签(Label)、普通按钮(Button)、提交按钮(Commit)、复位按钮(Reset)、自由设计的按钮(Button)。

表单的提交是通过提交按钮来实现的，不提交的话，表单就失去意义。当然，通过JavaScript可以将get方式和post方式转换，以及灵活的提交方式。提交的实质是将对象的名称和值传送到服务端，服务端根据名称找到相应的值,因此，name=*和value=**相当重要。一个网页可以有多个表单，但只能提交其中的一个。

本章将提到一个新的属性id，早期的html语法中没有，高版本中新增加后用来控制对象。id属性纯粹是客户端的，提交到服务端时仅仅name和value有作用。几乎所有元素都有id属性。

<form action="url" method="get/post">
     ...
     ...
    <input type="commit">
</form>

文字输入(TextBox)和密码输入(Password)
<input type="text" name="*" value="**">
<input type="hidden" name="*" value="**">

<input type="text" name="mytext" value="小雅软件学习网">
<input type="password" name="mypsswd">

多行文字输入(TextArea)和隐藏输入(Hidden)、文件选择(FileOption)
    <textarea name="*" rows="行数" cols="列数">．．．</textarea>
    <input type="password" name="*" value="**">
    <input type="file" name="*" value="**" accept="MIMEtype">

<textarea name="mytext" rows="3"> 苏州无锡常州 </textarea>	苏州无锡常州
<input type="hidden" name="myhide">这儿有个隐藏对象	这儿有个隐藏对象
<input type="hidden" name="myhide" accept="image/jpeg,image/gif">

复选框(CheckBox) 和单选框(RadioButton)
    <input type="checkbox/radio">
    <input type="checkbox/radio" checked>
    <input type="checkbox/radio" name="*" value="**">
    注意下面的例子，选项的name是同一个，对于单选框对应的值只有一个，而对于复选框其相应的值可能是多个，在服务端将产生一个数组与值对应。
有checked属性的项将被选中，对于radio按钮如果有多个选项checked，则最后一个有效。

<input type="checkbox" name="myck" value="cz" checked>常州 <input type="checkbox" name="myck" value="wx" checked>无锡 <input type="checkbox" name="myck" value="sz">苏州	常州无锡苏州
<input type="radio" name="myradio" value="cz">常州 <input type="radio" name="myradio" value="wx">无锡 <input type="radio" name="myradio" value="sz" checked>苏州	常州无锡苏州

组合框(ComboBox) 和列表框(Listbox)
    <select name="*">
        <option value="**">．．．</option>
        <option value="**" selected>．．．</option>
    </select>
    <select name="*" size="***" multiple>
        <option value="**">．．．</option>
        <option value="**" selected>．．．</option>
    </select>
    属性value用于提交，省略时将用<option>与</option>之间的内容代替。multiple属性通常省略，不省略时则可以多选，提交时将产生一数组来与名称对应。selected属性表示当前选项。

<select name="mycombo"> <option value="cz">常州</option> <option value="wx" selected>无锡</option> <option value="sz">苏州</option> </select>
<select name="mycombo" size="3"> <option value="cz">常州</option> <option value="wx" selected>无锡</option> <option value="sz">苏州</option> </select>

选项分组(ItemGroup)
    <select name="*">
        <optgroup label="**" value="***">
            <option label="**" value="***" selected>．．．</option>
        </option>
    </select>
    该元素不常用，在ie5.x和ie6.x上的显示也不同。option元素的属性label在ie5.x上用于显示文本，在ie6.x不起作用。

<select name="mycombo">
<optgroup label="苏南">
    <option label="Changzhou" value="cz">常州</option>
    <option label="Wuxi" value="wx" selected>无锡</option>
    <option label="Suzhou" value="sz">苏州</option>
</optgroup>
<optgroup label="苏北">
    <option label="Yangzhou" value="yz">扬州</option>
    <option label="Nantong" value="nt">南通</option>
    <option label="Xuzhou" value="xz">徐州</option>
</optgroup>
</select>

分组和标签
    <fieldset>
        <legend>...</legend>
    </thead>
    <label for="对象id">...</label>
分组和标签只起辅助作用，不提交到服务端。当鼠标点中标签时，同时便也点中了相应的对象。

<fieldset>
<legend>苏南</legend>
    <label for="id11">组合框</label>
    <select name="sn" id="id11">
        <option value="cz">常州</option>
        <option value="wx" selected>无锡</option>
        <option value="sz">苏州</option>
    </select>
    <input type=radio name=mycheck value=cz id="id12">
    <label for="id12">单选按钮1</label>
    <input type=radio name=mycheck value=cz id="id13">
    <label for="id13">单选按钮2</label>
</fieldset>
<fieldset>
<legend>苏北</legend>
    <label for="id21">列表框</label>
    <select name="sb" size="3" id="id21">
        <option value="yz">扬州</option>
        <option value="nt">南通</option>
        <option value="xz" selected>徐州</option>
    </select>
    <input type=checkbox name=mycheck value=cz id="id22">
    <label for="id22">多选按钮1</label>
    <input type=checkbox name=mycheck value=cz id="id23">
    <label for="id23">多选按钮2</label>
</fieldset>

苏南组合框单选按钮1 单选按钮2

苏北列表框多选按钮1 多选按钮2

按钮（button）
<input type="button" name="*" value="**">
<button type="button" name="*" value="**">．．．</button>

<input type="button" name="mybutton1" value="我的对话框" onClick="alert('小雅软件欢迎你')">
<button type="button" name="mybutton2" alt="MyButton2" onClick="alert('小雅软件欢迎你')"> <image src="image/i10_01.gif"><br> 我的对话框 </button>

提交按钮(submit)和重置按钮(reset)
    <input type="summit" name="*" value="**">
    <input type="image" sre="URL" name="*" alt="**">
    <input type="reset" name="*" value="**">
提交按钮只有在表单<form>．．．</form>内使用才有意义。

<input type="button" name="mybutton1"> <input type="button" name="mybutton2" value="发送"> <input type="image" src="image/i10_03.gif" name="mybutton3">
<input type="button" name="mybutton1"> <input type="button" name="mybutton1" value="清除">

提交和重置综合演示
提交需要服务端，小雅软件学习网暂时没有固定服务器，本演示是用JavaScript模拟，让你能看到提交后在服务端能得到什么内容。

<form name=ouform action="#" method="post">
    <input type=checkbox name=oucheck value=cz checked>常州<br>
    <input type=checkbox name=oucheck value=wx checked>无锡<br>
    <input type=checkbox name=oucheck value=sz>苏州<br>
    <input type=radio name=ouradio value=cz>常州<br>
    <input type=radio name=ouradio value=wx>无锡<br>
    <input type=radio name=ouradio value=sz checked>苏州<br>
    <select name="oucombo">
        <option value="cz">常州</option>
        <option value="wx" selected>无锡</option>
        <option value="sz">苏州</option>
    </select><br>
    <select name="oulist" size="3">
        <option value="cz">常州</option>
        <option value="wx" selected>无锡</option>
        <option value="sz">苏州</option>
    </select><br>
    <input type=text name=ouedit value=小雅软件学习网><br>
    <input type=password name=oupasswd><br>
    <textarea name="outextarea" rows="3" cols="20">
        苏州
        无锡
        常州
    </textarea><br>
    <input type=hidden name=ouhide value="我是隐藏对象">这儿有个隐藏对象<br>
    <hr>
    <input type="button" name="ousubmit" value="提交" onClick="result()">
    <input type="reset" name="oureset" value="清除">
</form>

申明：本文转自小雅，如损害作者权利，请留言我删除。