HTML form属性用法及代码示例

HTML <form> 元素属性

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

HTML动作属性

<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

表单元素的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 作为属性值，那么响应将仅显示在当前页面中。

例：

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

_空白：如果我们使用 _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 属性定义了在向服务器提交表单时 form-content 的编码类型。 enctype 的可能值可以是：

应用程序/x-www-form-urlencoded:如果 enctype 属性未包含在表单中，则它是默认编码类型。在提交表单之前，所有字符都被编码。

例：

<form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >

多部分/form-data：它不编码任何字符。当我们的表单包含 file-upload 控件时使用它。

例：

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

输出：

html

填写表格

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

HTML <input> 元素属性

HTML 名称属性

HTML 名称属性定义输入元素的名称。当我们提交表单时，名称和值属性包含在 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>

输出：

html

填写表格

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

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

HTML 值属性

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>

输出：

html

填写表格

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

HTML 必需属性 HTML5

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>

输出：

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 值一起使用。

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

例：

<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

登记表

HTML 禁用属性

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

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

例：

<input type="text" name="uname" disabled><br><br>

输出：

html

登记表

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>

输出：

html

具有disbaled属性的注册表

HTML 表单属性

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

例：

User email:<br><input type="email" name="email"  form="fcontrol"  required><br>
         <input type="submit" form="fcontrol">

输出：

html

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

用户邮箱：

相关用法

注：本文由纯净天空筛选整理自 HTML form Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。