📄 form.html
字号:
<html>
<head>
<title>黄金书屋 - INTERNET 教室 - HTML 语言教程</title>
</head>
<body>
<h1 ALIGN="CENTER">表单(FORM)标记(TAGS)</h1>
<center><p>
<hr></p></center>
<p><!--################## Basic ########################--><a NAME="basic"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 基本语法</h2>
<p><!------Form Basic-------></p>
<h3>表单的基本语法</h3>
<dl>
<h3><tt><form action="url" method=*><br>
... <br>
... <br>
<input type=submit> <input type=reset><br>
</form> </tt></h3>
<p><tt>*=GET, POST </tt></p>
</dl>
<pre>
</pre>
<p><!------Input Basic-------></p>
<h3>表单中提供给用户的输入形式</h3>
<dl>
<h3><tt><input type=* name=**></tt></h3>
<p><tt>*=text, password, checkbox, radio, image, hidden, submit, reset</tt></p>
<p><tt> **=Symbolic Name for CGI script </tt></p>
</dl>
<pre>
</pre>
<p><!--################## Text & Passwd ########################--><a NAME="text"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 文字输入和密码输入</h2>
<p><!------Text & Password-------><tt>*=text, password</tt> </p>
<h3><input type=*><br>
<input type=* value=**></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/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></p>
<pre>
</pre>
<p><!------Text & Password -- Size, Max -------></p>
<h3><input type=* size=**><br>
<input type=* maxlength=**></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/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></p>
<pre>
</pre>
<p><!--################## Checkbox & Radio ########################--><a NAME="check"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 复选框(Checkbox) 和 单选框(RadioButton) </h2>
<p><!------Checkbox-------></p>
<h3><input type=checkbox><br>
<input type=checkbox checked><br>
<input type=checkbox value=**></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST">
<input type="checkbox" name="水果1">Banana</p>
<p> <input type="checkbox" name="水果2" checked>Apple</p>
<p> <input type="checkbox" name="水果3" value="橘子">Orange</p>
<p> <input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!------Checkbox-------></p>
<h3><input type=radio value=**><br>
<input type=radio value=** checked></h3>
<pre>
<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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST">
<input type="radio" name="水果">Banana</p>
<p> <input type="radio" name="水果" checked>Apple</p>
<p> <input type="radio" name="水果" value="橘子">Orange</p>
<p> <input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!--################## Image ########################--><a NAME="image"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 图象坐标 </h2><p>
<b>在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！</b>
<h3><input type=image src=url></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><input type="image" src="f.gif" tppabs="http://www.yessir.net/html/f.gif" name="face" WIDTH="64" HEIGHT="64"></p>
<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>
<p> <input type="reset"></form></p>
<pre>
</pre>
<p><!--################## Hidden ########################--><a NAME="hide"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 隐藏表单的元素
</h2>
<h3><input type=hidden value=*></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><input type="hidden" name="add" value="hoge@hoge.jp">Here
is a hidden element. </p>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!--################## Select ########################--><a NAME="select"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 列表框(Selectable Menu) </h2>
<p><!------Basic-------></p>
<h3>基本语法</h3>
<dl>
<h3><select name=*><br>
<option> ...<br>
</select> </h3>
</dl>
<p><!------select & option-------></p>
<h3><option selected><br>
<option value=**></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><select name="fruits"><option>Banana
<option selected>Apple <option value="My_Favorite">Orange </select></p>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!------size & multiple-------></p>
<h3><select size=**></h3>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/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>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!------multiple-------></p>
<h3><select size=** multiple></h3>
<b>注意，是用 Ctrl 键配合鼠标实现多选。<br>
(和 MS-WINDOWS 的 File Manager 一样)</b>
<pre><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>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/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>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!--################## Textarea ########################--><a NAME="textarea"></a></p>
<h2><img SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20" ALIGN="TOP"> 文本区域</h2>
<h3><textarea name=* rows=** cols=**> ... <textarea></h3>
<pre><form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>
</pre>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><textarea name="comment" rows="5" cols="60"></textarea></p>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!------Word Wrapping Off-------><a NAME="wrap"></a></p>
<h3>对于很长的行是否进行换行的设置(Word Wrapping) <img SRC="netscape.gif" tppabs="http://www.yessir.net/html/netscape.gif" HEIGHT="14" WIDTH="80"></h3>
<h3><textarea wrap=off> ... </textarea></h3>
<dl>
<dd>不换行，是缺省设置。</dd>
</dl>
<p><!------Word Wrapping Soft-------></p>
<h3><textarea wrap=soft> ... </textarea></h3>
“软换行”，好象 MS－WORD 里的“软回车”。
<dl>
<dd><tt><form action=/cgi-bin/post-query method=POST><br>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P><br>
<input type=submit><input type=reset><br>
</form></tt><br>
</dd>
</dl>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><textarea wrap="soft" name="comment" rows="5" cols="25"></textarea></p>
<p><input type="submit"><input type="reset"></form></p>
<p><!------Word Wrapping Hard-------></p>
<h3><textarea wrap=hard> ... </textarea></h3>
“硬换行”，好象 MS－WORD 里的“硬回车”。
<dl>
<dd><tt><form action=/cgi-bin/post-query method=POST><br>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P><br>
<input type=submit><input type=reset><br>
</form></tt><br>
</dd>
</dl>
<p><form action="http://www.yessir.net/cgi-bin/post-query" tppabs="http://www.yessir.net/cgi-bin/post-query" method="POST"><textarea wrap="hard" name="comment" rows="5" cols="25"></textarea></p>
<p><input type="submit"><input type="reset"></form></p>
<pre>
</pre>
<p><!--################## (^^) Jump & Add (^^) ########################-->
<hr><a HREF="../../tppmsgs/msgs0.htm#1" tppabs="http://ncdesign.kyushu-id.ac.jp/"><img SRC="angel-homeg.gif" tppabs="http://www.yessir.net/html/angel-homeg.gif" ALT="NCD HOME" HSPACE="3" VSPACE="10" BORDER="0" HEIGHT="46" WIDTH="55" ALIGN="LEFT"></a>
<b><a HREF="../../tppmsgs/msgs0.htm#2" tppabs="http://www.yessir.net/html_design.html">HTML
Design Guide Main Page<br>
<nobr></a></b><font FACE="'Times New Roman', Arial"><font SIZE="-1"><a HREF="../../tppmsgs/msgs0.htm#8" tppabs="http://www.yessir.net/html/html_design.html#content">Contents</a>
|| <a HREF="page.html" tppabs="http://www.yessir.net/html/page.html">Page</a>
|| <a HREF="font.html" tppabs="http://www.yessir.net/html/font.html">Font</a>
|| <a HREF="text_style.html" tppabs="http://www.yessir.net/html/text_style.html">Text
Style</a> || <a HREF="image.html" tppabs="http://www.yessir.net/html/image.html">Image</a>
|| <a HREF="form.html" tppabs="http://www.yessir.net/html/form.html">Form</a>
|| <a HREF="table.html" tppabs="http://www.yessir.net/html/table.html">Table</a>
|| <a HREF="table02.html" tppabs="http://www.yessir.net/html/table02.html">Table
Advanced</a> <br>
|| <a HREF="frame.html" tppabs="http://www.yessir.net/html/frame.html">Frames</a>
|| <a HREF="marquee.html" tppabs="http://www.yessir.net/html/marquee.html">Marquee</a>
|| <a HREF="inline.html" tppabs="http://www.yessir.net/html/inline.html">Alternative
Inline Elements</a> <br>
</font><font SIZE="-2"><a HREF="tag-index.html" tppabs="http://www.yessir.net/html/tag-index.html">Tag
Index</a> || <a HREF="new.html" tppabs="http://www.yessir.net/html/new.html">What's
New</a></font><font SIZE="-1"> </font></font><br clear="all">
</p>
<p>Network Communication Design<br>
<a HREF="../../tppmsgs/msgs0.htm#1" tppabs="http://ncdesign.kyushu-id.ac.jp/">http://ncdesign.kyushu-id.ac.jp/<br>
</a>C&P 1994-1996 Yuriko Ienaga <font SIZE="-1"><a HREF="mailto:v91102@vgenda.kyushu-id.ac.jp">v91102@vgenda.kyushu-id.ac.jp</a></font>
<!--################## (^^) END (^^) ########################--></p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -