【表单】-专题解析

表单（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>

常州 无锡 苏州 常州 无锡 苏州 苏州 无锡 常州 这儿有个隐藏对象

---

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