HTML - 表单属性

上一页
下一页

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

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

什么是表单属性？

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

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

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

操作属性

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

例

下面的示例演示了 action 属性的用法。当我们单击提交按钮时，表单会将我们重定向到 七科普 的主页。


<!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 属性确定浏览器在上传表单信息时应使用哪种 HTTP 方法。最常用的方法如下

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

例

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


<!DOCTYPE html>
<html>

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

<body>
		<!-- Start of the form element -->
		<form action="" 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 的目标属性。响应将在新选项卡中打开。


<!DOCTYPE html>
<html>

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

<body>
		<!-- Start of the form element -->
		<form action="" 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 是一个 Boolean 属性，指示表单不需要任何类型的验证。术语验证是指根据预定义条件验证用户输入正确性的过程。应用此属性时，表单免于此类检查，允许用户输入绕过这些条件。

如果 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=""
					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>

自动完成属性

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

值 描述
on 默认情况下，自动完成属性设置为 on，从而启用自动完成功能。
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="/" 
					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 这是大多数表单在简单方案中使用的标准方法。
mutlipart/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);
}
打印本页
上一页
下一页