清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程

# 表单(FORM)标记(TAGS)

## 基本语法

### 表单的基本语法

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

`*=GET, POST`

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

### `<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>

Banana

Apple

Orange

### <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>

Banana

Apple

Orange

## 图象坐标

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

### <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>

x2 x4 x6

## 隐藏表单的元素

### <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>

Here is a hidden element.

## 列表框(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)

### <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>`

HTML Design Guide Main Page
Contents || Page || Font || Text Style || Image || Form || Table || Table Advanced
|| Frames || Marquee || Alternative Inline Elements
Tag Index || What's New

Network Communication Design
http://www.newasp.net/
C&P 1994-2006 Xin Yun newasp.net@gmail.com