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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。