编程技术

Document

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