表单

HTML

previous page next page

表单(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 [email protected]>
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>