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