HTML 表单和输入

HTML 表单用于搜集不同类型的用户输入。

实例

文本域 (Text field)

   名：  
 姓：

密码域

用户：
密码：

请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。

（可以在本页底端找到更多实例。）

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（

）定义。

 ... input 元素 ...

输入

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

 First name:  
 Last name:

浏览器显示如下：

First name: Last name:

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

  Male 
  Female

浏览器显示如下：

Male Female

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

  I have a bike 
  I have a car

浏览器显示如下：

I have a bike I have a car

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

 Username:

浏览器显示如下：

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

更多实例

复选框

   我喜欢自行车：  
 我喜欢汽车：

单选按钮

;当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。

简单的下拉列表

另一个下拉列表

文本域(Textarea)

   This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. 
  The cat was playing in the garden.</pre>
          <!-- react-text: 2978 -->
          <!-- /react-text -->
          <p>创建按钮</p>
          <!-- react-text: 2981 -->
          <!-- /react-text -->
          <pre><html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html></pre>
          <!-- react-text: 2984 -->
          <!-- /react-text -->
          <p>Fieldset around data</p>
          <!-- react-text: 2987 -->
          <!-- /react-text -->
          <pre><!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框，说明您的浏览器太老了。</p> </body> </html></pre>
          <!-- react-text: 2990 -->
          <!-- /react-text -->
          <h3 class="line">
           <!-- react-text: 2993 -->表单实例
           <!-- /react-text --></h3>
          <!-- react-text: 2994 -->
          <!-- /react-text -->
          <p>带有输入框和确认按钮的表单</p>
          <!-- react-text: 2997 -->
          <!-- /react-text -->
          <pre><html> <body> <form action="/example/html/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> <p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p> </body> </html></pre>
          <!-- react-text: 3000 -->
          <!-- /react-text -->
          <p>带有复选框的表单</p>
          <!-- react-text: 3003 -->
          <!-- /react-text -->
          <pre><html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p> </body> </html></pre>
          <!-- react-text: 3006 -->
          <!-- /react-text -->
          <p>带有单选按钮的表单</p>
          <!-- react-text: 3009 -->
          <!-- /react-text -->
          <pre><html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br /> Female: <input type="radio" name="Sex" value="Female"> <br /> <input type ="submit" value ="Submit"> </form> <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p> </body> </html></pre>
          <!-- react-text: 3012 -->
          <!-- /react-text -->
          <p>从表单发送电子邮件</p>
          <!-- react-text: 3015 -->
          <!-- /react-text -->
          <pre><html> <body> <form action="MAILTO:php@php.cn" method="post" enctype="text/plain"> <h3>这个表单会把电子邮件发送到 PHP.cn</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 电邮：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 内容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html></pre>
          <!-- react-text: 3018 -->
          <!-- /react-text -->
          <h2 class="line">
           <!-- react-text: 3021 -->表单标签
           <!-- /react-text --></h2>
          <!-- react-text: 3022 -->
          <!-- /react-text -->
          <table>
           <thead>
            <tr class="firstRow">
             <th>标签</th>
             <th>描述</th>
            </tr>
           </thead>
           <tbody>
            <tr>
             <td><code><form></code></td>
             <td>定义供用户输入的表单</td>
            </tr>
            <tr>
             <td><code><input></code></td>
             <td>定义输入域</td>
            </tr>
            <tr>
             <td><code><textarea></code></td>
             <td>定义文本域 (一个多行的输入控件)</td>
            </tr>
            <tr>
             <td><code><label></code></td>
             <td>定义一个控制的标签</td>
            </tr>
            <tr>
             <td><code><fieldset></code></td>
             <td>定义域</td>
            </tr>
            <tr>
             <td><code><legend></code></td>
             <td>定义域的标题</td>
            </tr>
            <tr>
             <td><code><select></code></td>
             <td>定义一个选择列表</td>
            </tr>
            <tr>
             <td><code><optgroup></code></td>
             <td>定义选项组</td>
            </tr>
            <tr>
             <td><code><option></code></td>
             <td>定义下拉列表中的选项</td>
            </tr>
            <tr>
             <td><code><button></code></td>
             <td>定义一个按钮</td>
            </tr>
            <tr>
             <td><code><isindex></code></td>
             <td>
              <!-- react-text: 3083 -->已废弃。由
              <!-- /react-text --><code><input></code>
              <!-- react-text: 3085 -->代替。
              <!-- /react-text --></td>
            </tr>
           </tbody>
          </table>
          <!-- react-text: 3086 -->
          <!-- /react-text -->
         </div>
         <p><br></p>
        </div>
        <div class="view-foot">
         <div class="article-jump">
          <span class="jump-up">前の記事：<a></a></span>
          <span class="jump-down">次の記事：<a></a></span>
         </div>
         <a class="view-backtop"><i class="icon-arrow-up2"></i></a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!--<i class="loading-image"> </i>-->
  <div id="languageslayer" style="display:none" class="flexColumn languageslayer">
   <div class="lan-con">
    <a href="javascript:;" onclick="setlang($(this))" data-value="zh-cn" class="chooselan ">简体中文(ZH-CN)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="en" class="chooselan ">English(EN)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="zh-tw" class="chooselan ">繁体中文(ZH-TW)</a>
    <a href="javascript:;" data-value="ja" class="chooselan checklan">日本語(JA)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="ko" class="chooselan ">한국어(KO)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="ms" class="chooselan ">Melayu(MS)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="fr" class="chooselan ">Français(FR)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="de" class="chooselan ">Deutsch(DE)</a>
   </div>
  </div>
  <div style="display:none"></div>
 </body>
</html>