html form标记：表单

基本语法
表单的基本语法


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



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) 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">


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