做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

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

2018-6-20    seo達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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


▍總述

常用的并且能為大多數瀏覽器所識別的類型大概有: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:數字

代碼:

[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瀏覽器無校驗。


▍file:文件

代碼:

[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的效果沒有什么區別。。。


▍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瀏覽器無校驗。


▍寫在結尾

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



藍藍設計91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔