HTML5新增標簽一

狀態(tài)標簽

meter:用來顯示已知范圍的標量值或者分數值弥咪。
  • value:當前的數值络它。
  • min:值域的最小邊界值咖城。如果設置了茬腿,它必須比最大值要小。如果沒設置宜雀,默認為0
  • max:值域的上限邊界值切平。如果設置了,它必須比最小值要大辐董。如果沒設置悴品,默認為1
  • low:定義了低值區(qū)間的上限值,如果設置了,它必須比最小值屬性大郎哭,并且不能超過high值和最大值他匪。未設置或者比最小值還要小時,其值即為最小值夸研。
  • high:定義了高值區(qū)間的下限值邦蜜。如果設置了,它必須小于最大值亥至,同時必須大于low值和最小值悼沈。如果沒有設置,或者比最大值還大姐扮,其值即為最大值絮供。
  • optimum:這個屬性用來指示最優(yōu)/最佳取值。
progress:用來顯示一項任務的完成進度
  • max:該屬性描述了這個progress元素所表示的任務一共需要完成多少工作.
  • value:該屬性用來指定該進度條已完成的工作量.
    如果沒有value屬性,則該進度條的進度為"不確定",也就是說,進度條不會顯示任何進度,你無法估計當前的工作會在何時完成

列表標簽

datalist:datalist會包含一組option元素茶敏,這些元素表示其表單控件的可選值
  • 它的id必須要和input中的list一致
details: 一個ui小部件壤靶,用戶可以從其中檢索附加信息。
  • open屬性來控制附加信息的顯示與隱藏
summary:用作 一個<details>元素的一個內容摘要(標題)

注釋標簽

ruby
  • rt: 展示文字注音或字符注釋惊搏。

標記標簽

mark:著重

瘋狂的表單

Html5 Forms概述,在Html5中:

  1. 表單仍然使用<form>元素作為容器,我們可以在其中設置基本的提交特性
  • form的action指向一個服務器地址(接口)
  1. 當用戶或開發(fā)人員提交頁面時,表單仍然用于向服務端發(fā)送表單中控件的值
  • 注意表單項的name屬性必須有值贮乳,服務器才能獲取表單
  1. 所有之前的表單控件都保持不變
  2. 仍然可以使用腳本操作表單控件
  3. Html5之前的表單
標簽為input
  • type:text:文本框
  • type:password:密碼框
  • type:radio:單選按鈕
    注意以name分組,確保單選關系恬惯,也為了后臺能成功獲取
    必須有value屬性向拆,為了后臺獲取后的識別(不寫統(tǒng)一為on)
    checked屬性,選中控制
  • type:checkbox:復選框
    注意以name分組,確保為一組酪耳,也為了后臺能成功獲取
    必須有value屬性浓恳,為了后臺獲取后的識別(不寫統(tǒng)一為on)
    checked屬性,選中控制
  • type:submit:提交按鈕
  • type:reset:重置按鈕
  • type:button:普通按鈕
標簽為select:下拉框
  • name屬性在select標簽上
  • multiple:可選多項
  • 子項可以通過optgroup來進行分組
    label屬性用來定義組名
    -子項為option標簽
    -selected屬性,選中控制
    -必須有value屬性,為了后臺獲取后的識別
標簽為textarea:文本域
標簽為button:按鈕
  • type:submit:提交按鈕
  • type:reset:重置按鈕
  • type:button:普通按鈕
標簽為lable:控制文本與表單的關系

-for屬性指向一個input的id

標簽fieldset 標簽legend:來為表單分組
  1. attr & prop
  2. Html5 新增

新增表單控件

  1. type:email :email地址類型
    當格式不符合email格式時,提交是不會成功的,會出現提示颈将;只有當格式相符時梢夯,提交才會通過
    在移動端獲焦的時候會切換到英文鍵盤

  2. type:tel :電話類型
    在移動端獲焦的時候會切換到數字鍵盤

  3. type:url :url類型
    當格式不符合url格式時,提交是不會成功的吆鹤,會出現提示厨疙;只有當格式相符時,提交才會通過

  4. type:search :搜索類型
    有清空文本的按鈕

  5. type:range : 特定范圍內的數值選擇器
    屬性:min疑务、max沾凄、step

  • type:number: 只能包含數字的輸入框
  • type:color : 顏色選擇器
  • type:datetime: 顯示完整日期(移動端瀏覽器支持)
  • type:datetime-local: 顯示完整日期,不含時區(qū)
  • type:time: 顯示時間知允,不含時區(qū)
  • type:date: 顯示日期
  • type:week: 顯示周
  • type:month: 顯示月

新增表單屬性

  • placeholder: 輸入框提示信息
    適用于form以及type為text,search,url,tel,email,password類型的input

  • autofocus : 指定表單獲取輸入焦點

  • required: 此項必填撒蟀,不能為空

  • pattern: 正則驗證 pattern="\d{1,5}

  • formaction:在submit里定義提交地址

  • list和datalist : 為輸入框構造一個選擇列表
    list值為datalist標簽的id


表單驗證反饋

validity對象,通過下面的valid可以查看驗證是否通過温鸽,如果八種驗證都通過返回true保屯,一種驗證失敗返回false

node.addEventListener("invalid",fn1,false);
  • valueMissing : 輸入值為空時返回true

  • typeMismatch : 控件值與預期類型不匹配返回true

  • patternMismatch : 輸入值不滿足pattern正則返回true

  • tooLong: 超過maxLength最大限制返回true

  • rangeUnderflow: 驗證的range最小值返回true

  • rangeOverflow: 驗證的range最大值返回true

  • stepMismatch: 驗證range 的當前值 是否符合min、max及step的規(guī)則返回true

  • customError 不符合自定義驗證返回true
    setCustomValidity


關閉驗證

formnovalidate屬性

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末涤垫,一起剝皮案震驚了整個濱河市姑尺,隨后出現的幾起案子,更是在濱河造成了極大的恐慌蝠猬,老刑警劉巖切蟋,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異榆芦,居然都是意外死亡柄粹,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門匆绣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驻右,“玉大人,你說我怎么就攤上這事崎淳】柏玻” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵拣凹,是天一觀的道長茵瘾。 經常有香客問我,道長咐鹤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任圣絮,我火速辦了婚禮祈惶,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己捧请,他們只是感情好凡涩,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疹蛉,像睡著了一般活箕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上可款,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天育韩,我揣著相機與錄音,去河邊找鬼闺鲸。 笑死筋讨,一個胖子當著我的面吹牛,可吹牛的內容都是我干的摸恍。 我是一名探鬼主播悉罕,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼立镶!你這毒婦竟也來了壁袄?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤媚媒,失蹤者是張志新(化名)和其女友劉穎嗜逻,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體欣范,經...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡变泄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了恼琼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妨蛹。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖晴竞,靈堂內的尸體忽然破棺而出蛙卤,到底是詐尸還是另有隱情,我是刑警寧澤噩死,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布颤难,位于F島的核電站,受9級特大地震影響已维,放射性物質發(fā)生泄漏行嗤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一垛耳、第九天 我趴在偏房一處隱蔽的房頂上張望栅屏。 院中可真熱鬧飘千,春花似錦、人聲如沸栈雳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哥纫。三九已至霉旗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蛀骇,已是汗流浹背厌秒。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留松靡,地道東北人简僧。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像雕欺,于是被迫代替她去往敵國和親岛马。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內容

  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的屠列,因此網頁是網絡信息傳遞的載體啦逆。網頁文件是用...
    阿啊阿吖丁閱讀 3,828評論 0 0
  • 我們都知道在HTML5中增加了很多新的標簽,這些標簽減少了代碼量笛洛,更有助于移動app的開發(fā)夏志。那么下面我們就來看一下...
    博為峰51Code教研組閱讀 205評論 0 0
  • 接上 關于HTML/HTML5(一)http://www.reibang.com/p/33fc7840c079 學...
    Amyyy_閱讀 778評論 0 4
  • 瀏覽器與服務器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網頁內容渲染呈現給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,102評論 0 0
  • 杜鵑啼血木蘭辭苛让, 迎春花開殘雪去沟蔑。 滿地黃花催紙鳶, 荷塘月色喚風雨狱杰。 閑云孤鶴額青絲瘦材, 浮云不共此山齊。 東風回...
    紅學磚家閱讀 1,707評論 5 35