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