◇ 基本語法
表單的基本語法
<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>
<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)
<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>
|