超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

vue-router的使用方法介紹input框的23種類型

2018-6-20    seo達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

input框的類型到底有多少種呢?零零總總算起來有23種。


▍總述

常用的并且能為大多數(shù)瀏覽器所識別的類型大概有:text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

另外還有一些類型:tel、email、url、datetime、search。這些類型部分瀏覽器不支持識別或校驗。


▍text:文本

代碼:

[html] view plain copy
  1. <input type="text" />  

效果:

注意:當input沒有填寫類型時,默認為文本類型。

[html] view plain copy
  1. <input />  


▍password:密碼

代碼:

[html] view plain copy
  1. <input type="password" />  

效果:


▍number:數(shù)字

代碼:

[html] view plain copy
  1. <input type="number" />  

效果:


▍button:按鈕

代碼:

[html] view plain copy
  1. <input type="button" value="我是按鈕" />  

效果:


▍tel:電話

代碼:

[html] view plain copy
  1. <input type="tel" />  

效果:

注意:tel類型似乎沒有什么實際作用。


▍email:郵件

代碼:

[html] view plain copy
  1. <input type="email" />  

效果:

注意:火狐對email類型有校驗,360瀏覽器無校驗。


▍f(xié)ile:文件

代碼:

[html] view plain copy
  1. <input type="file" />  

效果:


▍range:滑動條

代碼:

[html] view plain copy
  1. <input type="range" />  

效果:


▍date:日期

代碼:

[html] view plain copy
  1. <input type="date" />  

效果:


▍month:月份

代碼:

[html] view plain copy
  1. <input type="month" />  

效果:


▍week:周

代碼:

[html] view plain copy
  1. <input type="week" />  

效果:


▍time:時間

代碼:

[html] view plain copy
  1. <input type="time" />  

效果:


▍datetime:時間、日、月、年(UTC時間)

代碼:

[html] view plain copy
  1. <input type="datetime" />  

效果:

注意:火狐、360瀏覽器都對datetime不支持,會按照text類型處理。


datetime-local:時間、日、月、年(本地時間)

代碼:

[html] view plain copy
  1. <input type="datetime-local" />  

效果:


▍radio:單選框

代碼:

[html] view plain copy
  1. <input type="radio" name="man" id="man" value="man"/><label for="man"></label>  
  2. <input type="radio" name="man" id="women" value="woman"/><label for="woman"></label>  

效果:


▍checkbox:復選框

代碼:

[html] view plain copy
  1. <input type="checkbox" name="interest" value="run" id="run" /><label for="run">跑步</label>  
  2. <input type="checkbox" name="interest" value="guitar" id="guitar" /><label for="guitar">吉他</label>  
  3. <input type="checkbox" name="interest" value="yoga" id="yoga" /><label for="yoga">瑜伽</label>  
  4. <input type="checkbox" name="interest" value="read" id="read" /><label for="read">閱讀</label>  

效果:


▍image:圖片

代碼:

[html] view plain copy
  1. <input type="image" src="http://p0.so.qhimgs1.com/bdr/_240_/t01cbdeda95800117ac.jpg" />  

效果:


▍color:顏色

代碼:

[html] view plain copy
  1. <input type="color" />  

效果:


▍search:搜索框

代碼:

[html] view plain copy
  1. <input type="search" />  

效果:

注意:search似乎與text的效果沒有什么區(qū)別。。。


▍reset:重置按鈕

代碼:

[html] view plain copy
  1. <input type="reset" />  

效果:

注意:reset按鈕一般用于form表單中


▍submit:提交按鈕

代碼:

[html] view plain copy
  1. <input type="submit" />  

效果:

注意:submit按鈕一般用于form表單中。


▍hidden:隱藏

代碼:

[html] view plain copy
  1. <input type="hidden" />  

效果:


注意:hidden類型會將input隱藏,所以什么都看不到,而且被隱藏的input框也不會占用空間。


▍url:路徑

代碼:

[html] view plain copy
  1. <input type="tel" />  

效果:

注意:火狐對url類型有校驗,360瀏覽器無校驗。


▍寫在結(jié)尾

總的來說,目前input框也就只有這23種類型,雖然有的類型可能用不上一兩次甚至是一次都用不上,但是了解一下還是不錯的。



藍藍設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)




分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔