HTML - 表单属性

上一页
下一页

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

HTML <form> 标签用于创建HTML 表单。

什么是表单属性？

在 HTML 中，每个元素都有其自身的属性，用于定义该特定 HTML 元素的特性，并放置在元素的开始标签内。<form> 元素也具有属性，这些属性提供不同的功能，例如重定向到其他网页和自动完成文本。

以下是最常用的表单属性列表：

  • action: HTML action 属性用于指定处理表单提交的 URL。
  • method: HTML method 属性用于定义提交表单时要使用的 HTTP 方法。
  • target: HTML target 属性用于指定在何处打开链接的文档。
  • autocomplete: HTML autocomplete 属性允许您设置表单的自动完成功能是否开启或关闭。
  • enctype: HTML enctype 属性用于指定在将表单输入数据发送到服务器之前如何对其进行编码。
  • novalidate: HTML novalidate 属性定义在提交表单时，不应在 HTML 文档中验证表单数据。

action 属性

<form> 元素的action 属性将用户的输入传输到后端脚本进行处理。除非表单处理用户提供的信息，否则表单毫无用处。因此，将程序的 URL 传递给 action 属性非常重要。请注意，formaction 属性可以覆盖 action 属性的值。

示例

以下示例演示了action 属性的使用。当我们单击提交按钮时，表单将把我们重定向到 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>

method 属性

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

值 描述
GET 这是表单提交的默认方法，这意味着如果我们没有显式指定方法名称，表单将使用 GET 方法发送数据。
POST 它用于在 HTTP 请求正文中发送表单数据。它比 GET 方法更安全。
不建议在发送敏感信息（如信用卡/借记卡号和密码）时使用 GET 方法，因为它会在 URL 中公开提交的数据。

示例

以下示例演示如何使用 <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://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>

target 属性

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

值 描述
_self 在与单击它的相同框架中打开响应。
_blank 在新窗口或选项卡中打开响应。
_parent 在父框架中打开响应。
_top 在窗口的整个主体中打开响应。
framename 在命名的 iframe 中打开响应。

示例

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

<!DOCTYPE html>
<html>

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

<body>
    <!-- Start of the form element -->
    <form action="https://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>

novalidate 属性

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

如果 HTML 元素上存在诸如 novalidate 之类的布尔属性，则它指定为 true，如果不存在，则假定为 false。它们不接受任何值。

示例

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

<!DOCTYPE html>
<html>

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

<body>
    <!-- Start of the form element -->
    <form action="https://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>

autocomplete 属性

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

值 描述
on 默认情况下，autocomplete 属性设置为on，启用自动完成功能。
off 可以将 autocomplete 属性切换为off 以根据 Web 应用程序的要求禁用此功能。

示例

<!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://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>

enctype 属性

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

值 描述
application/x-www-form-urlencoded 这是大多数表单在简单场景中使用的标准方法。
multipart/form-data 当您想要上传二进制数据（例如图像、Word 文件等）时使用此方法。
text/plain 它只将空格编码为 + 符号。

示例

在以下示例中，我们在 <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);
}
打印页面
上一页
下一页
广告
© . All rights reserved.