《HTML教程》10章 表单

表单

表单是用来与服务端交换数据的主要方式。你在浏览器中所看到的页面是保存在服务器上的， 当你在地址栏输入站点地址时，页面内容通过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>
苏南







苏北

按钮（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>
常州
无锡
苏州
常州
无锡
苏州





这儿有个隐藏对象