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

📄 html5.htm

📁 HTML的入门教程
💻 HTM
字号:
🔍 
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>HTML语言教程之五：表单(FORM)标记</TITLE>
<META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot">
<link rel="stylesheet" href="../../cpcw.css"></HEAD>
<BODY LINK="#0000ff" VLINK="#800080" background="../bg.gif">
<table width="85%" border="0" align="center">
  <tr bgcolor="#FFFFFF"> 
    <td>
      <p align="CENTER"><font size="6" lang="ZH-CN"><font color="#FF3333" class="title"><b>HTML语言教程之五：表单(FORM)标记</b></font></font></p>
      <p align="JUSTIFY"></p>
      <hr>
      <h1 align=left><!--################## Basic ########################--><a name="basic"></a></h1>
      <h2> 基本语法</h2>
      <p><!------Form Basic-------></p>
      <h3>表单的基本语法</h3>
      <dl> 
        <h3><tt>&lt;form action=&quot;url&quot; 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> 文字输入和密码输入</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=/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="发送" name="submit">
        <input type=reset value="重设" name="reset">
      </form>
      <p></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=/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 name="submit">
        <input type=reset name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## Checkbox & Radio ########################--><a name="check"></a></p>
      <h2> 复选框(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=/cgi-bin/post-query method=POST>
        <input type=checkbox name=水果1>
        Banana
        <p></p>
        <p> 
          <input type=checkbox name=水果2 checked>
          Apple</p>
        <p> 
          <input type=checkbox name=水果3 value=橘子>
          Orange</p>
        <p> 
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></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=/cgi-bin/post-query method=POST>
        <input type=radio name=水果>
        Banana
        <p></p>
        <p> 
          <input type=radio name=水果 checked>
          Apple</p>
        <p> 
          <input type=radio name=水果 value=橘子>
          Orange</p>
        <p> 
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## Image ########################--><a name="image"></a></p>
      <h2> 图象坐标 </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=/cgi-bin/post-query method=POST>
        <input type=image src=f.gif name=face>
        <p></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 name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## Hidden ########################--><a name="hide"></a></p>
      <h2> 隐藏表单的元素 </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=/cgi-bin/post-query method=POST>
        <input type=hidden name=add value=hoge@hoge.jp>
        Here is a hidden element. 
        <p></p>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## Select ########################--><a name="select"></a></p>
      <h2> 列表框(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=/cgi-bin/post-query method=POST>
        <select name=fruits>
          <option>Banana 
          <option selected>Apple 
          <option value=My_Favorite>Orange 
        </select>
        <p></p>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></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=/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>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></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=/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>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## Textarea ########################--><a name="textarea"></a></p>
      <h2> 文本区域</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=/cgi-bin/post-query method=POST>
        <textarea name=comment rows=5 cols=60></textarea>
        <p></p>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></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>&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=/cgi-bin/post-query method=POST>
        <textarea wrap=soft name=comment rows=5 cols=25></textarea>
        <p></p>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></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=/cgi-bin/post-query method=POST>
        <textarea wrap=hard name=comment rows=5 cols=25></textarea>
        <p></p>
        <p>
          <input type=submit name="submit">
          <input type=reset name="reset">
      </form>
      <p></p>
      <pre>
</pre>
      <p><!--################## (^^) Jump & Add (^^) ########################--> 
      <p><blink> </blink></p>
      <p align="CENTER"><a href="html1.htm">页面标记|</a>
        <a href="html2.htm">字体标记|</a>
        <a href="html3.htm">文字布局|</a>
        <a href="html4.htm">图像标记|</a>
        <a href="html5.htm">表单标记|</a>
        <a href="html6.htm">表格标记|</a>
        <a href="html7.htm">表格进阶|</a>
        <a href="html8.htm">多窗口|</a>
        <a href="html9.htm">移动文字|</a>
        <a href="html10.htm">多媒体</a><br>
        <a href="html4.htm">上一节</a> <a href="start.html">首页</a> <a href="html6.htm">下一节</a></p>
      </td>
  </tr>
</table>
</BODY>
</HTML>

⌨️ 快捷键说明

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