HTML 表单教程

表单的典型应用

–注册用户

–收集信息

–反馈信息

–为网站提供搜索工具

表单包含的控件

1、单行文本输入框(TEXT);

2、单选按钮(RADIO);

3、复选框(CHECKBOX);

4、重置按钮(RESET);

5、多行文本框(TEXTAREA);

6、密码框(PASSWORD);

7、下拉列表(SELECT);

8、提交按钮(SUBMIT)。

表单页面的基本结构

<FORM action=“http://www.sohu.com” method=“post”> …… </FORM>

ACTION	METHOD
指定提交后，由服务器上那个处理程序处理。	指定向服务器提交的方法:一般为post或get方法, post方法比较安全。
ACTION = “URL”	METHOD =“post或get”

表单元素的统一格式

<FORM name="form3" method="post" action="">     <INPUT type="checkbox" name="gen" value="男"     size="21“ maxlength=4 checked="checked">      …… </FORM>

表单元素逐一介绍：
1、文本框基本语法
<INPUT  type=“text ”  value="张三"  size="20">
示例：

<FORM name="form1" method="post" action="">  <P>名&nbsp;&nbsp;字：     <INPUT  type="text" value="张三" size="20">  </P>  …… </FORM>

2、密码框基本语法
<INPUT type=“password ”  value=“ 123456 ”  size=“22”>
示例：

<FORM name="form2" method="post" action="">  ……   <P>密&nbsp;&nbsp;码：      <INPUT value=“ 123456 ” type="password" size="22">  </P> </FORM>

3、单选按钮基本语法
<INPUT  type="radio" value="男" checked="checked">

<FORM name="form3" method="post" action=""> <BR>性别：   <INPUT name="gen" type="radio" value="男" checked>   <IMG src="images/Male.gif" width="23" height="21">男&nbsp;    …… </FORM>

4、复选框基本语法
<INPUT type=“checkbox” name="cb2" value="talk">
示例：

<FORM name="form4" method="post" action=""> …… <LABEL> <INPUT type="checkbox" name="cb2" value="talk"checked="checked"> </LABEL>聊天&nbsp;&nbsp; …… </FORM>

5、列表框基本语法
<select name=“指定列表名称” size=“行数”>
<option value=“可选项的值” selected>…</option>
<option value=“可选项的值”> …</option>
    ……
</select>
说明：
        size确定列表中可同时看到的行数。     
        selected默认被选中的可选项。
示例：

出生日期：   <INPUT name="byear" value="yyyy" size=4 maxlength=4 >   &nbsp;年   <SELECT name="bmon">     <OPTION value=" " selected>[选择月份] </OPTION>     <OPTION value=0>一月</OPTION>     <OPTION value=1>二月</OPTION>      ……   </SELECT>   月&nbsp;   <INPUT name="bday" value="dd" size=2 maxlength=2 >   日

6、按钮基本语法
<INPUT type="reset" name="Reset" value=" 重填 ">
示例：

<FORM name="form6" method="post" action="">   <P>     <INPUT type="reset" name="Reset" value=" 重填 ">  ……              <INPUT  type="button" name="cancel" value="取消">   </P> </FORM>

7、多行文本框基本语法
<TEXTAREA  name="textarea"    cols="40"    rows="6">
         文本框中的内容   
  </TEXTAREA>
示例：

<FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务   </TEXTAREA> …… </FORM>