表单与表单元素

   1.表单的概念

    表单的作用是从用户方收集信息，当用户填好表单上所需信息并将表单提交后，服务器就可以得到表单中包含的信息，并经公共网关接口程序进行处理。

表单中使用的主要元素包括：

       ①FORM  在文档中产生表单。

       ②INPUT  输入字段。

       ③SELECT  定义可选择的若干选项，实际上—般为列表框。

       ④OPTION  SELECT选项中的选项。

    ⑤TEXTAREA  多行文本的输入字段

每一个可变的字段都要由INPUT、TEXTAREA和OPTION元素来定义，并且必须用NAME属性来标识其值。  

2.Form标识

FORM在包含文件结构性标识的同时，还有一系列输入标记，其中属性包括：  

           ①ACTION  用于设定互动式表单的处理方式，通常指明一个处理函数的URL地址。

           ②METHOD  用于设定互动式表单的资料传输方式，如POST或GET方式。

      ③ENCTYPE  用于以编码方式来传送表单的资料。

3.输入域  

INPUT元素用来定义一个用户可以在表单上输入信息的输入域，每一个输入域给特定名称及资料类型的变量分配—个值。INPUT元素有很多属性，可使用的参数组取决于TYPE属性，一般命令格式为：  

         <input name=myname  type=mytype>

（1）文字和密码输入

希望用户输入文字时，应将TYPE属性设置为TEXT；希望用户输入密码时，应将TYPE属性设置为PASSWORD，表单将不显示用户输入的字符。  规定TYPE=TEXT时，还可以使用以下三个INPUT的属性：  

      ①MAXLENGTH：限定用户能够输入的字符数，默认值为无限。

      ②SIZE：定义输入区域分配的显示空间大小，默认值由浏览器决定。

      ③VALUE：提供输入区域的初始值。

下面的例子说明了文字与密码属性的使用。  

      <form action="/cgi—bin/post—query"    method="POST">

       您的姓名:<input type="text" name="姓名"><br>

       您的主页的网址:<input type=“text” name=“网址”  value="http://"><br>

       密码:<input type="password" name="密码"><br>

      <input type="submit" value="发送">

      <input type="reset" value="重设">

            </form>

（2）复选框与单选框

 INPUT元素支持的另外两个TYPE属性就是复选框（Checkbox）和单选框（Radio Button），其对应的TYPE属性值为CHECKBOX和RADIO。如果要将复选框或单选框初始化为己选中，则可以在INPUT元素中使用CHECKED属性。       

   例1：复选框。

<form action="/cgi-bin/post-query" method="POST">

<input type="checkbox" name="fruitl">柠檬<p>

<input type="cheokbox" name="fruit2" checked>苹果<p>

<input type="checkbox" name="fruit3">香蕉<p>

<input type="checkbox" name="fruit4">橘子<p>

<input type="submit"><input type="reset">

例2：单选框。

<input type="radio" name="fruit">~宁檬<p>

<input type="radio" name="fruit">苹果<p>

<input type="radio" name="fruit" checked>香蕉<p>

<input type="radio" name="fruit">橘子<p>

<input type="submit"><input type="reset">

      </form>

（3）提交与重置组件

TYPE属性的另外两个可选值分别是SUBMIT和RESET，它们分别用来提交表单数据和重新初始化表单域，在前面的例子中已经使用了这两种TYPE值。  

     4．文本框

当用户的输入文本超过一行时，可以使用文本框。文本框由TEXTAREA元素定义，其常用属性有三个：  

    （1）NAME  规定文本框的名字。

    （2）ROWS  定义文本框的行数。

    （3）COLS  定义文本框的列数。

其使用格式为：  

 <textarea name=name  rows=number  cols=number>文本框中的内容….</textarea>

对于文本框中较长的行，可以设置文本是否进行换行。文本换行由WRAP属性规定，WRAP=OFF时，表示不换行；WRAP=ON时，表示软换行（即显示时换行，但实际发送时不换行）；WRAP=HARD时，表示硬换行（即插入回车符）。  

下面的实例设计了一个10行、30列、采用硬换行的文本框。  

<form action="/cgi-bin/post-query" method="POST">

<textarea wrap="hard" name="comment" rows="10" cols="30">

</textarea>

<P><input type="submit"><input type="reset">

      </form>

     5.列表框

HTML还允许使用列表框，包括下拉式列表框和滚动式列表框两种。列表框用SELECT和OPTION两种元素实现。SELECT元素用来定义列表框，支持NAME、SIZE和MULTIPLE三种属性。NAME属性指定SELECT元素的名字，SIZE属性定义列表框的大小，  即用户—次可以看到的列表项的数目，使用MULTIPLE属性时，表示允许用户进行多项选择。OPTION元素定义列表框的各选项，可以使用属性SELECTED来表示预先已经选定，还可以使用属性VALUE来指定用户选择某项后的返回值。  具基本使用格式为：  

<select name="name-words">

<option>…

      </select>

请看下面实例，一个是下拉式列表，只允许用户进行单项选择；另—个是滚动式列表，允许用户进行多项选择。 

例1：下拉式列表。  

<form action="/cgi-bin/post-query" method="POST">

<select name="动物">

<option selected>狮子

<option>大象

<option>老虎

</select><p>

<input type="submit"><input type="reset">

      </form>

例2：滚动式列表。  

<form action="/cgi-bin/post-query" method="POST">

<select name="动物" size="4"  multiple>

<option>大象

<option selected>狮子

<option>水牛

<option>老虎

<option value="my-Favorite">猎豹

</select><p>

<input type="submit"><input type="reset">

      </form>

数据传输方式：

表单查询METHOD=GET

如果表单处理很简单，所提交的数据很少并且该数据的安全性并不重要，那么采用GET方式比较好，该方式可以实现用最简单的方法从客户端向服务器传输数据。 

        表单提交METHOD=POST

POST方式输入的请求串长度不受限制，并且在浏览器的请求地址内也看不到用户的输入信息。  

作业：

1、表单的作用是什么？

2、HTML表单中如何实现复选框与单选框？

3、如何实现下拉式列表和滚动式列表？