HTML 05: 表单(FORM)标记(TAGS)

表单(FORM)标记(TAGS)

基本语法

表单的基本语法

<formaction="url"method=*>
...
...
<inputtype=submit><inputtype=reset>
</form>

*=GET,POST

表单中提供给用户的输入形式

<inputtype=*name=**>

*=text,password,checkbox,radio,image,hidden,submit,reset

**=SymbolicNameforCGIscript

文字输入和密码输入

*=text,password

<inputtype=*>
<inputtype=*value=**>

<formaction=/cgi-bin/post-querymethod=POST>
您的姓名:
<inputtype=textname=姓名><br>
您的主页的网址:
<inputtype=textname=网址value=http://><br>
密码:
<inputtype=passwordname=密码><br>
<inputtype=submitvalue="发送"><inputtype=resetvalue="重设">
</form>

您的姓名:
您的主页的网址:
密码:

<inputtype=*size=**>
<inputtype=*maxlength=**>

<formaction=/cgi-bin/post-querymethod=POST>
<inputtype=textname=a01size=40><br>
<inputtype=textname=a02maxlength=5><br>
<inputtype=submit><inputtype=reset>
</form>

复选框(Checkbox)和单选框(RadioButton)

<inputtype=checkbox>
<inputtype=checkboxchecked>
<inputtype=checkboxvalue=**>

<formaction=/cgi-bin/post-querymethod=POST>
<inputtype=checkboxname=水果1>
Banana<p>
<inputtype=checkboxname=水果2checked>
Apple<p>
<inputtype=checkboxname=水果3value=橘子>
Orange<p>
<inputtype=submit><inputtype=reset>
</form>

Banana

Apple

Orange

<inputtype=radiovalue=**>
<inputtype=radiovalue=**checked>

<formaction=/cgi-bin/post-querymethod=POST>
<inputtype=radioname=水果>
Banana<p>
<inputtype=radioname=水果checked>
Apple<p>
<inputtype=radioname=水果value=橘子>
Orange<p>
<inputtype=submit><inputtype=reset>
</form>

Banana

Apple

Orange

图象坐标

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

<inputtype=imagesrc=url>

<formaction=/cgi-bin/post-querymethod=POST>
<inputtype=imagename=facesrc=f.gif><p>
<inputtype=radioname=zoomvalue=2checked>x2
<inputtype=radioname=zoomvalue=4>x4
<inputtype=radioname=zoomvalue=6>x6<p>
<inputtype=reset>
</form>

x2x4x6

隐藏表单的元素

<inputtype=hiddenvalue=*>

<formaction=/cgi-bin/post-querymethod=POST>
<inputtype=hiddenname=addvalue=hoge@hoge.jp>
Hereisahiddenelement.<p>
<inputtype=submit><inputtype=reset>
</form>

Hereisahiddenelement.

列表框(SelectableMenu)

基本语法

<selectname=*>
<option>...
</select>

<optionselected>
<optionvalue=**>

<formaction=/cgi-bin/post-querymethod=POST>
<selectname=fruits>
<option>Banana
<optionselected>Apple
<optionvalue=My_Favorite>Orange
</select><p>
<inputtype=submit><inputtype=reset>
</form>

Banana
Apple
Orange

<selectsize=**>

<formaction=/cgi-bin/post-querymethod=POST>
<selectname=fruitssize=3>
<option>Banana
<optionselected>Apple
<optionvalue=My_Favorite>Orange
<option>Peach
</select><p>
<inputtype=submit><inputtype=reset>
</form>

Banana
Apple
Orange
Peach

<selectsize=**multiple>

注意，是用Ctrl键配合鼠标实现多选。
(和MS-WINDOWS的FileManager一样)

<formaction=/cgi-bin/post-querymethod=POST>
<selectname=fruitssize=3multiple>
<optionselected>Banana
<optionselected>Apple
<optionvalue=My_Favorite>Orange
<optionselected>Peach
</select><p>
<inputtype=submit><inputtype=reset>
</form>

Banana
Apple
Orange
Peach

文本区域

<textareaname=*rows=**cols=**>...<textarea>

<formaction=/cgi-bin/post-querymethod=POST>
<textareaname=commentrows=5cols=60>
</textarea>
<P>
<inputtype=submit><inputtype=reset>
</form>

对于很长的行是否进行换行的设置(WordWrapping)

<textareawrap=off>...</textarea>

不换行，是缺省设置。

<textareawrap=soft>...</textarea>

“软换行”，好象MS－WORD里的“软回车”。<formaction=/cgi-bin/post-querymethod=POST>
<textareawrap=softname=commentrows=5cols=25></textarea><P>
<inputtype=submit><inputtype=reset>
</form>

<textareawrap=hard>...</textarea>

“硬换行”，好象MS－WORD里的“硬回车”。<formaction=/cgi-bin/post-querymethod=POST>
<textareawrap=hardname=commentrows=5cols=25></textarea><P>
<inputtype=submit><inputtype=reset>
</form>