HTML input 標簽示例詳解
發(fā)布時間:2025-06-20 16:36:40 作者:朝陽39
我要評論
input 標簽主要用于接收用戶的輸入,隨 type 屬性值的不同,變換其具體功能,本文通過實例圖文并茂的形式給大家介紹HTML input 標簽,感興趣的朋友一起看看吧
input 標簽主要用于接收用戶的輸入,隨 type 屬性值的不同,變換其具體功能。
通用屬性
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| name | 字符串 | 定義輸入字段的名稱,在表單提交時,服務器通過該名稱來獲取對應的值 |
| disabled | 布爾值 | 禁用輸入框,使其無法被用戶修改和操作,也不會被提交 |
| readonly | 布爾值 | 使輸入框內容只讀,無法編輯,但可以被選中和復制 |
輸入框
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| value | 字符串 | 輸入框的默認值 |
| placeholder | 字符串 | 輸入框內的提示文本,當用戶未輸入內容時顯示,輸入內容后消失 |
單行文本輸入框 text

<input type="text" name="username" placeholder="請輸入用戶名" />
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| maxlength | 數(shù)字 | 可輸入的最大字符數(shù) |
密碼輸入框 password

<input type="password" name="password" placeholder="請輸入密碼" />
數(shù)字輸入框 number
可通過上下箭頭調整數(shù)值

<input type="number" name="age" min="0" max="200" />
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| min | 數(shù)字 | 最小值 |
| max | 數(shù)字 | 最大值 |
| step | 數(shù)字 | 輸入值的增量或減量 |
step="2"表示輸入值的增量或減量為 2,min="0"表示最小值為 0。用戶只能輸入 0、2、4、6 等符合步長規(guī)則的值。
電子郵件輸入框 email

<input type="email" name="email" placeholder="請輸入郵箱地址" />
網(wǎng)址輸入框 url

<input type="url" name="website" placeholder="請輸入網(wǎng)址">
搜索輸入框 search
用于搜索的文本字段,一些瀏覽器會顯示搜索圖標等樣式

<input type="search" name="search" placeholder="請輸入搜索內容" />
按鈕 submit reset button image

<input type="submit" value="提交" />
<input type="reset" value="重置" />
<!-- 普通按鈕 -->
<input type="button" value="按鈕" />
<!-- 使用圖像作為提交按鈕 -->
<input type="image" src="submit-button.png" alt="Submit Form" />- 提交按鈕,用于將表單數(shù)據(jù)發(fā)送到服務器進行處理
- 重置按鈕,點擊可將表單字段重置為初始值
- 普通按鈕,通常與 JavaScript 一起使用來觸發(fā)腳本或執(zhí)行特定操作
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| formaction | 字符串 | 用于覆蓋 <form> 元素本身的 action 屬性,允許在同一個表單中為不同的提交按鈕指定不同的目標 URL,使表單數(shù)據(jù)可以根據(jù)不同的操作需求提交到不同的處理頁面。 |
<input type="submit" formaction="URL1"> <input type="image" formaction="URL2"> <button type="submit" formaction="URL3">提交</button>
用戶點擊 <input type="image"> 按鈕時,除了表單中的其他數(shù)據(jù),瀏覽器還會自動提交兩個額外的參數(shù):x 和 y,它們分別表示用戶點擊圖像的水平和垂直坐標。在服務器端腳本中可以獲取這些坐標值。
單選 radio

<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女| 屬性 | 屬性值 | 功能 |
|---|---|---|
| checked | 布爾值 | 設置默認選中狀態(tài) |
多選 checkbox
<input type="checkbox" name="hobby" value="籃球" />籃球
<input checked type="checkbox" name="hobby" value="閱讀" />閱讀
<input checked type="checkbox" name="hobby" value="編程" />編程| 屬性 | 屬性值 | 功能 |
|---|---|---|
| checked | 布爾值 | 設置默認選中狀態(tài) |
文件上傳 file

<input type="file" />
滑塊 range

<input type="range" name="range" min="0" max="100" step="1" />
| 屬性 | 屬性值 | 功能 |
|---|---|---|
| step | 數(shù)字 | 滑塊移動的間隔 |
| min | 數(shù)字 | 最小值 |
| max | 數(shù)字 | 最大值 |
step="5"意味著滑塊每次移動的距離是 5 個單位,用戶可以選擇的值為 0、5、10 等
顏色選擇器 color
用戶可以選擇顏色

<input type="color" name="color" />
日期選擇器 date
<input type="date" name="birthdate" />

step="7"表示日期選擇的間隔為 7 天,用戶只能選擇每周的同一天。
時間選擇器 time
<input type="time" name="startTime" />

到此這篇關于HTML input 標簽的文章就介紹到這了,更多相關html input 標簽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
在HTML中限制input 輸入框只能輸入純數(shù)字的實現(xiàn)
這篇文章主要介紹了在HTML中限制input 輸入框只能輸入純數(shù)字的實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參2021-01-27
這篇文章主要介紹了html中input提示文字樣式修改,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-30html form表單input使用disabled后提交不能獲取表單值的解決方法
這篇文章主要介紹了html form表單input使用disabled后提交不能獲取表單值的解決方法,需要的朋友可以參考下2018-07-18
HTML input file控件限制上傳文件類型_動力節(jié)點Java學院整理
如何限制上傳文件類型?這篇文章主要為大家詳細介紹了HTML input file控件限制上傳文件類型,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21限制html文本框input只能輸入數(shù)字和小數(shù)點
本文主要介紹了限制html文本框input只能輸入數(shù)字和小數(shù)點的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-27HTML中文件上傳時使用的<input type="file">元素的樣式自定義
這篇文章主要介紹了HTML中文件上傳時使用的<input type="file">元素的樣式自定義的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-29淺談html中input只讀屬性readonly和disable的區(qū)別
下面小編就為大家?guī)硪黄獪\談html中input只讀屬性readonly和disable的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-14- 下面小編就為大家?guī)硪黄獪\析html input 等值改變添加監(jiān)聽事件。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-04-15
- 這篇文章主要介紹了詳解HTML的input標簽及其禁用方法,歸納了幾種CSS中使用disabled屬性實現(xiàn)禁用的方法,需要的朋友可以參考下2015-08-05
- 有時候瀏覽器有很多緩存,我們就執(zhí)行不了某種操作,必須要清除緩存才可以運行,其實多數(shù)瀏覽器默認會緩存input的值,只有使用ctl+F5強制刷新的才可以清除緩存記錄。如果不2014-11-11



