Html 简明教程
HTML - Form Attributes
HTML 表单是一种简单的表单，用于从用户那里收集数据。HTML 表单具有交互式控件和各种输入类型，例如文本、数字、电子邮件、密码、单选按钮、复选框、按钮等。
HTML forms are simple form that has been used to collect data from the users. HTML form has interactive controls and various input types such as text, numbers, email, password, radio buttons, checkboxes, buttons, etc.
What are Form Attributes?
在 HTML 中，每个元素都有自己的 attributes ，用于定义该特定 HTML 元素的特征，并放在元素的起始标记中。 <form> 元素还具有提供不同功能的属性，如在其他网页上重定向和自动完成文本。
In HTML, each element has its own attributes that are used to define the characteristics of that particular HTML element and are placed inside the element’s opening tag. The <form> element also has attributes that provide different functionalities like redirection on other web pages and auto completion of text.
下表列出了最常用的表单属性
Following is a list of the most frequently used form attributes
-
action: HTML action attribute is used to specify a URL that processes the form submission.
-
method: HTML method attribute is used to define which HTTP method to use when submitting the form.
-
target: HTML target attribute that is used to specify where to open the linked document.
-
autocomplete: HTML autocomplete attribute allows you to set whether the autocomplete for the form should be on or off.
-
enctype: HTML enctype attribute is used to specify how the form input data should be encoded before sending it to the server.
-
novalidate: HTML novalidate attribute define that while submitting the form the form data should not be validated in an HTML document.
The action Attribute
元素的属性将用户的输入传递给后端脚本进行处理。表单如果没有处理用户提供的信息，就没有用处。因此，重要的是将程序的 URL 传递给 action 属性。请注意，属性可以覆盖 action 属性的值。
The action attribute of the <form> element transmits the user’s input to a backend script for processing. A form is of no use unless it processes the information provided by the user. Therefore, it is important to pass the URL of a program to the action attribute. Note that the formaction attribute can override the value of action attribute.
Example
下面的例子说明了如何使用属性。当我们点击提交按钮时，表单会将我们重定向到 Tutorialspoint 的主页。
The following example illustrates the use of action attribute. When we click the submit button, the form will redirect us to the home page of 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 方法。最常用的方法如下：
The method attribute determines which HTTP method should be used by the browser while uploading the form information. The most commonly used methods are as follows
Values |
Description |
GET |
It is the default method for form submission which means if we don’t specify the method name explicitly the form will use the GET method to send data. |
POST |
It is used to send form data inside HTTP request body. It is safer than GET method. |
Example
下面的例子演示了如何使用 <form> 元素的 method 属性。在输出的以下代码中单击提交按钮后，用户将被重定向到 Tutorialspoint 的主页。
The following example demonstrate how to use the method attribute of <form> element. On clicking the submit button in the output of below code, user will be redirected to the home page of 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 属性接受以下值：
The target attribute determines the target window or frame where the result of the script will be displayed after submitting the form. The default target is the current window. The target attribute accepts the following values
Values |
Description |
_self |
It opens the response in the same frame as it was clicked. |
_blank |
It opens the response in the new window or tab. |
_parent |
Opens the response in the parent frame. |
_top |
Opens the response in the full body of window. |
framename |
Opens the response in the named iframe. |
Example
在下面的示例中，我们将在值 target 中使用 _blank 属性。响应将在新的选项卡中打开。
In the following example, we will use the target attribute with the value _blank. The response will be open in the new tab.
<!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 是一个布尔属性，它表示表单不需要任何类型的验证。验证一词是指根据预定义条件验证用户输入的正确性的过程。当应用此属性时，它会使表单免于此类检查，允许用户输入绕过这些条件。
The novalidate is a Boolean attribute that indicates the form does not need any kind of validation. The term validation refers to the process of verifying the correctness of user input based on predefined conditions. This attribute, when applied, exempts the form from such checks, allowing user inputs to bypass these conditions.
Example
在前面的示例中，当我们输入我们的姓名和电子邮件时，该表单将我们重定向到一个新的网页。对于此示例，我们将使用 novalidate 属性，它将允许重定向而不输入任何信息。
In the previous example, the form redirected us to a new web page when we entered our name and email. For this example, we will use the novalidate attribute which will allow the redirection without enterning any information.
<!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 。
The autocomplete attribute of HTML predicts and suggests the subsequent input based on the initial characters entered in the input field. This attribute primarily has two states namely on and off.
Values |
Description |
on |
By default, the autocomplete attribute is set to on, enabling the autocomplete functionality. |
off |
The autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application. |
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 属性来指定浏览器在将数据发送到服务器之前如何对其进行编码。它可能的取值是
We use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Its possible values are
Values |
Description |
application/x-www-form-urlencoded |
This is the standard method most forms use in simple scenarios. |
mutlipart/form-data |
This is used when you want to upload binary data in the form of files like image, word file etc. |
text/plain |
It only encodes the spaces into + symbol. |
Example
在下面的示例中，我们使用 <form> 元素中的值 "text/plain" 使用 HTML 'enctype' 属性。
In the following example, we are using the HTML ‘enctype’ attribute with the value "text/plain" within the <form> element.
<!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
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);
}