HTML表单

HTML 表单是文档的一部分，用于从用户那里收集输入。用户的输入通常会发送到服务器（Web 服务器、邮件客户端等）。我们在 HTML 中使用 HTML <form> 元素来创建表单。

示例：HTML 表单

HTML <form> 元素用于创建 HTML 表单。例如，

<form>
    <label for="firstname">First name: </label>
    <input type="text" name="firstname"  required>
    <br>
    <label for="lastname">Last name: </label>
    <input type="text" name="lastname"  required>
    <br>
    <label for="email">email: </label>
    <input type="email" name="email"  required>
    <br>
    <label for="password">password: </label>
    <input type="password" name="password"  required>
    <br>
    <input type="submit" value="Login!">
</form>

浏览器输出

HTML表单元素

表单包含特殊的交互式元素，用户通过这些元素发送输入。它们包括文本输入框、文本域、复选框、下拉列表等等。例如，

<form>
    <label for="name">Name:</label>
    <input type="text" name="name"><br><br>
    <label for="sex">Sex:</label>
    <input type="radio" name="sex" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="female" value="female">
    <label for="female">Female</label> <br><br>
    <label for="country">Country: </label>
    <select name="country" id="country">
        <option>Select an option</option>
        <option value="nepal">Nepal</option>
        <option value="usa">USA</option>
        <option value="australia">Australia</option>
    </select><br><br>
    <label for="message">Message:</label><br>
    <textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
    <input type="checkbox" name="newsletter" id="newsletter">
    <label for="newsletter">Subscribe?</label><br><br>
    <input type="submit" value="Submit">
</form>

浏览器输出

要了解更多关于各种表单控件的信息，请访问HTML 表单输入。

表单属性

HTML <form> 元素包含多个用于控制数据提交的属性。它们如下：

action

action 属性定义了提交表单时要执行的操作。它通常是表单数据要发送到的服务器的 URL。

<form action="/login">
    <label for="email">Email:</label>
    <input type="email" name="email"><br><br>
    <label for="password">Password:</label>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

在上面的示例中，提交表单时，表单数据将发送到 /login。

method

method 属性定义了提交表单时要使用的 HTTP 方法。method 属性有 3 种可能的值：

• post - 用于将数据发送到服务器以更新资源。

  <form method = "post">
  ...
  </form>

• get：用于从指定资源请求数据。
  
  

  <form method = "get">
  ...
  </form>

• dialog：当表单位于 <dialog> 元素内时，将使用此方法。使用此方法会关闭对话框并发送一个表单提交事件。

要了解有关 GET 和 POST HTTP 方法的更多信息，请访问HTML 表单操作：POST 和 GET。

target

它指定在哪里显示表单提交后的响应。与 <a> 标签中的 target 属性类似，target 属性有四种可能的值。

• _self (默认)：在同一个浏览器标签页中加载响应。

  <form target="_self">
      <label for="firstname">Enter your first name:</label>
      <input type="text" name="firstname">
  </form>

• _blank：在新的浏览器标签页中加载响应。

  <form target="_blank">
      <label for="firstname">Enter your first name:</label>
      <input type="text" name="firstname">
  </form>

• _parent：在当前框架的父框架中加载。如果没有父框架，则在同一标签页中加载响应。

  <form target="_parent">
      <label for="firstname">Enter your first name:</label>
      <input type="text" name="firstname">
  </form>

• _top：在顶层框架中加载响应。如果没有父框架，则在同一标签页中加载响应。

  <form target="_top">
      <label for="firstname">Enter your first name:</label>
      <input type="text" name="firstname">
  </form>

enctype

它指定了表单数据应如何编码以发送请求。仅在我们使用 POST 方法时才适用。

<form method="post" enctype="application/x-www-form-urlencoded">
</form>

在上面的示例中，表单数据将以 x-www-form-urlencoded 格式进行编码（这是默认编码格式）。

name

它指定了表单的名称。name 用于 JavaScript 引用或访问此表单。

<form name="login_form">
    <label for="email">Email:</label>
    <input type="email" name="email"><br><br>
    <label for="password">Password:</label>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

上面的表单可以在 JavaScript 中这样访问：

document.forms['login_form']

虽然可以使用 name 在 JavaScript 中访问表单元素，但建议使用 id 来访问表单元素。

novalidate

如果设置了 novalidate 属性，则会跳过表单元素中的所有验证。

<form novalidate>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit">
</form>

在上面的示例中，即使我们在 email 字段中输入了无效值（例如 Hi），表单也会提交。