表单（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属性。
...
...
<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> |
按钮（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> |
|
|
|
申明：本文转自小雅，如损害作者权利，请留言我删除。