Html 简明教程

HTML - Form Attributes

HTML 表单是一种简单的表单，用于从用户那里收集数据。HTML 表单具有交互式控件和各种输入类型，例如文本、数字、电子邮件、密码、单选按钮、复选框、按钮等。

What are Form Attributes?

在 HTML 中，每个元素都有自己的 attributes ，用于定义该特定 HTML 元素的特征，并放在元素的起始标记中。 <form> 元素还具有提供不同功能的属性，如在其他网页上重定向和自动完成文本。

下表列出了最常用的表单属性

  1. HTML 动作属性用于指定处理表单提交的 URL。

  2. HTML 方法属性用于定义在提交表单时要使用的 HTTP 方法。

  3. HTML 目标属性用于指定在哪儿打开链接的文档。

  4. HTML 自动完成属性允许您设置表单的自动完成是否开启。

  5. HTML enctype 属性用于规定在将表单输入数据发送到服务器之前，该如何对数据进行编码。

  6. HTML 无效属性定义，在提交表单时，不应在 HTML 文档中验证表单数据。

The action Attribute

元素的属性将用户的输入传递给后端脚本进行处理。表单如果没有处理用户提供的信息，就没有用处。因此，重要的是将程序的 URL 传递给 action 属性。请注意，属性可以覆盖 action 属性的值。

Example

下面的例子说明了如何使用属性。当我们点击提交按钮时，表单会将我们重定向到 Tutorialspoint 的主页。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The action Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="/action_page.php">
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

The method Attribute

method 属性决定了在上传表单信息时，浏览器应该使用哪个 HTTP 方法。最常用的方法如下：

Values

Description

GET

这是表单提交的默认方法，这意味着如果我们没有明确指定方法名称，表单将使用 GET 方法发送数据。

POST

它用于在 HTTP 请求正文内发送表单数据。它比 GET 方法更安全。

Example

下面的例子演示了如何使用 <form> 元素的 method 属性。在输出的以下代码中单击提交按钮后，用户将被重定向到 Tutorialspoint 的主页。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The method Attribute</title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com" method="post">

        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

The target Attribute

属性确定提交表单后，脚本结果将显示在哪个目标窗口或框架中。默认目标是当前窗口。target 属性接受以下值：

Values

Description

_self

它在单击的同一帧中打开响应。

_blank

它在新窗口或标签页中打开响应。

_parent

在新父级帧中打开响应。

_top

在窗口的完整主体中打开响应。

framename

在命名的 iframe 中打开响应。

Example

在下面的示例中，我们将在值 target 中使用 _blank 属性。响应将在新的选项卡中打开。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The target Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com" target="_blank">
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

The novalidate Attribute

novalidate 是一个布尔属性，它表示表单不需要任何类型的验证。验证一词是指根据预定义条件验证用户输入的正确性的过程。当应用此属性时，它会使表单免于此类检查，允许用户输入绕过这些条件。

Example

在前面的示例中，当我们输入我们的姓名和电子邮件时，该表单将我们重定向到一个新的网页。对于此示例，我们将使用 novalidate 属性，它将允许重定向而不输入任何信息。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The novalidate Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com"
          target="_blank" autocomplete="off"
          method="get" novalidate>
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

The autocomplete Attribute

HTML 的 autocomplete 属性会预测和建议根据在输入字段中输入的初始字符的后续输入。此属性主要有两个状态，即 on 和 off 。

Values

Description

on

默认情况下，autocomplete 属性设置为 on ，从而启用自动完成功能。

off

autocomplete 属性可以切换为 off 以根据 Web 应用程序的要求禁用此功能。

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form with Autocomplete</title>
</head>

<body>
    <h2>Form with Autocomplete Attribute</h2>

    <form action="https://www.tutorialspoint.com/"
          method="POST" autocomplete="on">
        <label for="name">Name:</label>
        <input type="text" id="name"
               name="name" autocomplete="on">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"
               autocomplete="on">
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <p>
        Submit the form with some values, Next time
        when you try to submit browser will suggest
        previous submitted values.
    </p>
</body>

</html>

The enctype Attribute

我们使用 enctype 属性来指定浏览器在将数据发送到服务器之前如何对其进行编码。它可能的取值是

Values

Description

application/x-www-form-urlencoded

这是大多数表单在简单场景中使用的一种标准方法。

mutlipart/form-data

当你要以上传文件形式上传二进制数据（如图像、Word 文件等）时，使用此方法。

text/plain

它仅将空格编码为 + 符号。

Example

在下面的示例中，我们使用 <form> 元素中的值 "text/plain" 使用 HTML 'enctype' 属性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'enctype' Attribute</title>
   <style>
      form {
         width: 300px;
         padding: 10px;
         border-radius: 10px;
         background-color: rgb(9, 109, 190);
      }

      form h1 {
         font-family: sans-serif;
         letter-spacing: 2px;
         color: white;
         text-align: center;
         position: relative;
         top: -20px;
      }

      form input {
         padding: 12px;
         width: 80%;
         border: 1px solid white;
         border-radius: 5px;
         outline: none;
      }

      form label {
         font-size: 20px;
         color: white;
         padding: 5px 5px;
      }

      form button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
         background-color: white;
         border: 1px solid white;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'enctype' attribute-->
   <h3>Example of the HTML 'enctype' attribute</h3>
   <p>
       We are assigning the "text/plain" value to the
       enctype attribute which means the data is being
       sent as plain text.
   </p>
   <form action="index.js" enctype="text/plain" method="POST">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text" id='uname' placeholder="Username">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password" id='psw' placeholder="Password">
      <br>
      <br>
      <button type='submit' onclick="Login()">Login</button>
   </form>
   <script src="index.js"></script>
</body>
</html>

index.js

function Login(){
   var uname = document.getElementById("uname").value;
   var password = document.getElementById("psw").value;

   document.write("Username: " + uname);
   document.write("<br>");
   document.write("Password: " + password);
}