HTML入门：04HTML表单

本文将介绍HTML表单。

表单可以收集不同类型的输入信息，向服务器提交收集到的数据。HTML表单和HTML文档主要区别在于文档是将内容显示在浏览器上，而表单除显示基本文本外，还要收集数据发送到服务器。如下是一段简单的表单代码：

<form action='html_form_action.php' method='post'>
    
</form>

form和/form之间定义了一个完整的表单框架，form有两个最常用的属性：action和method。

• action是一个url地址，定义将表单获得的数据提交到指定的服务器的哪个脚本程序处理；
• method的属性定义数据提交到服务器的方法，一般为get或者post。

form内包含了若干个表单预标签，它可以生成相应的组件与用户交互，包括输入框、密码框、按钮等等。

• input是输入信息标签，根据type属性值的不同显示不同的组件；

  • type属性值为text时，定义单行文本框，文本框的默认宽度是20个字符；

  • type属性值为password时定义密码框，默认情况下，输入的字符会以·显示，以保证文本的安全性；

  • type属性值为submit时定义提交按钮，用于向服务器发送表单数据；

  • type属性值为reset时定义重置按钮，用于清空表单中所有的数据；

    <form>
        <p>账号：<input type='text' name="user" value="请输入账号"></p>
        <p>密码：<input type='password' name="password"></p>
        <p>
            <input type='submit' value="提交">
            <input type='reset' value="重置">
        </p>
    </form>
    

    

  • name属性定义组件名称；

  • value属性定义文本框的初始值或者按钮上显示的文本；

• 当type属性值为radio时定义单选按钮，表示同一个选项组有且只有一个可选，当单选按钮的name值相同时，表示它们在同一个选项组；

• 此时value属性表示提交给服务器的关联值。

  <form>
      年龄范围：
      <input type="radio" name="age" value="1">18-30
      <input type="radio" name="age" value="2">30-50
      <input type="radio" name="age" value="3">50以上
  </form>
  

  

• type属性值为checkbox时定义复选框；

  <form>
      喜欢的颜色：
      <input type="checkbox" name="color" value="red">红色
      <input type="checkbox" name="color" value="white">白色
      <input type="checkbox" name="color" value="blue">蓝色
      <input type="checkbox" name="color" value="black">黑色
  </form>
  

  

• 使用select标签创建单选或者多选列表，其中optgroup用于分组，这里按照编程语言分组，option定义表单中的可选项；

  <form>
      编程语言：
      <select name="prog lang">
          <optgroup label="Web">
              <option value="HTML">HTML</option>
              <option value="CSS">CSS</option>
              <option value="JavaScript">JavaScript</option>
          </optgroup>
  
          <optgroup label="Python">
              <option value="Spider">Python爬虫</option>
              <option value="Automation">Python自动化</option>
              <option value="DA">Python数据分析</option>
          </optgroup>
      </select>
  </form>
  

  

• 使用textarea标签定义多行文本区域。例如，这里的定义声明了五行、每行50个字符的多行文本；

  <form>
      附加说明：<br />
      <textarea cols="50" rows="5">...</textarea>
  </form>
  

  

总之，HTML表单会接收用户输入的数据，当用户提交表单时，浏览器将用户在表单中输入的数据打包并发送给服务器，服务器接收到数据并转由服务器处理，从而实现用户和外部服务器的交互。