HTML input 標籤的基本使用

2021-10-10 11:29:13 字數 3215 閱讀 9589

input標籤是用於web的表單建立互動性控制項,以便接受來自使用者輸入提交的資料。

sample

type屬性

****標籤的工作方式取決於type屬性的值。

type

描述button

沒有預設行為的按鈕,上面顯示 value 屬性的值,預設為空。

checkbox

可以設定選中或未選中

color

用於指定顏色的控制項;在支援的瀏覽器中,啟用時會開啟取色器。

data

輸入日期的控制項(年、月、日,不包括時間)。在支援的瀏覽器啟用時開啟日期選擇器或年月日的數字滾輪。

datatime-local

輸入日期和時間的控制項,不包括時區。在支援的瀏覽器啟用時開啟日期選擇器或年月日的數字滾輪。

email

file

讓使用者選擇檔案的控制項。使用accept屬性規定控制項能選擇的檔案型別。

hidden

不顯示的控制項,其值仍會提交到伺服器。舉個例子,右邊就是乙個**的控制項。

image

帶影象的 submit 按鈕。顯示的影象由 src 屬性規定。如果 src 缺失,alt 屬性就會顯示。

month

輸入年和月的控制項,沒有時區。

number

用於輸入數字的控制項。如果支援的話,會顯示滾動按鈕並提供預設驗證(即只能輸入數字)。擁有動態鍵盤的裝置上會顯示數字鍵盤。

password

單行的文字區域,其值會被遮蓋。如果站點不安全,會警告使用者。

radio

單選按鈕,允許在多個擁有相同 name 值的選項中選中其中乙個。

range

此控制項用於輸入不需要精確的數字。控制項是乙個範圍元件,預設值為正中間的值。同時使用htmlattrdefmin 和 htmlattrdefmax來規定值的範圍。

reset

此按鈕將表單的所有內容重置為預設值。不推薦。

search

用於搜尋字串的單行文字區域。輸入文字中的換行會被自動去除。在支援的瀏覽器中可能有乙個刪除按鈕,用於清除整個區域。擁有動態鍵盤的裝置上的回車圖示會變成搜尋圖示。

submit

用於提交表單的按鈕。

tel用於輸入**號碼的控制項。擁有動態鍵盤的裝置上會顯示**數字鍵盤。

text

預設值。單行的文字區域,輸入中的換行會被自動去除。

time

用於輸入時間的控制項,不包括時區。

url用於輸入 url 的控制項。類似 text 輸入,但有驗證引數,在支援動態鍵盤的裝置上有相應的鍵盤。

week

用於輸入以年和週數組成的日期,不帶時區。屬性

屬性相關的type

描述altimage

是可訪問的的要求

widthimage

與的width屬性一樣,水水平方向7

heightimage

與的height屬性相同,垂直方向

srcimage

與的src屬性一樣,影象資源的位址

accept

file

用於規定檔案上傳中的期望的檔案的型別

capture

file

檔案上傳控制項中**拍攝的方式

checkedradio,checkbox

用於控制控制項是否被選中

dirname

text,search

表單區域的乙個名字,用於在提交表單時傳送元素的方向性

formaction

image,submit

用於提交表單的url

formenctype

image,submit

表單資料集的編碼方式,用於表單的提交

formmethod

image,submit

用於表單提交的http

formnovalidate

image,submit

提交表單時繞過對表單控制項的驗證

formtarget

image,submit

表單提交的瀏覽上下文

form所有

將控制項與form元素聯絡到一起

autocomplete所有

用於表單的自動填充的功能

autofocus所有

頁面載入時候自動聚焦到此表單控制項

disabled所有

表單控制項是否被禁用

name所有

input表單控制項的名字,以鍵值對的形式隨表單一起提交

type

所有value所有

表單控制項的值,以鍵值對的形式一起提交

list絕大部分

自動填充選項的的id值

readonly絕大部分

布林值,存在時表單控制項不可編輯

required絕大部分

布林值,存在時表單控制項必須填寫

max數字type

最大值min

數字type

最小值step

數字type

有效自增值

maxlength

password,text,search,tel,url

value的最大長度(最多字元數目)

minlength

password,text,search,tel,url

value的最小長度(最少字元數目)

pattern

password,tel,text

匹配有效value的模式(patten)

placeholderpassword,text,search,tel,url

當表單控制項中為空時,控制項中的提示內容

multipleemail,file

布林值,是否允許多個值

sizeemail,password,tel,text

控制項的大小

HTML Input 標籤限制輸入型別

最近在開發完乙個專案後,又測試人員測試bug,然後我根據他們測試出來的bug乙個乙個的改,然後就遇到了乙個問題,文字框是用來搜尋,但是,比如這個文字框是用來搜尋年齡的區間,輸入條件的時候,如果輸入了非數字的字元就不能輸入。像這樣的問題,其實可以通過正規表示式來做的,我們開發的專案中是已經有相應的正規...

關於 html input標籤的幾個常用操作

input input webkit input placeholder input focus輸入框選中後樣式有了變化 方法1 onfocus this.blur 當滑鼠放不上就離開焦點 方法2 readonly 注意 readonly表示此域的值不可修改,僅可與 type text 配合使用,可...

iOS MBProgressHUD的基本使用

方式1.直接在view上show hud mbprogresshud showhudaddedto self.view animated yes retain hud.delegate self 常用的設定 小矩形的背景色 hud.color uicolor clearcolor 這兒表示無背景 顯...