HTML5常見的基礎(chǔ)標(biāo)簽（6）表單標(biāo)簽的使用

、表單標(biāo)簽Form

1. 什么是表單

表單在網(wǎng)頁(yè)中負(fù)責(zé)數(shù)據(jù)采集功能的。表單是有3部分組成：

（1）表單標(biāo)簽 <form></form>

（2）表單域

（3）表單按鈕

2. Form標(biāo)簽、

語(yǔ)法格式：

</form>

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語(yǔ)法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長(zhǎng)度
size —— 定義文本框在頁(yè)面中顯示的長(zhǎng)度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(gè)登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個(gè)新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時(shí)間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語(yǔ)法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁(yè)面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會(huì)返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語(yǔ)法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁(yè)面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來(lái)實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無(wú)法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語(yǔ)法如下：

<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語(yǔ)法如下：

<select name="名稱" size="可看見的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網(wǎng)頁(yè)中使用窗口框架

TML5屬于上一代HTML的升級(jí)語(yǔ)言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體！！！

好處：跨平臺(tái)：

例如：比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。

缺點(diǎn)：

pc端瀏覽器支持不是特別友好，造成用戶體驗(yàn)不佳(隨著移動(dòng)端的發(fā)展不斷擴(kuò)大和win10（ie10）的大量推廣，這一缺點(diǎn)將被無(wú)限縮小)

新特性：

1. 取消了過時(shí)的顯示效果標(biāo)記 <font></font> 和 <center></center>等...

2. 新語(yǔ)義標(biāo)簽的引入

3. 新表單元素引入

4. canvas標(biāo)簽（圖形設(shè)計(jì)）

5. 本地?cái)?shù)據(jù)庫(kù)（本地存儲(chǔ)）

6. 一些API

1.HTML5新語(yǔ)義標(biāo)簽

HTML5新標(biāo)簽的數(shù)量在25個(gè)左右具體也沒有找到詳細(xì)的資料來(lái)查看（每個(gè)網(wǎng)站顯示的數(shù)量都不一樣）

雖然新增的標(biāo)簽很多但是實(shí)際上用到的應(yīng)該只有十個(gè)左右MDN上有一句話

“HTML 使用“標(biāo)記”來(lái)注明文本、圖片和其他內(nèi)容，以便于在 Web 瀏覽器中顯示。HTML 標(biāo)記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。”

這其中大部分有HTML5以前的標(biāo)簽也有HTML5的而這些剛好就是我們常用的標(biāo)簽，不常用的也許不必太過了解布局DIV也可以不是么？

另外推薦大家在使用新語(yǔ)義標(biāo)簽的時(shí)候盡量每個(gè)獨(dú)立的頁(yè)面只使用一個(gè)標(biāo)簽作為包裹，語(yǔ)義化的作用就是seo（具體可百度），就是讓搜索引擎知道網(wǎng)上到底有些什么，如header 、main、footer標(biāo)簽等等，當(dāng)然你也可以寫100個(gè)！

以下總結(jié)出HTML5常用的標(biāo)簽： “header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘記了這些標(biāo)簽的意思可以訪問 MDN、W3C、或者CSND,當(dāng)然博客園上搜搜可能會(huì)更快。

2.HTML5的重點(diǎn)標(biāo)簽之video和audio

<video></video> 視頻

屬性：controls 顯示控制欄

屬性：autoplay 自動(dòng)播放

屬性：loop 設(shè)置循環(huán)播放

<audio></audio> 音頻

屬性：controls 顯示控制欄

屬性：autoplay 自動(dòng)播放

屬性：loop 設(shè)置循環(huán)播放

video標(biāo)簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒體標(biāo)簽在網(wǎng)頁(yè)中的兼容效果方式（每個(gè)瀏覽器支持的情況不同所以需要做兼容性處理）

（以下source屬性只會(huì)生效一個(gè) 即 if = true 之后就不執(zhí)行了）

3.HTML5中的智能表單控件

type值 =

email: 輸入合法的郵箱地址

url：輸入合法的網(wǎng)址

number：只能輸入數(shù)字

range：滑塊

color：拾色器

date：顯示日期

month：顯示月份

week ：顯示第幾周

time：顯示時(shí)間

（智能表單，會(huì)自動(dòng)對(duì)輸入的內(nèi)容做基本校驗(yàn)，內(nèi)容不符合基本校驗(yàn)則拒絕提交請(qǐng)求

表單屬性

◆form屬性：

autocomplete=on | off 自動(dòng)完成

novalidate=true | false 是否關(guān)閉校驗(yàn)

◆ input屬性：

autofocus ：自動(dòng)獲取焦點(diǎn)

multiple：實(shí)現(xiàn)多選效果

placeholder ：占位符（提示信息）

required：必填項(xiàng)

本地存儲(chǔ)

隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍，同時(shí)也變的越來(lái)越復(fù)雜，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來(lái)進(jìn)行存儲(chǔ)的，但是由于其存儲(chǔ)大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來(lái)諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。

localStorage：

1. 永久生效

2. 多窗口共享

3. 容量大約為20M

◆window.localStorage.setItem(key,value) 設(shè)置存儲(chǔ)內(nèi)容

◆window.localStorage.getItem(key) 獲取內(nèi)容

◆window.localStorage.removeItem(key) 刪除內(nèi)容

◆window.localStorage.clear() 清空內(nèi)容

sessionStorage：

1. 生命周期為關(guān)閉當(dāng)前瀏覽器窗口

2. 可以在同一個(gè)窗口下訪問

3. 數(shù)據(jù)大小為5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默認(rèn)提示選項(xiàng)

需要兩個(gè)幾個(gè)參數(shù)

placeholder = 默認(rèn)提示用戶輸入

oninvalid事件 = 當(dāng)用戶輸入不符合規(guī)則的時(shí)候提示的內(nèi)容隨意改setCustomValidity 就是用來(lái)修改 requered值的函數(shù)

oninput事件 = 約等于chuange事件立即執(zhí)行

4.HTML5中新的一些API

以前獲取節(jié)點(diǎn)通過

document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當(dāng)前節(jié)點(diǎn)

H5新增的節(jié)點(diǎn)獲取方法只有兩個(gè)

document.querySelector("選擇器")；返回節(jié)點(diǎn)

document.querySelectorAll("選擇器"); 返回?cái)?shù)組

可以完美的代替以前或者節(jié)點(diǎn)的方式，如果無(wú)需兼容ie10以下的話

H5中對(duì)class的操作

classList.add("類名")

添加class類名不返回任何值如果你把它賦值給一個(gè)變量得到結(jié)果是undefined

classList.remove("類名"); 刪除

classList.contains("類名");

檢查has className 是否存在返回布爾值即true and false

classList.toggle("active");

查詢active 是否存在，存在就刪除，不存在就添加，省去了if判斷！返回布爾值如果執(zhí)行多條即 true false true false.

自定義屬性（小案例分析體驗(yàn)自定義屬性） data-自定義屬性名

1. 獲取自定義屬性 Dom.dataset 返回的是一個(gè)對(duì)象

Dom.dataset.屬性名或者 Dom.dataset[屬性名]

注：屬性名無(wú)需加data如自定義屬性名 = data-canvas 那么獲取的時(shí)候直接dataset.canvas即可設(shè)置同理

2. 設(shè)置自定義屬性

Dom.dataset.自定義屬性名=值或者 Dom.dataset[自定義屬性名]=值；

文件讀取 FileReader

FileReader 接口有3個(gè)用來(lái)讀取文件方法返回結(jié)果在result中

readAsBinaryString ---將文件讀取為二進(jìn)制編碼

readAsText ---將文件讀取為文本

readAsDataURL ---將文件讀取為DataURL

FileReader 提供的事件模型

onabort 中斷時(shí)觸發(fā)

onerror 出錯(cuò)時(shí)觸發(fā)

onload 文件讀取成功完成時(shí)觸發(fā)

onloadend 讀取完成觸發(fā)，無(wú)論成功或失敗

onloadstart 讀取開始時(shí)觸發(fā)

onprogress 讀取中

獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)

window.navigator.onLine 返回一個(gè)布爾值網(wǎng)沒問題返回true否則返回false

網(wǎng)絡(luò)狀態(tài)事件（大部分為不支持和廢棄狀態(tài)也許移動(dòng)端用的比較多）

1. window.ononline

2. window.onoffline

獲取地理定位

獲取一次當(dāng)前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之后獲取位置信息否則拋出錯(cuò)誤，比如獲取位置信息被拒絕

1. coords.latitude 維度

2. coords.longitude 經(jīng)度

實(shí)時(shí)獲取當(dāng)前位置

window.navigator.geolocation.watchPosition(success,error);

以上內(nèi)容或有不足，歡迎各位指出補(bǔ)充，謝謝。

在線咨詢

上一篇：百里挑一，最美中國(guó)風(fēng)字體一共10款！附贈(zèng)下載地址，想要嗎？
下一篇：Fabric.js 上劃線、中劃線（刪除線）、下劃線 - 掘金

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5常見的基礎(chǔ)標(biāo)簽（6）表單標(biāo)簽的使用

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

您的項(xiàng)目需求