HTML <input> 元素用法

此篇是在說明 input 用法,由那些組合可以使用

INPUT 組合


下表是說明 input 元素輸入類型有那些

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

各類型使用方式


text 本文

<input type="text"> 定義了一個 單行本文輸入字段

<p>請輸入文字</p>
<input type="text" id="text" name="text">
  • 顯示結果

請輸入文字


password 密碼

<input type="password"> 定義了一個密碼字段

<p>請輸入密碼</p>
<input type="password" id="password" name="password">
  • 顯示結果

請輸入密碼

在密碼字段中的字符被掩碼(顯示為星號或圓圈)


submit 提交

<input type="submit"> 定義了一個按鈕 提交表單數據以表格處理程序。

的形式處理程序通常是具有用於處理輸入數據的腳本服務器頁面。

表單處理程序是在窗體的指定action 屬性:

<form action="#">
	<p>請輸入密碼</p>
	<input type="password" id="password" name="password">
  	<input type="submit" value="送出">
</form>
  • 顯示結果

請輸入密碼


reset 重置

<input type="reset"> 定義了一個復位按鈕 ,將所有表單值重置為默認值

<form action="#">
	<p>請輸入密碼</p>
	<input type="password" id="password" name="password">
  	<input type="submit" value="送出">
    <input type="reset" value="重置">
</form>
  • 顯示結果

請輸入密碼

如果更改輸入值,然後單擊“重置”按鈕,表格數據將被重置為默認值。


radio 單選

<input type="radio"> 定義了一個單選按鈕

<form action="#">
	<p>男生</p>
	<input type="radio" id="male" name="gender" value="male">
    <p>女生生</p>
  	<input type="radio" id="female" name="gender" value="female">
</form>
  • 顯示結果

男生

女生


checkbox 複選

<input type="checkbox"> 定義了一個複選

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1">看書</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">蛋糕</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3">開水</label>
</form>
  • 顯示結果



button 按鍵

<input type="button"> 定義了一個按鍵

<input type="button" onclick="alert('Hello World!')" value="按我">
  • 顯示結果

color 顏色選擇

<input type="color"> 用於應該包含顏色的輸入字段。

根據瀏覽器的支持,顏色選擇器可以在輸入字段中顯示的。

<form>
  <label for="favcolor">選擇您想要的顏色</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
  • 顯示結果

date 日期選擇

<input type="date"> 用於應該包含日期輸入字段。

根據瀏覽器的支持,日期選擇器可以在輸入字段中顯示的。

<form>
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">
</form>
  • 顯示結果

  • 您也可以使用 minmax 屬性來限制添加日期:
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31">
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
  • 顯示結果



DateTime 日期時間

<input type="datetime-local"> 指定的日期和時間輸入欄,沒有時區。

根據瀏覽器的支持,日期選擇器可以在輸入字段中顯示的。

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
  • 顯示結果

email 電子郵件

<input type="email"> 用於應該包含一個E-mail地址輸入字段。

根據瀏覽器支持,電子郵件地址,可以自動提交時驗證。

一些智能手機識別出郵件類型,並添加“.COM”的鍵盤相匹配的電子郵件的輸入。

<form>
  <label for="email">輸入您的電子郵件</label>
  <input type="email" id="email" name="email">
</form>
  • 顯示結果

file 檔案上傳

<input type="file"> 定義文件選擇字段和文件上傳一個“瀏覽”按鈕

<form>
  <label for="myfile">請選擇要上傳檔</label>
  <input type="file" id="myfile" name="myfile">
</form>
  • 顯示結果

month 月份

<input type="month"> 允許用戶選擇年份和月份。

根據瀏覽器的支持,日期選擇器可以在輸入字段中顯示的。

<form>
  <label for="bdaymonth">選擇 (年和月):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>
  • 顯示結果

number 數字

<input type="number"> 定義了一個 數字輸入字段。

您還可以設置什麼號碼被接受的限制。

下面的例子顯示一個數字輸入字段,在這裡可以為1至5輸入一個值:

<form>
  <label for="quantity">輸入值 (限 1 到 5 之間):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
  • 顯示結果

輸入限制

下面是一些常見的輸入限制列表:

屬性 說明
checked 指定在頁面加載時應預先選擇輸入字段(對於type =“ checkbox”或type =“ radio”)
disabled 指定應禁用輸入字段
max 指定輸入字段的最大值
maxlength 指定輸入字段的最大字符數
min 指定輸入字段的最小值
pattern 指定用於檢查輸入值的正則表達式
readonly 指定輸入字段為只讀(無法更改)
required 指定輸入字段為必填字段(必須填寫)
size 指定輸入字段的寬度(以字符為單位)
step 指定輸入字段的合法編號間隔
value 指定輸入字段的默認值

您將了解更多關於在下一章中輸入的限制。

下面的例子顯示一個數字輸入字段,可在其中輸入一個值從0到100,以10步的默認值是30:

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
  • 顯示結果

range 範圍

<input type="range"> 限定用於輸入數字,其確切值(像滑塊控制)並不重要的控制。默認範圍是0到100。但是,您可以設置被接受什麼數字與限制 minmax 以及 step 屬性:

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>
  • 顯示結果

search 搜索

<input type="search"> 於搜索字段(搜索字段的行為像一個普通的文本字段)

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
  • 顯示結果

tel 電話

<input type="tel"> 用於應該包含電話號碼輸入字段

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
  • 顯示結果

time 時間

<input type="tel"> 允許用戶選擇時間(無時區)。

根據瀏覽器的支持,一時間選擇器可以在輸入字段中顯示的。

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>
  • 顯示結果

url 連接

<input type="url"> 用於應該包含URL地址的輸入域。

根據瀏覽器支持,URL字段可以自動提交時驗證。

一些智能手機識別URL類型,並增加了“.COM”的鍵盤相匹配的網址輸入。

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>
  • 顯示結果

week 週

<input type="week"> 允許用戶選擇一個星期的一年。

根據瀏覽器的支持,日期選擇器可以在輸入字段中顯示的。

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>
  • 顯示結果



參考相關網頁