HTML5新增input型別

2021-07-24 07:07:29 字數 1331 閱讀 2614

發表於 2016-06-16 

|   分類於

前端 |   閱讀次數 

4在html4等早期版本中,input元素已經有了一些type型別,type可取的值有下面這些:

text文字型別:

password密碼型別:

radio 單選型別:選項

checkbox 多選型別:選項

file 檔案型別:

submit 提交按鈕:

reset重置按鈕:

button定義按鈕:

image 定義按鈕:

hidden定義隱藏域:

在html5中,input元素新增了一些型別,有email郵件型別、number數字型別、range數字滑動條、url位址型別、date日期型別及search搜尋型別。下面我們來逐個介紹一下它們。

跟文字框類似,但它只接受符合email郵件格式的字串,當表單提交時會自動檢測,若不合法,則會給出提示。

html**如下:

跟文字框類似,它只接受數字型別的值,表單提交時會自動檢測,若不合法,則會給出提示。

html**如下:

它展現出來是乙個可以拖拉的滑動條,包含一定的數字範圍,如:

當拖動滑動塊時,它的value值會在1到10之間變化。

跟文字框類似,它只接受**型別的值,表單提交時會自動檢測,若不合法,則會給出提示。

html**如下:

當此類表單成為焦點時,會自動彈出日曆或者是調節按鈕,但其樣式會由於瀏覽器核心的不同而不同,此型別有一系列的只可選:

date:選取日、月、年

month:選取月、年

week:選取周、年

time:選取時間(小時和分鐘)

datetime:選取時間、日、月、年,為utc時間

datetime-local:選取時間、日、月、年,為本地時間

html**如下:

其它的只需更改type值就可以了,就不一一枚舉了。

跟文字框類似,它可以接受任意的值作為關鍵字,我們可以通過value獲取這些關鍵字。

html**如下:

html5 新增 input 型別

input 新增型別 email url number range date picker search color tel date picker date 選取日 月 年 month 選取月 年 week 選取周 年 time 選取時間 小時和分鐘 datetime 選取時間 日 月 年 utc...

HTML5新增input表單

html5新增input表單 input表單及其屬性 type email 限制使用者輸入必須為e mail型別 type url 限制使用者輸入必須為 和 型別 type date 限制使用者輸入必須為日期型別 type month 限制使用者輸入必須為月份型別 type time 限制使用者輸入...

html5學習筆記二 新增input 型別

email 244680111 qq.com url 數字min最小值 max最大值 input 型別 range range 型別用於應該包含一定範圍內數字值的輸入域。range 型別顯示為滑動條。您還能夠設定對所接受的數字的限定 input 型別 date pickers 資料檢出器 html ...