课程
开始
开始学习
CodeGym /课程 /Python SELF ZH /HTML 中的表单

HTML 中的表单

Python SELF ZH
第 29 级 , 课程 3
可用

1. 表单入门

HTML 表单是网页中用户与页面交互的重要工具。它们允许我们收集用户信息，比如文本、选项列表、文件或者其他数据，然后把这些数据发送到服务器进行处理。在 HTML 中，表单使用很多元素来创建，每个元素都对应不同的数据输入类型。表单的核心元素是 <form>，它包裹了其他的表单元素，比如 <input>、<textarea>、<button> 和 <select> 等。

表单的主要元素

表单元素可以创建输入框、按钮、下拉列表和其他交互式元素，让用户输入数据。表单中用到的主要标签有：

  • <form> — 表单的主要容器。它定义了数据提交的目标和方式。
  • <input> — 用于创建不同输入类型（比如文本、密码、单选、多选等）的通用元素。
  • <label> — 与输入框关联的元素，用于描述输入框的用途。
  • <textarea> — 一个多行文本输入框。
  • <button> — 用于提交表单或者执行其他操作的按钮。
  • <select> 和 <option> — 创建下拉列表，让用户选择一个或多个选项。

简单表单示例

HTML 
      
    <form action="/submit" method="post">
      <label for="name">名字:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">电子邮件:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">提交</button>
    </form>
HTML 
          
<form action="/submit" method="post">
  <label for="name">名字:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">提交</button>
</form>
  • action 决定表单数据提交的目标 URL。
  • method 指定数据提交方式：post 或 get。

HTML <input>

标签 <input> 是 HTML 表单中最通用的元素之一。它支持多种输入类型，每种输入类型都适用于特定的数据格式。

标签 <input> 的语法：

Python 

<input type="类型" name="字段名" id="标识符" value="值">

用于 <input> 的属性：

  • type — 输入类型（比如文本、密码、email 等）。
  • name — 字段名称，服务器用此名称识别数据。
  • id — 唯一标识符，用于与 <label> 关联。
  • value — 默认显示在输入框中的值。

主要的 <input> 类型

  • 文本框 type="text" — 用于输入简短文本，比如名字或姓氏。
  • 密码 type="password" — 用于输入密码，输入的字符会以点或星号显示。
  • Email type="email" — 用于输入 email 地址，会自动校验格式。
  • 数字 type="number" — 用于输入数字，只允许输入有效数字。
  • 提交按钮 type="submit" — 提交表单数据到服务器。

<input> 的其他属性

  • placeholder — 在输入框中显示提示文本，当用户开始输入时该文本消失。
  • required — 将输入框设置为必填项。
  • min 和 max — 指定数字或时间的最小和最大值。
  • maxlength — 限制输入框中可以输入的字符数。

3. 表单示例

我们将所有讨论的元素和属性组合成一个完整的表单：

HTML 
      <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>注册表单</title>
    </head>
    <body>
      <form action="/submit" method="post">
        <label for="name">名字:</label>
        <input type="text" id="name" name="name" placeholder="请输入名字" required>
    
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" placeholder="请输入 email" required>
    
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
    
        <label>性别:</label>
        <label><input type="radio" name="gender" value="male"> 男</label>
        <label><input type="radio" name="gender" value="female"> 女</label>
    
        <label for="subscribe">订阅新闻</label>
        <input type="checkbox" id="subscribe" name="subscribe">
    
        <button type="submit">注册</button>
      </form>
    </body>
    </html>
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION