碼迷,www.tparu.icu
吉利平特名人堂 > Web開發 > 詳細

一肖平特公式:小習html5為表單添加的新屬性

時間:2016-01-18 19:15:16      閱讀:3429      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽:

輸入框html5新增屬性

在學習任何一種語言時都提到“漸進增強”原則,說白了就是兼容性有木有。雖然html5一些新屬性在實際使用中受到限制,但是依然阻擋不了偉大的同伴們學習的腳步。近來有點兒忙,這是2016年第一篇文章。內容比較簡單只是了解學習。

輸入框按輸入的內容分,也就是單行輸入和多行輸入,既是<input type="">和<textarea></textarea>

<textarea></textarea>標簽屬性

autofocus,頁面加載文本區域自動獲得焦點。這個屬性同樣適用于<input type="">中的單行輸入,當然一個頁面中多個輸入框只能設置一個。

用法:<textarea autofocus></textarea>

兼容:IE10以下的瀏覽器是不只支持滴。

placeholder,為文本域將要輸入的內容做簡短的提示。這個屬性著實不錯,不過IE10以下的瀏覽器是不只支持滴。

maxlength,限制文本區域可輸入最大的字符串數。在這個屬性出現之前限制其輸入是使用js實現的,js實現就不必要考慮瀏覽器的兼容性。在后面會附上jQuery實現輸入限制、提示的實現方法。IE10以下的瀏覽器是不只支持滴。

required,規定在提交表單前文本區域是必填的。這個屬性省去表單的在提交前表單的驗證,但是提示不能輸入的樣式受到限制。

兼容:不支持IE瀏覽器哦!

form,說明輸入域可以用于多個form表單。

wrap,說明輸入域的文本是否換行。

以上是html新屬性,后兩個自認為不常用,前幾個在網站開發中也得斟酌使用,但是在手機頁面開發中可以大膽的使用。

textarea標簽固定大小和禁止拖拉動

在大部分瀏覽器中指定行(rows)和列(cols)屬性,就可以規定textarea的尺寸和大小?;褂幸恢職旆ㄊ鞘褂胏sss設置width和height,Safari和FireFox渲染的效果不同,可以拖動右下角圖標改變大小。過分拖動會改變頁面的美觀。

徹底禁用拖動

resize:none;

只是固定大小,右下角的圖標仍在

width: 200px;

height: 100px;

max-width: 200px;

max-height:100px;

<input type="">標簽屬性

以上textarea標簽的html5屬性input標簽都有,除此之外還有一些新屬性。

autocompletes:on | off;

<input type="">標簽里添加的新屬性

自有了html5和css3簡直就是前端的大愛,以前很多需要js一堆代碼實現的功能現在只需添加一個屬性的OK。

我就列幾個input標簽常用的新添加的屬性。

屬性accept;checked;   

autocomplete;  max, min; maxlength;pattern;required;

accept;checked;這兩個屬性不是html5新屬性但是也很實用哦。

accetp屬性只適用于type="file"類型的input標簽

例如:

<form action="demo_form.asp">

  <input type="file" name="pic" accept="image/*">

  <input type="submit">

</form>

<form>

  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

</form>

checked屬性與 <input type="checkbox"> 或 <input type="radio"> 配合使用;我想說的是在jQuery或是js中這個屬性非常實用。

autocomplete: on|off

autocomplete屬性html5的新屬性,特別的高大上的一個屬性。能夠記住你在瀏覽器中曾經輸入的字符斷,對于郵箱輸入等體驗非常好. <input> 類型:text, search, url, telephone, email, password, datepickers, range 以及 color。

max, min這兩個屬性配合實用,限制輸入值得范圍

適用<input> 類型:number, range, date, datetime, datetime-local, month, time 以及 week。也就是說它們的值是數字或是日期。

input max="number|date"

用法基本如下

<input type="number" name="points" min="0" max="10" />

 

pattern屬性屬性規定用于驗證輸入字段的模式,其屬性值也就是正則表達式。

<input type="password" name="country_code" placeholder="請輸入密碼" pattern="[A-z,0-9]{6}" title="輸入6位數字或是字符" />

 

required屬性規定輸入字段的值是必需的。和<textarea>標簽的用法相同。

 

//blog.csdn.net/csethcrm/article/details/9231425

小習html5為表單添加的新屬性

標簽:

原文地址://www.cnblogs.com/wjh0916/p/5140070.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
玩时时彩有每天稳赚不赔的吗 宝马计划飞艇 大乐透阳光探码 一肖二码爆特 不限ip注册优惠体验金 重庆肘时彩开奖结果 玩快三大小稳赚技巧 复式6码二中二是怎么样的 重庆时时彩v2.3.0版本 北京pk赛车稳赚投注技巧 竞彩360混合投注足彩比分直播 90k0极速比分足球比分 麻将胡牌牌型图解 百人牛牛天地玄黄技巧 牛牛看牌抢庄有漏洞吗 网络通比牛牛