HTML5新標籤與特性----新表單+新屬性----綜合案例1

時間 2019-11-14

標籤 html5 html 標籤特性表單屬性綜合案例欄目 HTML5 简体版

原文原文鏈接

HTML5新標籤與特性

兼容性問題（ie9 以上的版本）php

文檔類型設定

document
- HTML: sublime 輸入 html:4s
- XHTML: sublime 輸入 html:xt
- HTML5 sublime 輸入 html:5 ！ <!DOCTYPE html>

字符設定

<meta http-equiv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫
<meta charset="utf-8">：HTML5的標籤中建議這樣去寫

經常使用新標籤

w3c 手冊中文官網 : http://w3school.com.cn/html

header：定義文檔的頁眉頭部前端
nav：定義導航連接的部分html5
footer：定義文檔或節的頁腳底部java
article：定義文章。c++
section：定義文檔中的節（section、區段）ide

aside：定義其所處內容以外的內容側邊ui

<header> 語義 :定義頁面的頭部 頁眉</header> <nav> 語義 :定義導航欄 </nav> <footer> 語義: 定義 頁面底部 頁腳</footer> <article> 語義: 定義文章</article> <section> 語義： 定義區域</section> <aside> 語義： 定義其所處內容以外的內容 側邊</aside>

datalist 標籤訂義選項列表。請與 input 元素配合使用該元素url

<input type="text" value="請輸入明星" list="star"/>
    <datalist id="star">
        <option value="劉德華">劉德華</option>
        <option value="劉若英">劉若英</option>
        <option value="劉曉慶">劉曉慶</option>
        <option value="戚薇">戚薇</option>
        <option value="戚繼光">戚繼光</option>
    </datalist>

fieldset 元素可將表單內的相關元素分組，打包 legend 搭配使用spa

<fieldset> <legend>用戶登陸</legend> 標題 用戶名: <input type="text"><br /><br /> 密　碼: <input type="password"> </fieldset>

新增的input type屬性值：

類型****	使用示例****	含義****
email****	<input type="email">	輸入郵箱格式
tel****	<input type="tel">	輸入手機號碼格式
url****	<input type="url">	輸入url格式
number****	<input type="number">	輸入數字格式
search****	<input type="search">	搜索框（體現語義化）
range****	<input type="range">	自由拖動滑塊
time****	<input type="time">	小時分鐘
date****	<input type="date">	年月日
datetime****	<input type="datetime">	時間
month****	<input type="month">	月年
week****	<input type="week">	星期年

經常使用新屬性

屬性****	用法****	含義****
placeholder****	<input type="text" placeholder="請輸入用戶名">	佔位符當用戶輸入的時候裏面的文字消失刪除全部文字，自動返回
autofocus****	<input type="text" autofocus>	規定當頁面加載時 input 元素應該自動得到焦點
multiple****	<input type="file" multiple>	多文件上傳
autocomplete****	<input type="text" autocomplete="off">	規定表單是否應該啓用自動完成功能有2個值，一個是on 一個是off on 表明記錄已經輸入的值 1.autocomplete 首先須要提交按鈕 2.這個表單您必須給他名字
required****	<input type="text" required>	必填項內容不能爲空
accesskey****	<input type="text" accesskey="s">	規定激活（使元素得到焦點）元素的快捷鍵採用 alt + s的形式

綜合案例

    <form action="">
        <fieldset>
            <legend>學生檔案</legend>
            <label for="userName">姓名:</label>
            <input type="text" name="userName" id="userName" placeholder="請輸入用戶名"> <br>
            <label for="userPhone">手機號碼:</label>
            <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
            <label for="email">郵箱地址:</label>
            <input type="email" required name="email" id="email"><br>
            <label for="collage">所屬學院:</label>
            <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
            <datalist id="cList">
                <option value="前端與移動開發學院"></option>
                <option value="java學院"></option>
                <option value="c++學院"></option>
            </datalist><br>
            <label for="score">入學成績:</label>
            <input type="number" max="100" min="0" value="0" id="score"><br>
            <label for="inTime">入學日期:</label>
            <input type="date" id="inTime" name="inTime"><br>
            <label for="leaveTime">畢業日期:</label>
            <input type="date" id="leaveTime" name="leaveTime"><br>
            <input type="submit">
        </fieldset>
    </form>


    <form action="">
        <fieldset>
            <legend>學生檔案思密達</legend>
            <label>姓名: <input type="text" placeholder="請輸入學生名字"/></label> <br /><br />
            <label>手機號: <input type="tel" /></label> <br /><br />
            <label>郵箱: <input type="email" /></label> <br /><br />
            <label>所屬學院:  <input type="text" placeholder="請選擇學院" list="xueyuan"/>
            <datalist id="xueyuan">
                <option>java學院</option>
                <option>前端學院</option>
                <option>php學院</option>
                <option>設計學院</option>
            </datalist>
            <br /><br />
                
            <label>出生日期:   <input type="date" /></label> <br /><br />
            <label>成績:  <input type="number" /></label> <br /><br />
            <label>畢業時間:  <input type="date" /></label> <br /><br />
            <input type="submit" />  <input type="reset" />
        </fieldset>
    </form>

相關標籤/搜索