HTML表单属性

前端 潘老师 1个月前 (10-16) 35 ℃ (0) 扫码查看

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">  

 


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9691.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】