?? 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" 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" 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=/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=/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" 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=/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=/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" 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=/cgi-bin/post-query method=POST><INPUT type=image src=f.gif name=face></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" 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=/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" 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=/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=/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=/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" 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=/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" 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=/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=/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="http://ncdesign.kyushu-id.ac.jp/"><IMG SRC="angel-homeg.gif" ALT="NCD HOME" HSPACE=3 VSPACE=10 BORDER=0 HEIGHT=46 WIDTH=55 ALIGN=LEFT></A>
<B><A HREF="../html_design.html">HTML
Design Guide Main Page<BR>
<NOBR></A></B><FONT FACE="'Times New Roman', Arial"><FONT SIZE=-1><A HREF="html_design.html#content">Contents</A>
|| <A HREF="page.html">Page</A>
|| <A HREF="font.html">Font</A>
|| <A HREF="text_style.html">Text
Style</A> || <A HREF="image.html">Image</A>
|| <A HREF="form.html">Form</A>
|| <A HREF="table.html">Table</A>
|| <A HREF="table02.html">Table
Advanced</A> <BR>
|| <A HREF="frame.html">Frames</A>
|| <A HREF="marquee.html">Marquee</A>
|| <A HREF="inline.html">Alternative
Inline Elements</A> <BR>
</FONT><FONT SIZE=-2><A HREF="tag-index.html">Tag
Index</A> || <A HREF="new.html">What's
New</A></FONT><FONT SIZE=-1> </FONT></FONT><BR clear=all>
</P>
<P>Network Communication Design<BR>
<A HREF="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 + -