整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前面學(xué)習(xí)了HTML5的基礎(chǔ)新元素，接下來小編將繼續(xù)分享HTML5必學(xué)的知識點(diǎn)--HTML5新表單
在開始之前，先來了解一下HTML5的聲明，<!doctype html>，通過HTML的聲明，體現(xiàn)W3C故意弱化HTML的版本，但是小標(biāo)要說明下版本不更新，不等于內(nèi)容不更新，而是W3C希望HTML5是融合版本。
關(guān)于HTML的發(fā)展歷史， HTML的規(guī)范不嚴(yán)格一直以來就是前端開發(fā)人員頭疼的地方， 元素定義大小寫不敏感。
直到XHTML 1.0的出現(xiàn) - 前端開發(fā)人員擁抱，因?yàn)榇藭r的HTML只允許小寫
XHTML 2.0版本出現(xiàn)后 - 前端開發(fā)人員重新回到HTML， 推翻了之前很多習(xí)慣
HTML 4版本出現(xiàn)之后 - 比較好的版本
HTML 5版本出現(xiàn) - 經(jīng)歷8年后，終于在2014年10月底發(fā)布
HTML5的特點(diǎn)：移動端瀏覽器相比PC端瀏覽器對H5的支持更好，這要感謝蘋果公司 - 喬布斯
小編提醒大家：目前網(wǎng)上所謂的H5，并不是指現(xiàn)在所學(xué)HTML5技術(shù)，HTML5的新特性內(nèi)容不多,與JS(難)配合使用
那么實(shí)際工作中使用多不多?其實(shí)實(shí)際上來說，相對并不多
其實(shí)就是在為將來學(xué)習(xí) - HTML5將來一定是主流。
*******華麗分割線*******
接下來開始學(xué)習(xí)，HTML5必學(xué)知識點(diǎn)—新表單，主要從4個方面入手：新類型、新元素、新屬性、新驗(yàn)證
1.email類型 - 判斷字符串中是否包含"@"符號，注意的是不能以"@"開始、不能以"@"結(jié)束
2.搜索類型 - search
3.URL類型 - 判斷字符串中是否包含"http:"，注意的是以"http:"開始,驗(yàn)證通過，以"http:"結(jié)束,驗(yàn)證通過
4.電話號碼類型 - tel，注意的是只有在手機(jī)端瀏覽器訪問時有效果
5.數(shù)字類型 - number，需要注意的是允許輸入非數(shù)字內(nèi)容,但是不允許提交，在設(shè)置min和max時，允許輸入范圍外的值,不允許提交；這個類型有一些屬性： min - 設(shè)置數(shù)字的最小值；max - 設(shè)置數(shù)字的最大值；step - 設(shè)置步長,每次增加或減小的量值
6.范圍類型 - range，效果就是滑動條，屬性：min - 最小值、max - 最大值、step - 步長、value - 當(dāng)前值
7.顏色類型 - color
8.日期類型 - date，日期格式 - yyyy/MM/dd
9周、月份類型 （實(shí)際很少使用）
10周 - week（實(shí)際很少使用）
11月份 - month（實(shí)際很少使用）
1.<datalist>元素，用法：需要配合input元素使用，在input元素中定義list屬性(值為datalist元素的id值)，好處就是數(shù)據(jù)與結(jié)構(gòu)的分離
2.<progress>元素，就是實(shí)現(xiàn)一個進(jìn)度條，屬性有：max - 設(shè)置進(jìn)度條的最大值、value - 設(shè)置進(jìn)度條當(dāng)前的值
3. <meter>元素，用法和<progress>元素類似，作用 - 刻度，屬性包括：min和max - 設(shè)置最小值和最大值、 value - 表示當(dāng)前值，high和low - 設(shè)置預(yù)警值（舉個常見的例子，當(dāng)你手機(jī)的電量小于10%時候，一般會顯示紅色的一小段進(jìn)度）
4.<output>元素，和<input> 輸入框正好相反，<output>是輸出框，屬性：for指定要輸出的元素進(jìn)行關(guān)聯(lián)（實(shí)際開發(fā)中,很少使用）
1.placeholder屬性：就是實(shí)現(xiàn)input輸入框的默認(rèn)提示信息，相比value屬性值更好用。這個在實(shí)際開發(fā)過程中非常常見
2.autofocus屬性：就是自動獲取焦點(diǎn)、用法有點(diǎn)不同，它不是key=vlaue的形式，而是直接只定義屬性名(沒有屬性值)
3.multiple屬性：就是允許輸入框輸入多個值，用法和autofocus一樣只定義屬性名(沒有屬性值)
4.form屬性（實(shí)際開發(fā)中用到不多）：就是表單元素定義在表單之外，用法 - 值是相關(guān)表單的id屬性值
1.驗(yàn)證屬性：
required屬性即：驗(yàn)證是否為空？返回false,表示當(dāng)前元素值為空， 返回true,表示當(dāng)前元素值不為空
pattern屬性即：驗(yàn)證正則表達(dá)式，定義正則表達(dá)式時,不能添加"http://"， 正則表達(dá)式不能驗(yàn)證是否為空
min和max屬性即：驗(yàn)證最小值和最大值 ，只和number類型的input元素配置使用
minlength和maxlength屬性即：驗(yàn)證最小長度和最大長度，minlength - 驗(yàn)證最小長度，maxlength - 限制最大長度（輸入內(nèi)容的長度不能大于maxlength的值）
validity屬性即：HTML5提供表單驗(yàn)證的接口，通過該屬性得到validityState對象，該對象提供一系列的有效狀態(tài)， 有效狀態(tài)可用于表單驗(yàn)證，得到validatyState對象，elem.validaty - 得到該對象
2.有效狀態(tài)
valid - 返回Boolean,表示驗(yàn)證是否通過，true - 表示驗(yàn)證通過， false - 表示驗(yàn)證失敗，
valueMissing - 表示值是否為空，返回值true - 表示元素值為空(錯誤)、false - 表示元素值不為空(正確) 注意該狀態(tài)配合required屬性使用
typeMismatch - 表示元素類型是否匹配，返回值true - 表示元素類型不匹配、false - 表示元素類型匹配、 該狀態(tài)配合email、url、number等使用
patternMismatch - 表示正則表達(dá)式是否匹配、返回值true - 表示正則表達(dá)式不匹配、false - 表示正則表達(dá)式匹配，該狀態(tài)配合pattern屬性使用
tooLong - 表示元素內(nèi)容長度是否過長，返回值true - 表示元素內(nèi)容長度過長，false - 表示元素內(nèi)容長度不長，該狀態(tài)配合maxlength屬性使用
maxlength屬性 - 限制屬性，tooLong可能不會出現(xiàn)(完整性)
rangeUnderflow - 表示元素值是否小于min值，返回值true - 表示元素值小于min的值，false - 表示元素值不小于min的值 該狀態(tài)配合min屬性使用
stepMismatch - 表示元素值與step值是否不符，返回值true - 表示元素值與step值不符，false - 表示元素值與step值相符 該狀態(tài)配合step屬性使用
customError - 自定義錯誤，配合setCustomValidity()方法使用，作用就是替換之前的判斷表達(dá)式，自定義錯誤提示信息setCustomValidity(自定義錯誤信息)，一旦調(diào)用該方法,默認(rèn)認(rèn)為就是錯的，上述所有的有效狀態(tài)返回錯誤值 驗(yàn)證正確時,調(diào)用該方法,將錯誤信息置為空
TML5多媒體作品以其對各種平臺的兼容而見長，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問“百度H5”網(wǎng)頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個選項(xiàng)。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作，制作好的作品也會顯示在這里（圖1）。
1. 通過創(chuàng)意模板輕松制作
在首頁中選擇“我的模板”，隨后會進(jìn)入一個模板展示頁面，這些都是設(shè)計(jì)者們分享的模板。根據(jù)你所要設(shè)計(jì)的作品的類別，可以按類選擇一個類似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。
比如要制作一個招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點(diǎn)擊右下角的“使用模板”按鈕（圖3）。
接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點(diǎn)擊“確定”按鈕（圖4）。
隨后進(jìn)入實(shí)質(zhì)性的模板修改編輯階段。對于不合適的內(nèi)容，可先刪除頁面元素再添加。點(diǎn)擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點(diǎn)擊“圖形”菜單選擇添加（圖5）。
此外，對于作品中所要用到的展示數(shù)據(jù)，可以通過插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實(shí)現(xiàn)更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進(jìn)度、添加計(jì)數(shù)器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性，可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域，可控制動畫、加載頁、全局全景和背景、當(dāng)前頁等參數(shù)設(shè)置。例如，要定制個性化的加載頁面效果，點(diǎn)擊“加載頁”選項(xiàng)卡，然后通過下方的滑塊，對加載頁中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。
對頁面上的各種元素進(jìn)行修改和編輯完成之后，點(diǎn)擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意，編輯過程中產(chǎn)生的內(nèi)容軟件會自動保存，但為了防止丟失，還是要養(yǎng)成勤于手動保存的習(xí)慣。
最后，就可以發(fā)布作品了。點(diǎn)擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標(biāo)題，設(shè)置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址，發(fā)布后其他人就可以用這個域名來訪問HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過用戶實(shí)名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計(jì)制作
套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶。其實(shí)，不用套用模板，完全可以從頭全部由自己來設(shè)計(jì)作品。
制作時，在主頁中選擇“我的H5”，然后點(diǎn)擊空白頁上印有圓圈套加號圖標(biāo)的按鈕，向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實(shí)現(xiàn)簡單跳轉(zhuǎn)；如果是整頁布局，則將整個頁面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實(shí)現(xiàn)不同的功能（圖10）。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計(jì)，不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個性化的作品。
TML5 新表單類型示例代碼有不少對HTML5開發(fā)感興趣的小伙伴不是很了解，本篇文章小編就不多說廢話了，帶大家一塊來看一下扣丁學(xué)堂HTML5在線學(xué)習(xí)分享的HTML5 新表單類型示例代碼，希可以幫到對HTML5感興趣的小伙伴們。
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表單屬性</legend>
<label for="">
email: <input type="email" name="email" >
</label>
<label for="">
tel: <input type="tel" name="tel" > <!-- 本身不驗(yàn)證,自己添加驗(yàn)證 -->
</label>
<label for="">
url: <input type="url" name="url" >
</label>
<label for="">
number: <input type="number" name="number" step="5"> <!--輸入的是步長的整倍數(shù)-->
</label>
<label for="">
search: <input type="search" name="search" > <!--移動端出現(xiàn)的小鍵盤右下角是搜索按鈕-->
</label>
<label for="">
range: <input type="range" name="range" value="100" min="0" max="300"> <!--默認(rèn)最小0 最大100-->
</label>
<label for="">
<label for="">
color: <input type="color" name="color" >
</label>
time: <input type="time" name="time" >
</label>
<label for="">
date: <input type="date" name="date" >
</label>
<label for="">
month: <input type="month" name="month" >
</label>
<label for="">
week: <input type="week" name="week" >
</label>
<label for="">
datetime: <input type="datetime" name="datetime" >
</label>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>以上就是小編分享的HTML5新表單類型示例代碼，希望可以幫到小伙伴們。對HTML5感興趣想要學(xué)習(xí)的小伙伴可以選擇扣丁學(xué)堂學(xué)習(xí)，扣丁學(xué)堂HTML5培訓(xùn)是專業(yè)的HTML5培訓(xùn)機(jī)構(gòu)，不僅有專業(yè)的老師和與時俱進(jìn)的課程體系，還有大量的HTML5在線教程供學(xué)員觀看學(xué)習(xí)哦。扣丁學(xué)堂H5技術(shù)交流群：559883758。
【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
