HTML5 表單新增的屬性

lt;form></form>標記新增屬性

required 規定必需在提交之前填寫輸入字段。

<form name="frm">
姓名：<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>

placeholder 默認顯示內容

實例：帶有 placeholder 文本的搜索字段：

<form action="demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="請輸入默認值" />
    <input type="submit" />
</form>

autocomplete 用來設置input組件是否使用自動完成功能,HTML5新增的屬性值有on(使用)或off(不使用)兩種。

input的屬性autocomplete默認為on,其含義代表是否讓瀏覽器自動記錄之前輸入的值,很多時候，

需要對客戶的資料進行保密,防止瀏覽器軟件或者惡意插件獲取到,可以在input中加入autocomplete="off" 來關閉記錄

系統需要保密的情況下可以使用此參數，該屬性也可作用于表單元素

實例：

<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

novalidate 用來設置是否在發送表單時驗證表單，如需要驗證則填入novalidate即可。

novalidate也是HTML5新增的屬性,IE并不支持novalidate屬性

HTML5新的input類型(目前IE都不支持,Opera和Chrome對新的輸入類型的支持最好,即使不被支持,仍然可以顯示為常規的文本域。)

input類型 - email

email類型用于應該包含 e-mail 地址的輸入域。

在提交表單時，會自動驗證 email 域的值。

E-mail: <input type="email" name="user_email" />

input類型 - url

url類型用于應該包含 URL 地址的輸入域。

在提交表單時，會自動驗證 url 域的值。

Homepage: <input type="url" name="user_url" />

input類型 - number

number類型用于應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定：

max number 規定允許的最大值

min number 規定允許的最小值

step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)

value number 規定默認值

Points: <input type="number" name="points" min="1" max="10" />

input類型 - range

range類型用于應該包含一定范圍內數字值的輸入域。

range類型顯示為滑動條。

您還能夠設定對所接受的數字的限定：

max number 規定允許的最大值

min number 規定允許的最小值

step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)

value number 規定默認值

<input type="range" name="points" min="1" max="10" />

input類型 - Date Pickers(日期選擇器)

HTML5擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間(小時和分鐘)

datetime - 選取時間、日、月、年(UTC 時間)

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

Date: <input type="date" name="user_date" />

input類型 - search

search類型用于搜索域，比如站點搜索或 Google 搜索。

search域顯示為常規的文本域。

Search: <input type="search" name="user_color" />

input類型 - color

color輸入類型用于規定顏色。

該輸入類型允許您從拾色器中選取顏色：

Color: <input type="color" name="user_color" />

HTML5的新的表單元素：(目前IE都不支持)

datalist元素

datalist元素規定輸入域的選項列表,功能類似于自造詞列表。

列表是通過datalist內的option元素創建的。

如需把datalist綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

實例1：

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>

實例2：

Webpage: <input type="url" list="url_list" name="link" /> <!--對輸入框進行限制-->
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示：option元素永遠都要設置 value 屬性。

keygen元素

keygen元素的作用是提供一種驗證用戶的可靠方法。

keygen元素是密鑰對生成器(key-pair generator)。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰(private key)存儲于客戶端，公鑰(public key)則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)。

目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。

實例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output元素

output元素用于不同類型的輸出，比如計算或腳本輸出：

實例

<output id="result" onforminput="resCalc()"></output>

表單元素新增的屬性值

文本框text

autofocus屬性自動獲得焦點,也就是指加載網頁之后,自動將光標(插入點)移到此文本框內。

多行文本框textarea

warp屬性在HTML5屬性值有：

soft 當在表單中提交時,textarea 中的文本不換行。默認值。

hard 當在表單中提交時,textarea 中的文本換行(包含換行符)。當使用 "hard" 時，必須規定 cols 屬性。

wrap屬性在HTML4屬性值有：

off(也可寫成wrap)：不換行，當輸入的內容超出文本區域右邊界時，文本將向左滾動，并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行，當數據提交到服務器被處理時，換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行，當數據提交到服務器被處理時，換行符將會隨輸入的文本一同被提交到服務器進行處理；

表單分組fieldset

fieldset元素可將表單內的相關元素分組。

HTML5新增的屬性

disabled disabled 規定應該禁用fieldset。

form form_id 規定fieldset所屬的一個或多個表單。

name value 規定fieldset的名稱。

實例

組合表單中的相關元素：

<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

legend元素為fieldset元素定義標題(caption)。

tml5中常用的結構標簽

article 文章

header 頭部

nav 導航

section 區域

aside 側邊欄

hgroup 區塊的相關信息

figure 定義一組內容及標題

figcaption 定義figure元素的標題

footer 底部

dialog 對話框

使用習慣：

header/section/footer > aside/article/figure/hgroup/nav > div

embed可插入flash文件，但flash已經逐漸被淘汰，不建議使用

meter狀態標簽，可以定義電壓

optimum是標準狀態

low與high之間呈現綠色，其余呈現黃色

<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>

自動計算百分比

<meter value="0.75">75%</meter>

有步長的進度條

<progress value="30" max="100"></progress>

不斷加載的進度條

<progress max="100"></progress>

datalist為input定義下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input placeholder="請選擇手機品牌" list="phoneList">
    <datalist id="phoneList">
        <option value="iphone">iphone</option>
        <option value="samsung">samsung</option>
        <option value="huawei">huawei</option>
        <option value="oppo">oppo</option>
        <option value="htc">htc</option>
    </datalist>
</body>
</html>

details定義元素的詳細內容，配合summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <details>
        <summary>HTML5</summary>
        <p>HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。
HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的。 [1-2] </p>
    </details>
</body>
</html>

ruby和rt進行拼音的注釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rt>kuang</rt></ruby>一個話題
</body>
</html>

兼容瀏覽器的寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一個話題
</body>
</html>

mark黃色選中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p>媽媽叫我回家的時候順路買一盒<mark>牛奶</mark>，需要很新鮮的那種。</p>
</body>
</html>

output表單計算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
        <input type="number" id="num1">*
        <input type="number" id="num2">=
        <output name="sum" for="num1 num2"></output>
    </form>
</body>
</html>

date pickers在移動端效果比較好

week兼容性不好

datetime兼容性不好，推薦用datetime-local

time用來設置時間（小時和分鐘）；

month用來設置年和月；

date用來設置年月日；

datetime用來設置年月日和時間；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    email:<input type="email" name="email"><br>
    url:<input type="url" name="url"><br>
    tel:<input type="tel" name="tel"><br>
    number:<input type="number" name="number"><br>

    date:<input type="date" name="date"><br>
    month:<input type="month" name="month"><br>
    week:<input type="week" name="week"><br>
    time:<input type="time" name="time"><br>
    datetime:<input type="datetime" name="datetime"><br>
    datetime-local:<input type="datetime-local" name="datetime-local"><br>

    range:<input type="range" name="range" min="1" max="10"><br>
    search:<input type="search" name="search"><br>
    color:<input type="color" name="color"><br>

</body>
</html>

autocomplete屬性規定form或input域擁有自動完成功能，該屬性適用于<form>標簽和<input>標簽

autofocus自動獲取焦點

multiple多選，適用于email和file，email中不同郵箱用,隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form action="lesson2_1 autocomplete.html" autocomplete="on">
        <input type="text" name="text" autofocus="autofocus" placeholder="您好，請在這里輸入您的用戶名！"><br>
        <input type="email" name="email" autocomplete="off" multiple="multiple"><br>
        <input type="file" name="file" multiple="multiple"><br>
        <input type="submit">
    </form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
    <base href="http://localhost" target="_blank">
</head>
<body>
</body>
</html>

script:

defer 頁面已完成加載后再執行腳本

async 一旦腳本可用，則異步執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script async="async" type="text/javascript" src="async.js"></script>
    <script defer="defer" type="text/javascript" src="defer.js"></script>
</head>
<body>
</body>
</html>

ol有序列表倒序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ol</title>
</head>
<body>
<ol start="2" reversed="reversed">
    <li>Html</li>
    <li>Html5</li>
    <li>Css</li>
    <li>Css3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

html頁面布局demo:

demo.html
----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <a href="index.html"><img src="images/logo.png"></a>
            <nav>
                <a class="active" href="index.html">Home</a>
                <a href="#">Course</a>
                <a href="#">Actual</a>
                <a href="#">Plan</a>
                <a href="#">FAQ</a>
                <a href="#">Notes</a>
            </nav>
        </div>
    </header>
    <section class="banner">
        <ul>
            <li class="active"><img src="images/banner/banner1.jpg"></li>
            <li class="left"><img src="images/banner/banner3.jpg"></li>
            <li class="right"><img src="images/banner/banner2.jpg"></li>
        </ul>
    </section>
    <section class="main">
        <aside>
            <h1>Recent <samp>Course</samp></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd><img src="images/Course/05_05.png"></dd>
                <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
            </dl>
            <dl>
                <dt>Cascading Style Sheets</dt>
                <dd><img src="images/Course/06_04.png"></dd>
                <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
            </dl>
            <dl>
                <dt>JavaScript</dt>
                <dd><img src="images/Course/09_07.png"></dd>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd><img src="images/Course/02_09.png"></dd>
                <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
            </dl>
        </aside>
        <article>
            <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
            <p>We provide the latest knowledge to help you cope with the changing world!</p>
            <img src="images/article.jpg">
            <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
            <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
        </article>
    </section>
    <footer>
        <div class="container">
            <p>Copyright ? 2019 test.com All Rights Reserved.</p>
            <span>
                <img src="images/icon/weichat.png">
                <img src="images/icon/sina.png">
                <img src="images/icon/qq.png">
            </span>
        </div>
    </footer>
</body>
</html>

style.css
------------------------------------------

/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }

/* header */
header { position: relative; height: 80px; background: #000; }
header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }
header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }
header > .container > a { display: block; float: left; margin: 5px 25px; }
header > .container > nav { float: right; }

/* nav */
nav > a { font-size: 24px; line-height: 73px; display: block; float: left; width: 110px; height: 73px; text-align: center; color: #fff; }
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover,
nav > a.active { padding-bottom: 7px; }

/* banner */
.banner { position: relative; background: #eaeaea; }
.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }
.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }
.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }
.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }

/* main */
.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main > aside { float: left; width: 450px; }
.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }
.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }
.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }
.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }
.main > article { float: right; width: 720px; overflow: hidden; }
.main > article > p,
.main > article > img { margin-bottom: 20px; }

/* footer */
footer { position: relative; background: #000; }
footer:before { position: absolute; z-index: -1; top: -6px; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
footer > .container { width: 1200px; height: 64px; margin: 0 auto; }
footer > .container > p { line-height: 64px; float: left; color: #fff; }
footer > .container > span { float: right; margin: 14px 40px; }
footer > .container > span > img { margin-left: 4px; opacity: .7; }
footer > .container > span > img:hover { opacity: 1; cursor: pointer; }

html頁面布局demo2:

碼：https://gitee.com/xproer/up6-vue-cli

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.定義事件

在線咨詢

上一篇：CSS中的單位你知多少？
下一篇：3行css實現循環動畫，順便說說瀏覽器兼容性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5 表單新增的屬性

您的項目需求