語法

<input type="" name="" id="" value="" placeholder=""/>

屬性

• type：判斷輸入資訊的類別，此屬性值必須寫，不寫預設是text文字資訊（text、password、radio、checkbox...）
• name：標明該input名稱，可用於設定radio單選操作
• size：輸入框的長度大小
• maxlength：輸入框中允許輸入字元的最大數
• readonly：表示該框中只能顯示，不能新增修改
• autocomplete：是否儲存使用者輸入值，值為on(預設)或off
• autofocus：獲取文字框焦點
• required：設定文字框為必填內容
• pattern：設定正則校驗
• value：給input輸入框設定預設值
• placeholder：文字提示資訊，用來標註該input是幹啥的

type屬性

1.文字域（type="text"）

<form action="" method="" target="">
    <!-- 預設type值為text文字輸入框 -->
    <input type="text"/>
</form>

注意:表單本身並不可見。同時，在大多數瀏覽器中，文字域的預設寬度是 20 個字元。

2.密碼欄位（type="password"）

<form 
 
action="" method="" target="">
    <!-- 通過設定type值為password定義密碼輸入框 -->
    <input type="password"/>
</form>

注意:密碼欄位字元不會明文顯示，而是以星號或圓點替代。

3.單選按鈕（type="radio"）

<form action="" method="" target="">
    <!-- 通過設定type值為radio定義單選框 -->
    <input type="radio" name="sex" value
 
="male">男
    <input type="radio" name="sex" value="female">女
</form>

注意:需要設定radio並將name屬性的值寫成一致實現單選

4.複選框（type="checkbox"）

<form action="" method="" target="">
    <!-- 通過設定type值為checkbox定義複選框 -->
    <input type="checkbox"/>路飛
    <!-- 設定checked屬性可以預設勾選 -->
    <input type="checkbox" checked/>索隆
    <input type="checkbox"/>娜美
</form>

注意:設定checked屬性表示預設選中

5.時分（type="time"）

<form action="" method="" target="">
    <!-- 通過設定type值為time定義時間選擇器 -->
    <input type="time"/>
</form>

6.年周（type="week"）

<form action="" method="" target="">
    <!-- 通過設定type值為week定義周選擇器-->
    <input type="week"/>
</form>

7.年月（type="month"）

<form action="" method="" target="">
    <!-- 通過設定type值為month定義月份選擇器-->
    <input type="month"/>
</form>

8.年月日（type="date"）

<form action="" method="" target="">
    <!-- 通過設定type值為date定義日期選擇器-->
    <!-- 通過value可以設定預設時間 -->
    <input type="date" value="2022-01-10">
    <input type="date"/>
</form>

注意：可以通過value值來設定預設時間

9.年月日時分（type="datetime-local"）

<form action="" method="" target="">
    <!-- 通過設定type值為datetime-local選擇日期資訊-->
    <input type="datetime-local"/>
</form>

10.檔案上傳（type="file"）

<form action="" method="" target="">
    <!-- 通過設定type值為file可以上傳本地檔案-->
    <input type="file"/>
</form>

注意：設定multiple -- 可以選擇多個檔案，然後提示使用者選中了幾個檔案

11.電子郵箱（type="email"）

<form action="" method="" target="">
    <!-- 通過設定type值為email-->
    <input type="email"/>
    <input type="submit" value="提交">
</form>

注意：輸入不是郵箱時，無法提交，並自動給予提示

12.選擇顏色（type="color"）

<form action="" method="" target="">
    <!-- 通過設定type值為color，可以選擇顏色-->
    <input type="color"/>
    <input type="submit" value="提交">
</form>

13.網址輸入框（type="url"）

<form action="" method="" target="">
    <!-- 通過設定type值為url輸入網址-->
    <input type="url"/>
    <input type="submit" value="提交">
</form>

注意：輸入不是網址時，無法提交，並自動給予提示

14.可清除輸入框（type="search"）

<form action="" method="" target="">
    <!-- 通過設定type值為search-->
    <input type="search"/>
    <input type="submit" value="提交">
</form>

注意：設定type型別為search，仍是文字框，只是右邊多了一個x，點選可以直接清空文字框內容

15.數字輸入框（type="number"）

<form action="" method="" target="">
    <!-- 通過設定type值為number,定義只能輸入數字的文字框-->
    <input type="number"/>
</form>

注意：設定type型別為number，文字框只能輸入數字，其他字元一律不能輸入，並且右側可以對數字進行增減

16.隱藏文字框（type="hidden"）

<form action="" method="" target="" name="f">
    <!-- 通過設定type值為hidden,隱藏文字框-->
    <input type="hidden" value="hello" name="hiddenInfo"/>
</form>
<script type="text/javascript">
    alert("隱藏域的值為："+document.f.hiddenInfo.value)
</script>

注意：設定type型別為hidden，通常稱為隱藏域，在頁面無法檢視輸入框在哪兒

17.進度條（type="range"）

<form action="" method="" target="" name="f">
    <!-- 通過設定type值為range,定義進度條-->
    <input type="range" step="1" min="0" max="10"  value="5"/>
</form>

• min：最小值
• max：最大值
• step：步數
• value：當前步數

這裡解釋下step屬性，以上面例子為例：

　　設定了最大致為10，step為1，則需要10步才能填滿

　　max不變，如果將step設定為2，則需要5步才能填滿

　　max不變，如果將step設定為3，因為最大為10，所以只能用3步到9的位置，還餘1，則不能填滿

18.普通按鈕（type="button"）

<form action="" method="" target="" name="f">
    <!-- 通過設定type值為button為普通按鈕-->
    <input type="button" value="普通按鈕"/>
    <!-- 也可以通過button控制元件設定 -->
    <button type="button">按鈕</button>
</form>

19.重置按鈕（type="reset"）

<form action="" method="" target="" name="f">
    <input type="text"/>
    <!-- 通過設定type值為reset定義重置按鈕-->
    <input type="reset" value="重置"/>
    <!-- 也可以通過button控制元件設定 -->
    <button type="reset">重置</button>
</form>

注意：輸入內容後，點選重置按鈕會清空form表單，所有內容都將被清空

20.提交按鈕（type="submit"）

<form action="" method="" target="" name="f">
    <input type="text"/>
    <!-- 通過設定type值為submit定義提交按鈕-->
    <input type="submit" value="提交"/>
    <!-- 也可以通過button控制元件設定 -->
    <button type="submit">提交</button>
</form>

注意：輸入內容後，點選提交按鈕會提交到form表單指定的地址中

21.圖片（type="image"）

<form action="xxx.php" method="" target="" name="f">
    <input type="image"/>
</form>

其他屬性

1.size

size可以設定輸入框的長度大小

<form action="">
    <!-- size屬性設定輸入框的長度 -->
    <input type="text" size="0" value="預設值0"/>
    <input type="text" size="5" value="長度5"/>
    <input type="text" size="10" value="長度10"/>
</form>

2.maxlength

maxlength允許輸入框中輸入字元的最大長度

<form action="">
    <!-- maxlength屬性設定輸入框允許輸入字元最大長度 -->
    <input type="text" value="" maxlength="10"/>最大長度為10
</form>

3.readonly

表示該框中只能顯示，不能新增修改

<form action="">
    <!-- readonly屬性設定輸入框內容不可修改 -->
    <input type="text" value="只能顯示內容，不允許修改" readonly/>
    <!-- or -->
    <input type="text" value="只能顯示內容，不允許修改" readonly="readonly"/>
</form>

4.placeholder

輸入框提示資訊

<form action="">
    <!-- placeholder指定輸入框提示資訊 -->
    賬號：<input type="text" placeholder="請輸入賬號"/><br>
    密碼：<input type="password" placeholder="請輸入密碼"/>
<script type="text/javascript">

5.autocomplete

是否儲存使用者輸入值，值為on(預設)或off，on是儲存，off是不儲存

<!-- autocomplete:是否儲存輸入值,on是儲存，off是不儲存 -->
<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname">
  Last name: <input type="text" name="lname" autocomplete="off">
  <input type="submit">
</form>

填寫並提交表單，然後重新重新整理頁面獲取焦點就可自動填充內容，這裡關閉了第二個輸入框，所以不會儲存使用者之前輸入的值

6.autofocus

獲取文字框焦點，當文字框有這個屬性時，開啟網頁自動獲取這個文字框的焦點

<form action="demo-form.php" autocomplete="on">
    <!-- autofocus:頁面載入完畢，輸入框自動獲取焦點 -->
    <input type="text" autofocus="autofocus"/>自動獲取焦點
    <!-- 以下寫法不能正確獲取焦點 -->
    <input type="text" autofocus>
</form>

注意：autofocus不能向readonly屬性一樣簡寫，必須寫全：autofocus="autofocus"

7.required

填寫這個屬性使文字框為必填內容，否則無法提交

<form action="demo-form.php" autocomplete="on">
    <!-- required:設定輸入框必填內容-->
    <input type="text" required="required"/>此輸入框必填
    <!-- 以下寫法錯誤 -->
    <input type="text" required">
    <input type="submit">
</form>

注意：設定了 required="required" 屬性後，當前輸入框必須輸入內容，否則會給出提示警告，並且不能簡寫required。

8.pattern

設定正則驗證，使輸入內容必須符合正則要求才能提交

<form action="demo-form.php">
    <!-- pattern:正則驗證，使輸入內容必須符合正則要求才能提交-->
    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三個英文字母">
    <input type="submit">
</form>

輸入不正確：

輸入正確：

9.value

設定輸入框預設值

<form action="demo-form.php" autocomplete="on">
    <!-- value：設定輸入框預設值 -->
    <input type="text" value="輸入框中預設值"/>
    <input type="text" value="123"/>
    <input type="text" value="壹貳叄"/>
    <input type="submit">
</form>

文字框為必填內容，否則無法提交

本文來自部落格園，作者：不知名前端李小白，轉載請註明原文連結：https://www.cnblogs.com/libo-web/p/15784654.html