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