HTML input 標簽示例詳解
發(fā)布時間:2025-06-20 16:36:40 作者:朝陽39
我要評論

input 標簽主要用于接收用戶的輸入,隨 type 屬性值的不同,變換其具體功能,本文通過實例圖文并茂的形式給大家介紹HTML input 標簽,感興趣的朋友一起看看吧
input 標簽主要用于接收用戶的輸入,隨 type 屬性值的不同,變換其具體功能。
通用屬性
屬性 | 屬性值 | 功能 |
---|---|---|
name | 字符串 | 定義輸入字段的名稱,在表單提交時,服務器通過該名稱來獲取對應的值 |
disabled | 布爾值 | 禁用輸入框,使其無法被用戶修改和操作,也不會被提交 |
readonly | 布爾值 | 使輸入框內(nèi)容只讀,無法編輯,但可以被選中和復制 |
輸入框
屬性 | 屬性值 | 功能 |
---|---|---|
value | 字符串 | 輸入框的默認值 |
placeholder | 字符串 | 輸入框內(nèi)的提示文本,當用戶未輸入內(nèi)容時顯示,輸入內(nèi)容后消失 |
單行文本輸入框 text
<input type="text" name="username" placeholder="請輸入用戶名" />
屬性 | 屬性值 | 功能 |
---|---|---|
maxlength | 數(shù)字 | 可輸入的最大字符數(shù) |
密碼輸入框 password
<input type="password" name="password" placeholder="請輸入密碼" />
數(shù)字輸入框 number
可通過上下箭頭調(diào)整數(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="請輸入搜索內(nèi)容" />
按鈕 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 標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
在HTML中限制input 輸入框只能輸入純數(shù)字的實現(xiàn)
這篇文章主要介紹了在HTML中限制input 輸入框只能輸入純數(shù)字的實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參2021-01-27- 這篇文章主要介紹了html中input提示文字樣式修改,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-30
html form表單input使用disabled后提交不能獲取表單值的解決方法
這篇文章主要介紹了html form表單input使用disabled后提交不能獲取表單值的解決方法,需要的朋友可以參考下2018-07-18HTML 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