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

multipart/form-data

text/plain
指定提交表單資料到伺服器時應如何對其進行編碼
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>

更新於: 2020-03-03

265 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告