1、基本语法
①表单的基本语法:
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
②表单中提供给用户的输入形式:
=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script
2、文字和密码输入:=text, password
①
<input type=*>
<input type=* value=**>
<form action= 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= 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>
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
①复选框
<form action= 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= 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>
<form action="post-query" method="post">
<input type="image" src="images/01.jpg" name="face" />
<input type="radio" name="zoom" value="2" checked="checked" />
x2
<input type="radio" name="zoom" value="4" />
x4
<input type="radio" name="zoom" value="6" />
x6
<input name="reset" type="reset" />
</form>
<form action= method=POST>
<input type=hidden name=add value=[email protected]>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>
<select name=*>
<option> ...
</select>
<option selected>
<option value=**>
①选择框
<form action= 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= 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= 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>
7、文本区域
① 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
<form action= method=POST>
<textarea name=comment rows=5 cols=60></textarea><P>
<input type=submit><input type=reset>
</form>
②对于很长的行是否进行换行的设置(Word Wrapping)
——不换行,是缺省设置。
——“软换行”,好象 MS-WORD 里的“软回车”。
<form action= method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
③
——“硬换行”,好象 MS-WORD 里的“硬回车”。
<form action= method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>