HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 表单属性

HTML <form> 元素属性

在 HTML 中，<form> 元素有各种可用的属性，如下所示：

HTML动作属性

<form> 元素的 action 属性定义了表单提交时对表单进行的处理，或者是处理表单信息的 URI。

action 属性值定义了信息处理的网页。它可以是 .php、.jsp、.asp 等或任何您想要处理表单的 URL。

注意：如果 action 属性值为空，则表单将被处理到同一页面。

例子：

<!DOCTYPE html>
<html>

 <body>
	<h2>Demo of action attribute of form element</h2>
	   <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> 
     <p><b>It will redirect to a new page "action.html" when you click on submit button</b></p>
  </body>
</html>

输出：

表单元素的action属性演示







当您单击提交按钮时，它将重定向到一个新页面“action.html”

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=JavaTPoint&pass=123

HTML 目标属性

target 属性定义在提交表单后打开响应的位置。以下是与目标属性一起使用的关键字。

  • _self： 如果我们使用 _self 作为属性值，那么响应将只显示在当前页面中。

例子：

<form action="action.html" method="get" target="_self">

  • _blank：如果我们使用 _blank 作为属性，它将在新页面中加载响应。

例子：

<form action="action.html" method="get" target="_blank">

HTML 自动完成属性

HTML autocomplete 属性是 HTML5 新增的属性，可以让输入字段自动完成。它可以有两个值“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" >

HTML novalidate 属性 HTML5

novalidate 属性是 HTML5 新增的布尔属性。如果我们在表单中应用此属性，则它不会执行任何类型的验证并提交表单。

例子：

<!DOCTYPE html>
<html>
   <body>
       <h2>Fill the form</h2>
      <form action = "action.html" method = "get" novalidate>
         Enter name:<br><input type="name" name="name"><br>
         Enter age:<br><input type="number" name="age"><br>
         Enter email:<br><input type="email" name="email"><br>
         <input type="submit" value="Submit">
      </form>
<p><b>Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.</b></p>
   </body>
</html>

输出：

填表格

输入名字：

输入年龄：

输入电子邮件：

尝试使用 novalidate 属性和不使用 novalidate 属性更改表单详细信息并查看差异。

HTML <input> 元素属性

HTML 名称属性

HTML 名称属性定义输入元素的名称。当我们提交表单时，名称和值属性包含在 HTTP 请求中。

注意：不应省略 name 属性，因为当我们提交表单时，HTTP 请求包含名称-值对，如果 name 不可用，它将不会处理该输入字段。

例子：

<!DOCTYPE html>
<html>
   <body>
   
   	<h2>Fill the form</h2>
      <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>
<p><b>Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.</b></p>
<p>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</p>
   </body>
</html>

输出：

填表格

输入名字：

输入年龄：

输入电子邮件：

注意：如果您不会在任何输入字段中使用 name 属性，那么在提交表单时将不会提交该输入字段。

单击提交并查看 HTTP 请求中不包含电子邮件的 URL，因为我们没有在电子邮件输入字段中使用名称属性

HTML 值属性

HTML value 属性定义输入字段的初始值或默认值。

例子：

<!DOCTYPE html>
 <html>
  <body>
  	<h2>Fill the form</h2>
	<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>
   <p><b>Note: In password input filed the value attribute will always unclear</b></p>
  </body>
</html>

输出：

填表格










注意：在密码输入字段中，value 属性总是不清楚

HTML 必需属性 HTML5

HTML required 是一个布尔属性，它指定用户必须在提交表单之前填写该字段。

例子：

<!DOCTYPE html>
 <html>
  <body>
  	<h2>Fill the form</h2>
	<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>
   <p><b> If you will try to submit the form without completing email field then it will give an error pop up.</b></p>
  </body>
</html>

输出：


填表格







如果您尝试在未完成电子邮件字段的情况下提交表单，则会弹出错误消息。

HTML 自动对焦属性 HTML5

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>

HTML 占位符属性 HTML5

placeholder 属性指定输入字段中的文本，该文本通知用户该字段的预期输入。

占位符属性可与文本、密码、电子邮件和 URL 值一起使用。

当用户输入值时，占位符将被自动删除。

例子：

<!DOCTYPE html>
<html>
<body>	
               <h3>Registration form</h3>
	     <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>
</body>
</html>

输出：

报名表格










HTML 禁用属性

应用 HTML disabled 属性后，它会禁用该输入字段。禁用字段不允许用户与该字段交互。

禁用的输入字段不接收点击事件，提交表单时这些输入值不会发送到服务器。

例子：

<!DOCTYPE html>
<html>
<body>
                      <h3>Registration form</h3>
                        <form>
	                   <label>Enter User name</label><br>
		<input type="text" name="uname" value="USER"  disabled><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>

</body>
</html>

输出：

报名表格










HTML 大小属性

size 属性控制输入字段的大小（以键入的字符表示）。

例子：

<!DOCTYPE html>
<html>
<body>
	<h3>Registration form with disbaled attribute</h3>
	<form>
		<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>
		<input type="submit" value="login">
	</form>
</body>
</html>

输出：

具有disbaled属性的注册表










HTML 表单属性

HTML 表单属性允许用户指定表单之外的输入字段，但仍是父表单的一部分。

例子：

<!DOCTYPE html>
<html>

   <body>
	   <form id="fcontrol">
		User Name:<br><input type="text" name="uname"><br><br>
		User password:<br><input type="password" name="pass"><br><br>
       </form>
      <p>The email field is outside the form but still it will remain part of the form</p>
      User email: <br><input type="email" name="email"  form="fcontrol"  required><br>
         <input type="submit" form="fcontrol">
   </body>
</html>

输出：

用户名：


用户密码：


电子邮件字段在表单之外，但仍将是表单的一部分

用户邮箱：


上一主题 HTML 表单输入类型 下一主题 HTML CSS样式
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具