⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 表单 标记.htm

📁 HTML语言的基础教程
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://www.zjou.edu.cn/te/html/form.html -->
<HTML><HEAD><TITLE>HTML 语言教程</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY>
<H1 align=center>表单(FORM)标记(TAGS)</H1>
<CENTER>
<P>
<HR>

<P></P></CENTER>
<P><!--################## Basic ########################--><A 
name=basic></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 基本语法</H2>
<P><!------Form Basic-------></P>
<H3>表单的基本语法</H3>
<DL>
  <H3><TT>&lt;form action="url" method=*&gt;<BR>... <BR>... <BR>&lt;input 
  type=submit&gt; &lt;input type=reset&gt;<BR>&lt;/form&gt; </TT></H3>
  <P><TT>*=GET, POST </TT></P></DL><PRE></PRE>
<P><!------Input Basic-------></P>
<H3>表单中提供给用户的输入形式</H3>
<DL>
  <H3><TT>&lt;input type=* name=**&gt;</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 height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 文字输入和密码输入</H2>
<P><!------Text & Password-------><TT>*=text, password</TT> </P>
<H3>&lt;input type=*&gt;<BR>&lt;input type=* value=**&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
您的姓名:
&lt;input type=text name=姓名&gt;&lt;br&gt;
您的主页的网址:
&lt;input type=text name=网址 value=http://&gt;&lt;br&gt;
密码:
&lt;input type=password name=密码&gt;&lt;br&gt;
&lt;input type=submit value="发送"&gt;&lt;input type=reset value="重设"&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query">您的姓名: <INPUT name=姓名><BR>您的主页的网址: <INPUT 
value=http:// name=网址><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>&lt;input type=* size=**&gt;<BR>&lt;input type=* maxlength=**&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;input type=text name=a01 size=40&gt;&lt;br&gt;
&lt;input type=text name=a02 maxlength=5&gt;&lt;br&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><INPUT size=40 name=a01><BR><INPUT 
maxLength=5 name=a02><BR><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!--################## Checkbox & Radio ########################--><A 
name=check></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 复选框(Checkbox) 和 单选框(RadioButton) </H2>
<P><!------Checkbox-------></P>
<H3>&lt;input type=checkbox&gt;<BR>&lt;input type=checkbox 
checked&gt;<BR>&lt;input type=checkbox value=**&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;input type=checkbox name=水果1&gt;
        Banana&lt;p&gt;
&lt;input type=checkbox name=水果2 checked&gt;
        Apple&lt;p&gt;
&lt;input type=checkbox name=水果3 value=橘子&gt;
        Orange&lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><INPUT type=checkbox name=水果1>Banana</P>
<P><INPUT type=checkbox CHECKED name=水果2>Apple</P>
<P><INPUT type=checkbox value=橘子 name=水果3>Orange</P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!------Checkbox-------></P>
<H3>&lt;input type=radio value=**&gt;<BR>&lt;input type=radio value=** 
checked&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;input type=radio name=水果&gt;
        Banana&lt;p&gt;
&lt;input type=radio name=水果 checked&gt;
        Apple&lt;p&gt;
&lt;input type=radio name=水果 value=橘子&gt;
        Orange&lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><INPUT type=radio name=水果>Banana</P>
<P><INPUT type=radio CHECKED name=水果>Apple</P>
<P><INPUT type=radio value=橘子 name=水果>Orange</P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!--################## Image ########################--><A 
name=image></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 图象坐标 </H2>
<P><B>在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！</B> 
<H3>&lt;input type=image src=url&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;input type=image name=face src=f.gif&gt;&lt;p&gt;
&lt;input type=radio name=zoom value=2 checked&gt;x2
&lt;input type=radio name=zoom value=4&gt;x4
&lt;input type=radio name=zoom value=6&gt;x6&lt;p&gt;
&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><INPUT type=image height=64 width=64 
src="表单 标记.files/f.gif" name=face tppabs="http://webclass/html/f.gif"></P>
<P><INPUT type=radio CHECKED value=2 name=zoom>x2 <INPUT type=radio value=4 
name=zoom>x4 <INPUT type=radio value=6 name=zoom>x6</P>
<P><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!--################## Hidden ########################--><A 
name=hide></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 隐藏表单的元素 </H2>
<H3>&lt;input type=hidden value=*&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;input type=hidden name=add value=hoge@hoge.jp&gt;
Here is a hidden element. &lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><INPUT type=hidden value=hoge@hoge.jp 
name=add>Here is a hidden element. </P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!--################## Select ########################--><A 
name=select></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 列表框(Selectable Menu) </H2>
<P><!------Basic-------></P>
<H3>基本语法</H3>
<DL>
  <H3>&lt;select name=*&gt;<BR>&lt;option&gt; ...<BR>&lt;/select&gt; </H3></DL>
<P><!------select & option-------></P>
<H3>&lt;option selected&gt;<BR>&lt;option value=**&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;select name=fruits&gt;
        &lt;option&gt;Banana
        &lt;option selected&gt;Apple
        &lt;option value=My_Favorite&gt;Orange
&lt;/select&gt;&lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><SELECT name=fruits><OPTION>Banana<OPTION 
  selected>Apple<OPTION value=My_Favorite>Orange</OPTION></SELECT></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!------size & multiple-------></P>
<H3>&lt;select size=**&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;select name=fruits size=3&gt;
        &lt;option&gt;Banana
        &lt;option selected&gt;Apple
        &lt;option value=My_Favorite&gt;Orange
        &lt;option&gt;Peach
&lt;/select&gt;&lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><SELECT size=3 
  name=fruits><OPTION>Banana<OPTION selected>Apple<OPTION 
  value=My_Favorite>Orange<OPTION>Peach</OPTION></SELECT></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!------multiple-------></P>
<H3>&lt;select size=** multiple&gt;</H3><B>注意，是用 Ctrl 键配合鼠标实现多选。<BR>(和 
MS-WINDOWS 的 File Manager 一样)</B> <PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;select name=fruits size=3 multiple&gt;
        &lt;option selected&gt;Banana
        &lt;option selected&gt;Apple
        &lt;option value=My_Favorite&gt;Orange
        &lt;option selected&gt;Peach
&lt;/select&gt;&lt;p&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;
</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><SELECT multiple size=3 name=fruits><OPTION 
  selected>Banana<OPTION selected>Apple<OPTION value=My_Favorite>Orange<OPTION 
  selected>Peach</OPTION></SELECT></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!--################## Textarea ########################--><A 
name=textarea></A></P>
<H2><IMG height=20 alt=+ src="表单 标记.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 文本区域</H2>
<H3>&lt;textarea name=* rows=** cols=**&gt; ... &lt;textarea&gt;</H3><PRE>&lt;form action=/cgi-bin/post-query method=POST&gt;
&lt;textarea name=comment rows=5 cols=60&gt;
&lt;/textarea&gt;
&lt;P&gt;
&lt;input type=submit&gt;&lt;input type=reset&gt;
&lt;/form&gt;

</PRE>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><TEXTAREA name=comment rows=5 cols=60></TEXTAREA></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE>
<P><!------Word Wrapping Off-------><A name=wrap></A></P>
<H3>对于很长的行是否进行换行的设置(Word Wrapping) <IMG height=14 src="表单 标记.files/netscape.gif" 
width=80 tppabs="http://webclass/html/netscape.gif"></H3>
<H3>&lt;textarea wrap=off&gt; ... &lt;/textarea&gt;</H3>
<DL>
  <DD>不换行，是缺省设置。 </DD></DL>
<P><!------Word Wrapping Soft-------></P>
<H3>&lt;textarea wrap=soft&gt; ... &lt;/textarea&gt;</H3>“软换行”，好象 MS－WORD 
里的“软回车”。 
<DL>
  <DD><TT>&lt;form action=/cgi-bin/post-query method=POST&gt;<BR>&lt;textarea 
  wrap=soft name=comment rows=5 cols=25&gt; 
  &lt;/textarea&gt;&lt;P&gt;<BR>&lt;input type=submit&gt;&lt;input 
  type=reset&gt;<BR>&lt;/form&gt;</TT><BR></DD></DL>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><TEXTAREA name=comment rows=5 cols=25></TEXTAREA></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P>
<P><!------Word Wrapping Hard-------></P>
<H3>&lt;textarea wrap=hard&gt; ... &lt;/textarea&gt;</H3>“硬换行”，好象 MS－WORD 
里的“硬回车”。 
<DL>
  <DD><TT>&lt;form action=/cgi-bin/post-query method=POST&gt;<BR>&lt;textarea 
  wrap=hard name=comment rows=5 cols=25&gt; 
  &lt;/textarea&gt;&lt;P&gt;<BR>&lt;input type=submit&gt;&lt;input 
  type=reset&gt;<BR>&lt;/form&gt;</TT><BR></DD></DL>
<P>
<FORM action=http://cgi-bin/post-query method=post 
tppabs="http://cgi-bin/post-query"><TEXTAREA name=comment rows=5 wrap=hard cols=25></TEXTAREA></P>
<P><INPUT type=submit value=提交查询内容><INPUT type=reset value=重置></FORM></P><PRE></PRE><BR>
<HR>
<IMG height=58 alt="NCD HOME" hspace=3 src="表单 标记.files/angel-homeg.gif" 
width=69 align=left vspace=10 border=0> <A 
href="http://www.zjou.edu.cn/te/html/html.htm">(返回) HTML 语言教程：目录</A> 
<BR></BODY></HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -