文章目录 HTML action 属性 HTML method 属性 HTML target 属性 HTML autocomplete 属性 HTML enctype 属性 HTML5 的 novalidate 属性 HTML <input> 元素属性 HTM……
文
章
目
录
- HTML action 属性
- HTML method 属性
- HTML target 属性
- HTML autocomplete 属性
- HTML enctype 属性
- HTML5 的 novalidate 属性
- HTML <input> 元素属性
- HTML value 属性
- HTML5 的 required 属性
- HTML5 的 autofocus 属性
- HTML5 的 placeholder 属性
- HTML disabled 属性
- HTML size 属性
- HTML form 属性
HTML <form> 元素的属性 在HTML中,<form> 元素有各种可用的属性,如下所示:
HTML action 属性
<form> 元素的 action 属性定义了在提交表单时要执行的过程,或者它是用于处理表单信息的URI。
action 属性的值定义了信息处理的网页。它可以是 .php、.jsp、.asp 等,或者是任何你希望处理表单信息的URL。
注意:如果 action 属性值为空,那么表单将在当前页面上进行处理。
例子:
<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>
HTML method 属性
method 属性定义了浏览器用于提交表单的HTTP方法。method 属性的可能值可以是:
post:当我们想处理敏感数据时,可以使用 method 属性的 post 值,因为它不会在URL中显示已提交的数据。
例子:
<form action=\"action.html\" method=\"post\">
get:在提交表单时,method 属性的默认值是 get。但这不是安全的,因为它会在提交表单后在URL中显示数据。 例子:
<form action=\"action.html\" method=\"get\">
在提交数据时,它将以以下形式在URL中显示输入的数据:
file:///D:/HTML/action.html?name=panziye&pass=123456
HTML target 属性
target 属性定义在提交表单后在哪里打开响应。以下是与 target 属性一起使用的关键字。
_self:如果我们将 _self 用作属性值,那么响应将只在当前页面中显示。 例子:
<form action=\"action.html\" method=\"get\" target=\"_self\">
_blank:如果我们将 _blank 用作属性,它将在新页面中加载响应。 例子:
<form action=\"action.html\" method=\"get\" target=\"_blank\">
HTML autocomplete 属性
HTML5 中新增的 HTML autocomplete 属性,允许输入字段自动完成。它可以有两个值,”on” 和 “off”,分别启用自动完成或禁用自动完成。autocomplete 属性的默认值是 “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\">
text/plain(HTML5):在这种编码类型中,只有空格被编码成 + 符号,没有对任何其他特殊字符进行编码。 例子:
<form action=\"action.html\" method=\"post\" enctype=\"text/plain\" >
HTML5 的 novalidate 属性
novalidate 属性是 HTML5 中新增的布尔属性。如果我们在表单中应用这个属性,那么它不会执行任何类型的验证并提交表单。
例子:
<form action = \"action.html\" method = \"get\" novalidate>
注意:尝试使用 novalidate 属性和不使用 novalidate 属性更改表单详细信息,看看它们之间的差异。
HTML <input> 元素属性
HTML name 属性 HTML name 属性定义了输入元素的名称。在提交表单时,名称和值属性都包含在HTTP请求中。
注意:不应省略 name 属性,因为在提交表单时,HTTP请求包括名称-值对,如果名称不可用,它将不处理该输入字段。 例子:
<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>
注意:如果您不在任何输入字段中使用 name 属性,那么在提交表单时,该输入字段将不会被提交。
点击提交并查看URL,其中电子邮件没有包含在HTTP请求中,因为我们在电子邮件输入字段中没有使用 name 属性。
HTML value 属性
HTML value 属性定义了输入字段的初始值或默认值。
例子:
<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>
注意:在密码输入字段中,value 属性将始终不可见。
HTML5 的 required 属性
HTML required 是一个布尔属性,它指定用户在提交表单之前必须填写该字段。
例子:
<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>
如果尝试在不填写电子邮件字段的情况下提交表单,将会弹出错误提示。
HTML5 的 autofocus 属性
autofocus 是一个布尔属性,它在网页加载时自动将焦点设置在字段上。
例子:
<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>
HTML5 的 placeholder 属性
placeholder 属性指定了输入字段内的文本,用于通知用户有关该字段的预期输入。
placeholder 属性可以与文本、密码、电子邮件和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>
HTML disabled 属性
HTML 的 disabled 属性,当应用时,会禁用输入字段。禁用的字段不允许用户与该字段交互。
禁用的输入字段不会接收点击事件,并且在提交表单时,这些输入值不会被发送到服务器。
例子:
<input type=\"text\" name=\"uname\" disabled><br><br>
HTML size 属性
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>
HTML form 属性
HTML form 属性允许用户指定一个输入字段位于表单之外,但仍然是父表单的一部分。
例子:
User email: <br>
<input type=\"email\" name=\"email\" form=\"fcontrol\" required><br>
<input type=\"submit\" form=\"fcontrol\">
还没有评论呢,快来抢沙发~