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

📄 0041.htm

📁 新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑
💻 HTM
字号:
🔍 
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>表单</strong></big></p>
<div align="right">---摘自《网页设计师》</div>

    <font color="#008000">◇ 基本语法</font> 
    <p> 
    表单的基本语法 
    <dl> 
      <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> 
      <p><tt>*=GET, POST</tt></p> 
    </dl> 
    <p>　</p>
    <p><!------Input Basic------->
    </p>
    表单中提供给用户的输入形式
    <dl>
      <tt>&lt;input type=* name=**&gt;</tt> 
      <p><tt>*=text, password, checkbox, radio, image, hidden, submit, reset</tt></p> 
      <p><tt>**=Symbolic Name for CGI script</tt></p> 
    </dl> 
    <p>　</p>
    <p><!--################## Text & Passwd ########################-->
    <a name="text"></a></p> 
    <font color="#008000">◇ 文字输入和密码输入</font> 
    <p><!------Text & Password-------> 
    <tt>*=text, password</tt></p> 
    &lt;input type=*&gt;<br> 
    &lt;input type=* value=**&gt; 
    <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=&quot;发送&quot;&gt;&lt;input type=reset value=&quot;重设&quot;&gt;
&lt;/form&gt;

</pre> 
    <p>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p>您的姓名: <input name="姓名" size="20"><br> 
      您的主页的网址: <input name="网址" value="http://" size="20"><br> 
      密码: <input name="密码" type="password" value size="20"><br> 
      <input type="submit" value="发送"><input type="reset" value="重设"></p> 
    </form> 
    <p>　</p>
    <p><!------Text & Password -- Size, Max ------->
    </p>
    &lt;input type=* size=**&gt;<br> 
    &lt;input type=* maxlength=**&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><input name="a01" size="40"><br>
      <input maxLength="5" name="a02" size="20"><br>
      <input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p><!--################## Checkbox & Radio ########################-->
    <a name="check"></a></p> 
    <font color="#008000">◇ 复选框(Checkbox) 和 单选框(RadioButton)</font> 
    <p><!------Checkbox-------> 
    </p> 
    &lt;input type=checkbox&gt;<br> 
    &lt;input type=checkbox checked&gt;<br> 
    &lt;input type=checkbox value=**&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><input name="水果1" type="checkbox" value="ON">Banana</p>
      <p><input CHECKED name="水果2" type="checkbox" value="ON">Apple</p>
      <p><input name="水果3" type="checkbox" value="橘子">Orange</p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p><!------Checkbox------->
    </p>
    &lt;input type=radio value=**&gt;<br> 
    &lt;input type=radio value=** checked&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><input name="水果" type="radio">Banana</p>
      <p><input CHECKED name="水果" type="radio">Apple</p>
      <p><input name="水果" type="radio" value="橘子">Orange</p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p><!--################## Image ########################-->
    <a name="image"></a></p> 
    <font color="#008000">◇ 图象坐标</font> 
    <p><b>在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！</b></p> 
    &lt;input type=image src=url&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><input height="64" name="face" src="f.gif" type="image" width="64"></p>
      <p><input CHECKED name="zoom" type="radio" value="2">x2 <input name="zoom" type="radio" value="4">x4  
      <input name="zoom" type="radio" value="6">x6</p> 
      <p><input type="reset" value="重置"></p> 
    </form> 
    <p>　</p>
    <p><!--################## Hidden ########################-->
    <a name="hide"></a></p> 
    <font color="#008000">◇ 隐藏表单的元素</font>&nbsp;
    <p>
    &lt;input type=hidden value=*&gt;</p> 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <input name="add" type="hidden" value="hoge@hoge.jp">
      <p>Here is a hidden element.</p> 
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p> 
    </form> 
    <p>　</p>
    <p><!--################## Select ########################-->
    <a name="select"></a></p> 
    <font color="#008000">◇ 列表框(Selectable Menu)</font> 
    <p><!------Basic-------> 
    </p> 
    基本语法 
    <dl> 
      &lt;select name=*&gt;<br> 
      &lt;option&gt; ...<br> 
      &lt;/select&gt; 
    </dl> 
    <p><!------select & option-------> 
    </p> 
    &lt;option selected&gt;<br> 
    &lt;option value=**&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><select name="fruits" size="1">
        <option>Banana</option>
        <option selected>Apple</option>
        <option value="My_Favorite">Orange</option>
      </select></p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p><!------size & multiple------->
    </p>
    &lt;select size=**&gt; 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><select name="fruits" size="3">
        <option>Banana</option>
        <option selected>Apple</option>
        <option value="My_Favorite">Orange</option>
        <option>Peach</option>
      </select></p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p><!------multiple------->
    </p>
    &lt;select size=** multiple&gt; 
    <b> 
    <p>注意，是用 Ctrl 键配合鼠标实现多选。<br> 
    (和 MS-WINDOWS 的 File Manager 一样)</b></p> 
    <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> 
    <form action="../cgi-bin/post-query" method="post"> 
      <p><select multiple name="fruits" size="3"> 
        <option selected>Banana</option> 
        <option selected>Apple</option> 
        <option value="My_Favorite">Orange</option> 
        <option selected>Peach</option> 
      </select></p> 
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p> 
    </form> 
    <p>　</p>
    <font color="#008000">◇ 文本区域&nbsp;</font>
    <p>
    &lt;textarea name=* rows=** cols=**&gt; ... &lt;textarea&gt;</p> 
    <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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><textarea cols="60" name="comment" rows="5"></textarea></p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p><!------Word Wrapping Off------->
    <a name="wrap"></a>对于很长的行是否进行换行的设置(Word  
    Wrapping) <img alt="netscape.gif (168 bytes)" height="14" src="images/netscape.gif" width="80"></p> 
    &lt;textarea wrap=off&gt; ... &lt;/textarea&gt; 
    <dl> 
      <dd>不换行，是缺省设置。</dd> 
    </dl> 
    <p><!------Word Wrapping Soft-------> 
    &lt;textarea wrap=soft&gt; ... &lt;/textarea&gt;</p> 
    <p>“软换行”，好象 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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><textarea cols="25" name="comment" rows="5"></textarea></p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p><!------Word Wrapping Hard------->
    </p>
    &lt;textarea wrap=hard&gt; ... &lt;/textarea&gt; 
    <p>“硬换行”，好象 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>　</p>
    <form action="../cgi-bin/post-query" method="post">
      <p><textarea cols="25" name="comment" rows="5" wrap="hard"></textarea></p>
      <p><input type="submit" value="提交查询内容"><input type="reset" value="重置"></p>
    </form>
    <p>　</p>
    <p>(未完，请继续)

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>

⌨️ 快捷键说明

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