本文概述
- HTML <form>元素属性
- HTML动作属性
- HTML目标属性
- HTML自动完成属性
- HTML enctype属性
- HTML novalidate属性HTML5
- HTML <input>元素属性
- HTML名称属性
- HTML值属性
- HTML必需属性HTML5
- HTML自动对焦属性HTML5
- HTML占位符属性HTML5
- HTML禁用属性
- HTML大小属性
- HTML表单属性
HTML <form>元素属性
在HTML中, <form>元素有多种可用属性, 如下所示：
HTML动作属性
<form>元素的action属性定义提交表单时要在表单上执行的过程, 或者它是用于处理表单信息的URI。
动作属性值定义了进行信息的网页。它可以是.php, .jsp, .asp等, 也可以是你要处理表单的任何URL。
注意：如果动作属性值为空白, 则表单将被处理到同一页面。
例：
<form action="action.html" method="post">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>立即测试
输出：
Demo of action attribute of form element
User Name:
User Password
It will redirect to a new page "action.html" when you click on submit button
HTML方法属性
method属性定义浏览器用来提交表单的HTTP方法。方法属性的可能值为：
- post：我们要处理敏感数据时可以使用method属性的post值, 因为它不会在URL中显示已提交的数据。
例：
<form action="action.html" method="post">- get：提交表单时, method属性的get值为默认值。但这并不安全, 因为在提交表单后, 它会在URL中显示数据。
例：
<form action="action.html" method="get">提交数据时, 它将以以下形式显示输入的数据：
file:///D:/HTML/action.html?name=srcmini&pass=123HTML目标属性
target属性定义提交表单后在何处打开响应。以下是与target属性一起使用的关键字。
- _self：如果我们将_self用作属性值, 则响应仅显示在当前页面中。
例：
<form action="action.html" method="get" target="_self">- _blank：如果我们使用_blank作为属性, 它将在新页面中加载响应。
例：
<form action="action.html" method="get" target="_blank">HTML自动完成属性
HTML自动完成属性是HTML5的新添加的属性, 它使输入字段能够自动完成。它可以有两个值“ on”和“ off”, 以启用“ ON”或“ OFF”自动完成功能。自动完成属性的默认值为“ on”。
例：
<form action="action.html" method="get" autocomplete="on">例：
<form action="action.html" method="get" autocomplete="off">注意：它可以与<form>元素和<input>元素一起使用。
HTML enctype属性
HTML enctype属性定义了在将表单提交给服务器时表单内容的编码类型。 enctype的可能值为：
- application / x-www-form-urlencoded：如果表单中未包含enctype属性, 则为默认编码类型。提交表单之前, 所有字符均已编码。
例：
<form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >- multipart / form-data：不编码任何字符。当我们的表单包含文件上传控件时使用它。
例：
<form action="action.html" method="post" enctype="multipart/form-data">- 文本/纯文本（HTML5）：在此编码类型中, 仅空格被编码为+符号, 而没有任何其他特殊字符被编码。
例：
<form action="action.html" method="post" enctype="text/plain" >HTML novalidate属性HTML5
novalidate属性是HTML5的新添加的布尔属性。如果我们在表单中应用此属性, 则它不会执行任何类型的验证并提交表单。
例：
<form action = "action.html" method = "get" novalidate>立即测试
输出：
Fill the form
Enter name:
Enter age:
Enter email:
Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.
HTML <input>元素属性
HTML名称属性
HTML名称属性定义输入元素的名称。提交表单时, name和value属性包含在HTTP请求中。
注意：不应忽略name属性, 因为当我们提交表单时, HTTP请求将同时包含name-value对, 并且如果name不可用, 它将不会处理该输入字段。
例：
<form action = "action.html" method = "get">
Enter name:<br><input type="name" name="uname"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email"><br>
<input type="submit" value="Submit">
</form>立即测试
输出：
Fill the form
Enter name:
Enter age:
Enter email:
Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.
Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field
HTML值属性
HTML值属性定义输入字段的初始值或默认值。
例：
<form>
<label>Enter your Name</label><br>
<input type="text" name="uname" value="Enter Name"><br><br>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" value="Enter email"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
</form>立即测试
输出：
Fill the form
Enter your Name
Enter your Email-address
Enter your password
Note: In password input filed the value attribute will always unclear
HTML必需属性HTML5
所需的HTML是布尔属性, 它指定用户必须在提交表单之前填写该字段。
例：
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>立即测试
输出：
Fill the form
Enter your Email-address
Enter your password
If you will try to submit the form without completing email field then it will give an error pop up.
HTML自动对焦属性HTML5
自动聚焦是一个布尔属性, 可在加载网页时使字段自动聚焦。
例：
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" autofocus><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>HTML占位符属性HTML5
占位符属性在输入字段中指定一个文本, 该文本通知用户该字段的预期输入。
占位符属性可以与文本, 密码, 电子邮件和URL值一起使用。
当用户输入值时, 占位符将被自动删除。
例：
<form>
<label>Enter your name</label><br>
<input type="text" name="uname" placeholder="Your name"><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="example@gmail.com"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>立即测试
输出：
Registration form
Enter your name
Enter your Email address
Enter your password
HTML禁用属性
应用HTML禁用属性后, 它将禁用该输入字段。禁用字段不允许用户与该字段进行交互。
禁用的输入字段不会接收单击事件, 并且在提交表单时, 这些输入值不会发送到服务器。
例：
<input type="text" name="uname" disabled><br><br>立即测试
输出：
Registration form
Enter User name
Enter your Email address
Enter your password
HTML大小属性
size属性控制以键入字符表示的输入字段的大小。
例：
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<label>Account number</label><br>
<input type="text" name="an" size="30" required><br><br>
<label>CVV</label><br>
<input type="text" name="cvv" size="1" required><br><br>立即测试
输出：
Registration form with disbaled attribute
Account holder name
Account number
CVV
HTML表单属性
HTML表单属性允许用户指定在表单外部提交的输入, 但仍是父表单的一部分。
例：
User email: <br><input type="email" name="email" form="fcontrol" required><br>
<input type="submit" form="fcontrol">立即测试
输出：
User Name:
User password:
The email field is outside the form but still it will remain part of the form
User email:
