如何在 HTML 中包含輸入欄位?
HTML 的 <input> 標籤用於在表單內宣告一個輸入元素 - 一個允許使用者輸入資料的控制元件。
以下是屬性 -
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | 內容型別 | 指定伺服器接受的內容型別的逗號分隔列表 |
| align | left right top middle bottom | 已棄用 - 定義內容的對齊方式 |
| alt | 文字 | 如果瀏覽器/使用者代理無法渲染輸入控制元件,則指定要使用的文字 |
| autocomplete | on off | 指定在 <input> 元素中啟用或停用自動完成功能 |
| autofocus | 自動聚焦 | 指定 <input> 元素在頁面載入時應自動獲取焦點 |
| checked | 選中 | 如果 type = "radio" 或 type = "checkbox",則在頁面載入時它將已被選中。 |
| disabled | 停用 | 停用輸入控制元件。按鈕將不接受使用者的更改。它也不能接收焦點,並且在按 Tab 鍵時會被跳過。 |
| form | form_id | 指定一個或多個表單 |
| formaction | URL | 指定提交表單時將處理輸入控制元件的檔案的 URL |
| formenctype | application/x-www-form-urlencoded | 指定提交表單資料到伺服器時如何對其進行編碼 |
| formmethod | post get | 定義將資料傳送到 action URL 的 HTTP 方法 |
| formnovalidate | Formnovalidate | 定義表單元素在提交時不應進行驗證 |
| fromtarget | _blank _self _parent _top | 指定接收提交表單後響應將顯示的目標位置 |
| height | 畫素 | 指定高度 |
| list | datalist_id | 指定包含 <input> 元素預定義選項的 <datalist> 元素 |
| max | 自動聚焦 | 指定最大值。 |
| maxlength | 數字 | 定義文字欄位中允許的最大字元數 |
| min | 數字 | 指定最小值 |
| multiple | 多選 | 指定使用者可以輸入多個值 |
| name | 文字 | 為輸入控制元件分配名稱。 |
| pattern | 正則表示式 | 指定 <input> 元素的值將與其進行檢查的正則表示式 |
| placeholder | 文字 | 指定簡短提示,描述期望的值。 |
| readonly | 只讀 | 將輸入控制元件設定為只讀。它不允許使用者更改值。但是,控制元件可以接收焦點,並且在透過表單控制元件按 Tab 鍵時會被包含在內 |
| required | 必填 | 指定在提交表單之前必須填寫輸入欄位 |
| size | 數字 | 指定控制元件的寬度。如果 type = "text" 或 type = "password",則指的是字元寬度。否則,以畫素為單位。 |
| src | URL | 定義要顯示的影像的 URL。僅用於 type = "image"。 |
| step | 數字 | 指定輸入欄位的合法數字間隔 |
| type | button checkboxcolor date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week | 指定控制元件的型別。 |
| value | 文字 | 指定控制元件的初始值。如果 type = "checkbox" 或 type = "radio",則此屬性是必需的。 |
| width | 畫素 | 指定寬度 |
示例
您可以嘗試執行以下程式碼在 HTML 中實現 <input> 元素 -
<!DOCTYPE html> <html> <head> <title>HTML input Tag</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> First name: <input type = "text" name = "first_name" value = "" maxlength = "100" /> <br /> Last name: <input type = "text" name = "last_name" value = "" maxlength = "100" /> <input type = "submit" value = "Submit" /> </form> </body> </html>
廣告
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP