html 製做表單

    

表單(FORM)標記(TAGS)

---

基本語法

表單的基本語法

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

*=GET, POST

表單中提供給用戶的輸入形式

<input type=* name=**>

*=text, password, checkbox, radio, p_w_picpath, 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=p_w_picpath src=url>

<form action=/cgi-bin/post-query method=POST>
<input type=p_w_picpath 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>

Banana Apple Orange

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

Banana Apple Orange Peach

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

Banana Apple Orange Peach

文本區域

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

[返回]