◇ 基本语法

表单的基本语法

    <form action="url" method=*>
     ...
    ...
   <input type=submit> <input type=reset>
   </form>

表单中提供给用户的输入形式

   <input type=* name=**>

   *=text, password, checkbox, radio, image, hidden, submit, reset

   **=Symbolic Name for CGI script

◇ 文字输入和密码输入

   *=text, password
   <input type=*>
   <input type=* 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>
   您的姓名:
   您的主页的网址:
   密码:
   <input type=* size=**>
   <input type=* maxlength=**>
   <form action=/cgi-bin/post-query method=POST>
   <input type=text name=a01 size=40><br>
   <input type=text name=a02 maxlength=5><br>
   <input type=submit><input type=reset>
   </form>

◇ 复选框(Checkbox) 和 单选框(RadioButton)

   <input type=checkbox>
   <input type=checkbox checked>
   <input type=checkbox value=**>
   <form action=/cgi-bin/post-query method=POST>
   <input type=checkbox name=水果1>
        Banana<p>
   <input type=checkbox name=水果2 checked>
        Apple<p>
   <input type=checkbox name=水果3 value=橘子>
        Orange<p>
   <input type=submit><input type=reset>
   </form>
   <input type=radio value=**>
   <input type=radio value=** checked>
   <form action=/cgi-bin/post-query method=POST>
   <input type=radio name=水果>
        Banana<p>
  <input type=radio name=水果 checked>
        Apple<p>
  <input type=radio name=水果 value=橘子>
        Orange<p>
  <input type=submit><input type=reset>
  </form>

◇ 图象坐标

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！
    <input type=image src=url>
    <form action=/cgi-bin/post-query method=POST>
    <input type=image name=face src=f.gif><p>
    <input type=radio name=zoom value=2 checked>x2
   <input type=radio name=zoom value=4>x4
   <input type=radio name=zoom value=6>x6<p>
   <input type=reset>
   </form>

◇ 隐藏表单的元素

   <input type=hidden value=*>
   <form action=/cgi-bin/post-query method=POST>
   <input type=hidden name=add value=hoge@hoge.jp>
     Here is a hidden element. <p>
   <input type=submit><input type=reset>
   </form>

◇ 列表框(Selectable Menu)

基本语法

   <select name=*>
   <option> ...
   </select>
   <option selected>
   <option value=**>
   <form action=/cgi-bin/post-query method=POST>
   <select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
   </select><p>
   <input type=submit><input type=reset>
   </form>
  <select size=**>
  <form action=/cgi-bin/post-query method=POST>
  <select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
  </select><p>
  <input type=submit><input type=reset>
  </form>
  <select size=** multiple>

注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)

   <form action=/cgi-bin/post-query method=POST>
   <select name=fruits size=3 multiple>
        <option selected>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option selected>Peach
   </select><p>
   <input type=submit><input type=reset>
   </form>
　
◇ 文本区域

   <textarea name=* rows=** cols=**> ... <textarea>
   <form action=/cgi-bin/post-query method=POST>
   <textarea name=comment rows=5 cols=60>
   </textarea>
   <P>
   <input type=submit><input type=reset>
   </form>
对于很长的行是否进行换行的设置(Word Wrapping) netscape.gif (168 bytes)
   <textarea wrap=off> ... </textarea>

    不换行，是缺省设置。

   <textarea wrap=soft> ... </textarea>

“软换行”，好象 MS－WORD 里的“软回车”。

    <form action=/cgi-bin/post-query method=POST>
    <textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
    <input type=submit><input type=reset>
    </form>

   <textarea wrap=hard> ... </textarea>

“硬换行”，好象 MS－WORD 里的“硬回车”。

    <form action=../cgi-bin/post-query method=POST>
    <textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
    <input type=submit><input type=reset>
    </form>