HTML参考手册-表单标记

表单标记

1、基本语法
①表单的基本语法:

标签用于为用户输入创建 HTML 表单。

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

HTML参考手册-表单标记_第1张图片

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

附图
3、复选框和单选框

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

HTML参考手册-表单标记_第2张图片
②单选框

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

HTML参考手册-表单标记_第3张图片
4、图像坐标:

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

HTML参考手册-表单标记_第4张图片
5、隐藏表单元素:

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

附图
6、列表框
基本语法:

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

HTML参考手册-表单标记_第5张图片
② size规定下拉列表中可见选项的数目。

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

HTML参考手册-表单标记_第6张图片
③multiple规定可选择多个选项。

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

HTML参考手册-表单标记_第7张图片
7、文本区域
——不换行,是缺省设置。
——“软换行”,好象 MS-WORD 里的“软回车”。

<form action= method=POST>
  <textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
  <input type=submit><input type=reset>
</form>

HTML参考手册-表单标记_第9张图片
——“硬换行”,好象 MS-WORD 里的“硬回车”。

<form action= method=POST>
  <textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
  <input type=submit><input type=reset>
</form>

HTML参考手册-表单标记_第10张图片

你可能感兴趣的:(HTML参考手册,表单标记,html)