下列關于html5表單的多樣輸入方式,IT兄弟連 HTML5教程 HTML5表單 多樣的輸入類型1...

原標題:IT兄弟連 HTML5教程 HTML5表單 多樣的輸入類型1

f4068872ab4f0cb236e615f4406af877.png

HTML5擁有多個新的表單輸入類型,這些新特性提供了更好的輸入控制和驗證。并不是所有的主瀏覽器都支持新的input類型,不過我們可以在所有的主瀏覽器中使用它們,即使不被支持,仍然可以顯示為常規的文本域。HTML5 Input類型如表。

表 HTML5 Input類型

8f450fc3b17e210b35d766ed0024318b.png

1 email

email類型用于包含e-mail地址的輸入域,在提交表單時,會自動驗證email域的值,用法如下:

88a85fa571e33507825a00c9e6912cf3.png

上述代碼驗證了email輸入框的郵箱格式,若出錯會有提示。效果如圖1所示:

7b77c24c47afa8e931604b3a9151f488.png

圖1 email的輸入類型

2 url

email類型用于包含url地址的輸入域,在提交表單時,會自動驗證url域的值,用法如下:

1a2b9cc0dd962f8412145897e10abad6.png

上述代碼驗證了email輸入框的郵箱格式,若出錯會有提示。效果如圖2所示:

c14b01a696c967a4cd5b23840db92b40.png

圖2 url的輸入類型

3 number

number類型用于包含數值的輸入域,特別地,我們還可以對數值設置限定,用法如下:

a32deab836bbcba8462de528066e4f9b.png

上述代碼使用了number類型輸入框,為該類型設置了數值范圍為1~100。當我們輸入101時,數值超出了范圍,頁面出現“值必須小于或等于100”的提示。效果如圖3所示:

6dcea9972d1e9b3d043a91b06cd88690.png

圖3 number的輸入類型返回搜狐,查看更多

責任編輯:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/531841.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/531841.shtml
英文地址,請注明出處:http://en.pswp.cn/news/531841.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

v7000更換電池步驟_ups電源運行中是否可以更換電池?應如何操作呢

ups電源在日常使用中除了日常維護工作之外,對于使用達到一定年限的時候,內部使用的ups蓄電池就需要更換了,很多人以為ups不間段電源在工作的時候是可以跟換電池。其實,這個具體就需要看ups電源設計的原理,不同廠家設計…

poj 2031Building a Space Station(幾何判斷+Kruskal最小生成樹)

1 /*2 最小生成樹 幾何判斷3 Kruskal 球心之間的距離 - 兩個球的半徑 < 0 則說明是覆蓋的&#xff01;此時的距離按照0計算 4 */5 #include<iostream>6 #include<cstdio>7 #include<cstring>8 #include<cmath>9 #include<algorithm>…

華為怎么用手機看時間到讀秒_華為手機滅屏也可以看時間?其實設置方法很簡單,不會有些可惜了...

華為作為手機界名副其實的大佬&#xff0c;而且華為手機的口碑也是非常不錯的。那么為什么會有這么多人喜歡華為手機呢&#xff1f;主要是華為手機的質量高&#xff0c;并且用很多實用的小功能&#xff0c;比如說神奇的滅屏顯示功能等等&#xff0c;今天就給大家分享幾個華為手…

將數據轉化成字符串時:用字符串的鏈接 還是 StringBuilder

/*目的&#xff1a;將數據轉化成字符串時&#xff1a;用字符串的鏈接 還是 StringBuilder呢&#xff1f; */ public class Test{public static void main(String[] args){int[] arr{1,2,4,5};System.out.println(arrayToString(arr));}/* public static String arrayToString(…

html頻譜跳動效果,HTML5音頻可視化頻譜跳動代碼

HTML5音頻可視化頻譜跳動代碼*{margin:0;padding:0;}#canvas {display: block;background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);}window.οnclickfunction () {if(oAudio.paused) {oAudio.play();}else{oAudio.pause();}}//創建音頻上下文…

hive轉16進制unhex_Java 進制的轉換

什么是進制&#xff1f;進制也就是進位計數制&#xff0c;是人為定義的帶進位的計數方法(有不帶進位的計數方法&#xff0c;比如原始的結繩計數法&#xff0c;唱票時常用的“正”字計數法&#xff0c;以及類似的tally mark計數)。 對于任何一種進制---X進制&#xff0c;就表示每…

html中css二級聯動,html二級聯動學習筆記

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.htmlJquery的select操作集合jQuery獲取Select選擇的Text和Value: 語法解釋&#xff1a; 1. $("#select_id").change(function()…

poj 2187 Beauty Contest(凸包求解多節點的之間的最大距離)

1 /* poj 2187 Beauty Contest2 凸包&#xff1a;尋找每兩點之間距離的最大值3 這個最大值一定是在凸包的邊緣上的&#xff01; 4 5 求凸包的算法&#xff1a; Andrew算法&#xff01; 6 */7 #include<iostream> 8 #include<cstdio>9 #include&l…

引入ui組件_Vuejs, Semantic CSS前端框架fish-ui

簡介基于vue2.0, github star 690, 一款小眾的UI框架fish-ui&#xff0c;直接上截圖&#xff1a;主要特性配備Vue.js&#xff0c;Moment&#xff0c;Vue-Router&#xff0c;ES6和Babel 6使用Webpack 2.0和Vue LoaderSemantic CSS 組件使用 Less支持現代瀏覽器快速開發安裝npm i…

html5可以用flash,HTML5網頁可以直接看視頻,不用flash嗎,另外WP7為何不支持flash。。。HTML5網頁...

Android中可以直接使用webView來加載HTML5通過video標簽來播放視頻。以下為基本步驟&#xff1a;一、需要在AndroidManifest.xml文件中聲明需要使用HardwareAccelerate, 可以細化到Activity級別&#xff0c;如果不需要的View可以聲明不要用加速&#xff0c;但是需要在代碼中做具…

pojBuy Tickets2828線段樹或者樹狀數組(隊列中倒序插隊)

這題開始的思路就是模擬&#xff1a;就像數組中插點一樣&#xff0c;每一個想買票的人都想往前插隊&#xff01; 但是這樣的話肯定TLE&#xff0c; 看了別人的思路之后才恍然大悟&#xff01; 正解&#xff1a;將開始的正序插入&#xff0c;變成倒序插入&#xff0c;這樣的話&a…

減去字符串_從文本字符串中提取指定值的6個超級技巧解讀

在實際的工作中&#xff0c;從指定的字符串中提取指定文本也是常用的技巧之一&#xff0c;除了手動操作之外&#xff0c;下文的8種應用技巧也是必須要掌握的。一、Left函數法。功能&#xff1a;從指定文本字符串的第一個字符開始&#xff0c;提取指定長度的字符串。語法結構&am…

如果用計算機錄制歌曲需要,網絡歌手怎么用電腦錄音軟件錄歌

現在網上有很多網絡歌手主要分為兩類&#xff0c;一類是原創&#xff0c;一類是翻唱。可是不管是原創還是翻唱都需要自己唱歌錄歌&#xff0c;要有屬于自己的歌曲(自己唱的)。要錄歌就要有設備&#xff0c;畢竟網路歌手剛開始大多數都是草根沒有錢找音樂工作室&#xff0c;只能…

中國剩余定理證明過程

原網址&#xff1a;http://blog.csdn.net/wtq493841534/article/details/5452720 中國剩余定理 中國剩余定理可以描述為&#xff1a; 若某數x分別被d1、、…、dn除得的余數為r1、r2、…、rn&#xff0c;則可表示為下式&#xff1a;xR1r1R2r2…RnrnRD其中R1是d2、d3、…、dn的公…

關閉瀏覽器前提示_win7系統ie總彈出查看和跟蹤下載的關閉方法

今天小編給大家分享的是win7系統ie總彈出查看和跟蹤下載的關閉方法&#xff0c;使用ie瀏覽器上網的時候&#xff0c;有些用戶會遇到ie總彈出查看和跟蹤下載的窗口&#xff0c;很多用戶想關閉掉此提示&#xff0c;卻不知如何關閉查看和跟蹤下載的窗口&#xff0c;那么請參照以下…

html引入百度地圖報錯,vue引入百度地圖BMapGL,或者其他個性化地圖

3.jpgvue的百度地圖早就有vue-baidu-map這里就不贅述了&#xff0c;自己去直接對著API寫就好了&#xff0c;基本上已經滿足絕大多數需求了還簡單方便。vue-baidu-map 傳送門 https://dafrok.github.io/vue-baidu-map/#/zh/index這里主要是在vue里面引入BMapGL&#xff0c;或者其…

Sort the Array

1 /*2 思路&#xff1a; 3 找到單調下降串的起始位置[l, r]4 如果左邊 0...l-1中的最大值 > l...r中的最小值 或者5 r1...n中的最小值 < l...r中的最大值 都是不能實現排序的&#xff01; 6 */7 #include<iostream>8 #include<cstdio>9 #include…

排序千萬級數據_從千萬級房產成交量排名,窺探中國城市的真實家底

原標題&#xff1a;從千萬級房產成交量排名&#xff0c;窺探中國城市的真實家底 文&#xff0f;孫不熟 來源/城市戰爭 如果你有1000萬以上的買房預算&#xff0c;你的選擇其實很少&#xff0c;總共不超過10個城市&#xff0c;這就是中國城市和樓市的真實家底。 昨天推送了一篇《…

html 實現列表組并排,列表組--自定義列表組

Bootstrap框加在鏈接列表組的基礎上新增了兩個樣式&#xff1a;?list-group-item-heading&#xff1a;用來定義列表項頭部樣式?list-group-item-text&#xff1a;用來定義列表項主要內容這兩個樣式最大的作用就是用來幫助開發者可以自定義列表項里的內容&#xff0c;如下面的…

poj1006生理周期(中國剩余定理)

1 /*2 中國剩余定理可以描述為&#xff1a;3 若某數x分別被d1、、…、dn除得的余數為r1、r2、…、rn&#xff0c;則可表示為下式&#xff1a;4 xR1r1R2r2…RnrnRD5 其中R1是d2、d3、…、dn的公倍數&#xff0c;而且被d1除&#xff0c;余數為1&#xff1b;&#xff08;稱為R1相對…