如何在 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