编程技术

Document

HTML-表单标签

一、form表单容器标签

<form> 标签在 HTML 中用于定义一个表单容器，用于收集用户输入的数据。它是所有表单元素（如文本框、单选按钮、复选框、下拉菜单等）的父元素。以下是关于 <form> 标签的详细介绍，包括其特点、用法、属性以及示例。

1. 特点

  • 用户交互：<form> 标签允许用户输入信息并提交给服务器进行处理。
  • 数据收集：表单可以收集各种类型的数据，如文本、数字、日期、文件等。
  • 事件处理：可以使用 JavaScript 处理表单提交事件，实现动态交互。

2. 用法

<form> 标签必须成对使用，开启标签 <form> 和关闭标签 </form>，表单内可以包含多种输入元素。

3. 常用属性

  • 1. action 属性

    • 定义：指定表单提交数据的目标 URL。

    • 用法：该属性指向一个服务器端脚本或处理程序，通常是处理用户输入的代码（如 PHP、Python、Java 等）。

    • 示例

      ：

      <form action="/submit.php" method="POST">
    <!-- 表单元素 -->
</form>

      在这个示例中，表单数据将提交到 /submit.php 路径。

    2. method 属性

    • 定义：指定表单提交使用的 HTTP 方法。

    • 常用值：

      • GET：

        • 数据通过 URL 发送，通常在浏览器地址栏中可见。

        • 适合传递不敏感的信息，如搜索查询。

        • 数据量有限（通常最多 2048 个字符，具体取决于浏览器）。

        • 示例：

          <form action="/search" method="GET">
    <input type="text" name="query" placeholder="搜索...">
    <button type="submit">提交</button>
</form>

      • POST：

        • 数据在请求体中发送，通常在浏览器地址栏中不可见。

        • 适合传递敏感信息（如密码）或较大数据（如文件）。

        • 数据量没有严格限制，具体取决于服务器设置。

        • 示例：

          <form action="/login" method="POST">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
</form>

    3. enctype 属性

    • 定义：指定表单数据的编码类型，特别是在文件上传时。

    • 常用值

      ：

      • application/x-www-form-urlencoded（默认值）：

        • 数据以 key=value 的形式编码。
        • 适用于一般表单提交，非文件上传。
        • 示例：name=John&age=30

      • multipart/form-data：

        • 适用于文件上传。

        • 数据以多部分编码，允许在同一表单中上传文本和文件。

        • 示例：

          <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上传</button>
</form>

      • text/plain：

        • 数据以纯文本格式发送。
        • 通常不常用，适合于简单的调试或测试场景。

    4. target 属性

    • 定义：指定表单提交后文档的显示位置。

    • 常用值

      ：

      • _blank：在新窗口或标签页中打开提交结果。

        • 示例：

          <form action="/submit" method="POST" target="_blank">
    <!-- 表单元素 -->
</form>

      • _self（默认值）：在当前窗口或标签页中打开提交结果。

      • _parent：在父框架中打开提交结果（如果使用框架）。

      • _top：在整个窗口中打开提交结果，覆盖所有框架。

    综合示例

    以下是一个综合示例，展示了以上属性的用法：

    <form action="/submit" method="POST" enctype="multipart/form-data" target="_blank">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    
    <label for="file">上传文件：</label>
    <input type="file" id="file" name="file" required>
    
    <button type="submit">提交</button>
</form>

    在此示例中，表单将通过 POST 方法提交到 /submit，允许文件上传，并在新标签页中显示提交结果。

二、input表单输入标签

<input> 标签在 HTML 中用于创建多种类型的用户输入控件，允许用户在表单中输入数据。以下是关于 <input> 标签的详细介绍，包括其特点、用法、常用类型、属性以及示例。

1. 特点

  • 多样性：<input> 标签可以创建多种类型的输入控件，包括文本框、密码框、单选按钮、复选框、文件选择框等。
  • 简单性：使用简单，只需指定 type 属性即可。
  • 灵活性：可以与其他表单元素结合使用，支持多种属性配置。

2. 用法

<input> 标签自闭合，语法如下：

<input type="text" name="username">

其中，type 属性定义了输入的类型。

3. 常用类型

以下是常用的 <input> 类型及其功能：

  • text：用于输入单行文本。

    <input type="text" name="username" placeholder="用户名">

  • password：用于输入密码，输入的字符将以星号或点的形式显示。

    <input type="password" name="password" placeholder="密码">

  • email：用于输入电子邮件地址，支持基本格式验证。

    <input type="email" name="email" placeholder="邮箱">

  • number：用于输入数字，支持上下箭头选择。

    <input type="number" name="age" min="1" max="120" placeholder="年龄">

  • tel：用于输入电话号码，支持特定格式验证。

    <input type="tel" name="phone" placeholder="电话号码">

  • url：用于输入网址，支持基本格式验证。

    <input type="url" name="website" placeholder="网站链接">

  • date：用于选择日期，通常显示为日期选择器。

    <input type="date" name="birthday">

  • checkbox：用于选择多个选项之一或多个，通常以方框形式显示。

    <input type="checkbox" name="subscribe" value="yes"> 订阅新闻

  • radio：用于选择多个选项中仅一个，通常以圆形按钮形式显示。

    <input type="radio" name="gender" value="female"> 女

  • file：用于选择文件，用户可以上传文件。

    <input type="file" name="fileUpload">

  • submit：用于提交表单。

    <input type="submit" value="提交">

4. 常用属性

  • placeholder

    • 作用：在输入框中显示提示信息，帮助用户了解应输入何种信息。

    • 用法：通常设置为输入框的默认文本，当用户点击输入框时，这些提示文本会消失，用户开始输入内容。

    • 示例

      ：

      <input type="text" placeholder="请输入用户名">

    2. value

    • 作用：定义输入字段的默认值，表单加载时会显示在输入框中。

    • 用法：可以用于预先填充字段，以便用户快速修改或确认。

    • 示例

      ：

      <input type="text" value="默认用户名">

    3. required

    • 作用：指定该字段为必填项，用户必须填写才能提交表单。如果用户未填写该字段，将显示错误提示，阻止表单提交。

    • 用法：常用于确保用户输入必要的信息，例如用户名、邮箱等。

    • 示例

      ：

      <input type="email" required placeholder="请输入邮箱">

    4. disabled

    • 作用：使输入字段不可用，用户无法输入、选择或提交该字段的数据。被禁用的字段不会被提交到服务器。

    • 用法：用于控制用户对表单字段的访问，例如在特定条件下隐藏输入或防止用户更改。

    • 示例

      ：

      <input type="text" disabled placeholder="此字段不可用">

    5. readonly

    • 作用：使输入字段只读，用户不能修改该字段的值，但可以选中并复制内容。与 disabled 不同的是，readonly 字段在表单提交时仍会包含该值。

    • 用法：通常用于展示数据或在某些条件下限制用户编辑。

    • 示例

      ：

      <input type="text" value="只读内容" readonly>

    6. min 和 max

    • 作用：定义数字输入的最小值和最大值，限制用户可以输入的数值范围。

    • 用法：常用于数字输入框，确保用户输入的数值在合理范围内。

    • 示例

      ：

      <input type="number" min="1" max="100" placeholder="输入1到100之间的数字">

5. 示例代码

以下是一个包含多种类型输入字段的表单示例：

<form action="/submit" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required placeholder="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required placeholder="请输入密码">

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required placeholder="请输入邮箱">

    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="1" max="120" placeholder="请输入年龄">

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="male" required> 男
    <input type="radio" id="female" name="gender" value="female"> 女

    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone" placeholder="请输入电话号码">

    <label for="fileUpload">上传文件：</label>
    <input type="file" id="fileUpload" name="fileUpload">

    <button type="submit">提交</button>
</form>

image-20241025214154512

6. 代码说明

  • 基本结构：表单包含了多个输入字段，涵盖了文本、密码、邮箱、数字、单选按钮和文件上传。
  • 样式：通过 CSS 定义了表单和输入元素的外观，确保用户体验良好。
  • 必填项：使用 required 属性确保用户在提交表单前填写必要信息。

三、textarea表单文本区域标签

<textarea> 标签在 HTML 中用于创建多行文本输入区域，允许用户输入较长的文本。以下是关于 <textarea> 标签的详细介绍，包括其特点、用法、常用属性以及示例。

  • 多行输入：<textarea> 允许用户输入多行文本，适合用于评论、反馈、文章撰写等场景。
  • 可扩展性：用户可以在输入框中输入多于一行的文本，且可以进行文本的换行。
  • 可自定义大小：通过 CSS 或属性可以调整文本区域的宽度和高度。

四、select表单下拉框标签

<select> 标签在 HTML 中用于创建下拉框，允许用户从预定义选项中选择一项或多项。以下是关于 <select> 标签的详细介绍，包括其特点、用法、常用属性以及示例。

  • 下拉选择：<select> 提供一个下拉列表，用户可以选择一个或多个选项。
  • 支持选项分组：可以使用 <optgroup> 标签将选项分组，提高选择的可读性。
  • 可定义默认选项：可以通过属性设置默认选中的选项。

常用属性

  • name：定义下拉框的名称，通常用于表单提交时识别数据。
  • multiple：允许用户可以选择多个选项。如果使用此属性，选项会以多选的形式显示。
  • size：定义可见的选项数量，适用于显示多个选项而不需要下拉。
  • disabled：使下拉框不可用，用户无法进行选择。
  • required：指定该下拉框为必填项，用户必须选择一个选项才能提交表单。
  • selected：用于定义哪个选项是默认选中的，通常用于设置初始值。

五、lable表单控件标签

<label> 标签在 HTML 中用于为表单控件定义标签，提供用户界面的文字描述，增强可用性和可访问性。以下是关于 <label> 标签的详细介绍，包括其特点、用法、常用属性以及示例。

  • 可访问性：使用 <label> 标签可以帮助屏幕阅读器用户更好地理解表单控件的功能，提升无障碍体验。
  • 用户友好：点击 <label> 标签可以聚焦或选择对应的表单控件，提高用户体验。
  • 提高可读性：为每个表单控件提供描述，使用户更容易理解需要输入的信息。

<label> 标签通常与表单控件（如 <input>、<select>、<textarea> 等）配合使用。可以通过 for 属性将 <label> 关联到特定的表单控件，for 属性的值应与表单控件的 id 属性相同。基本语法如下：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

常用属性

  • for：指定与标签关联的表单控件的 id，确保用户点击标签时可以聚焦到对应的输入框。
  • form：指定标签关联的表单，适用于同一页面中的多个表单。

六、button表单按钮标签

<button> 标签在 HTML 中用于创建可交互的按钮，通常用于提交表单、重置表单或执行特定的 JavaScript 操作。以下是关于 <button> 标签的详细介绍，包括其特点、用法、常用属性以及示例。

  • 可交互性：<button> 标签创建一个可点击的按钮，用户可以与之进行交互。
  • 多用途：可以用于提交表单、重置表单或调用 JavaScript 函数执行特定操作。
  • 自定义外观：可以通过 CSS 样式灵活定制按钮的外观和行为。

<button> 标签通常在表单中使用，也可以独立存在。基本语法如下：

<button type="submit">提交</button>

常用属性

  • type

    ：定义按钮的类型，常用值包括：

    • submit：提交表单，默认值。
    • reset：重置表单。
    • button：普通按钮，不会自动提交或重置表单。

  • name：定义按钮的名称，通常用于标识按钮在表单提交时的值。

  • value：定义按钮的值，通常在表单提交时发送。

  • disabled：使按钮不可用，用户无法点击。

  • form：指定按钮关联的表单，可以与不同的表单结合使用。