示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！

摘要 51RGB官方微信

掌握基礎(chǔ)知識，成就未來大神夢想……

定義和用法

<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

實(shí)例

帶有兩個輸入字段和相關(guān)標(biāo)記的簡單 HTML 表單：

?

瀏覽器支持

所有主流瀏覽器都支持 <label> 標(biāo)簽。

Safari 2 或更早的版本不支持 <label> 標(biāo)簽。

HTML 與 XHTML 之間的差異

NONE

提示和注釋：

注釋："for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

可選的屬性

DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

標(biāo)準(zhǔn)屬性

id, class, title, style, dir, lang, xml:lang

事件屬性

accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,onmouseover

想認(rèn)識志同道合的朋友一起學(xué)習(xí)web

加入我們的學(xué)習(xí)QQ群 190166743

豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課

長按圖片，識別二維碼即可入群

你可能感興趣的精彩內(nèi)容

微信：UI設(shè)計(jì)自學(xué)平臺加關(guān)注

長按關(guān)注：《UI設(shè)計(jì)自學(xué)平臺》

↓↓↓

單屬性匯總：

1 name屬性

服務(wù)器會識別不同的name屬性，并根據(jù)name屬性來捕獲不同元素內(nèi)的數(shù)據(jù)。

2 value屬性

value 屬性為 input 元素設(shè)定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復(fù)選框傳遞數(shù)據(jù)到數(shù)據(jù)庫時一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;

3 type屬性

它決定了<input>標(biāo)簽在頁面中的表現(xiàn)樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復(fù)選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設(shè)置列表框顯示的行數(shù)；

文本框和密碼框會使用size屬性設(shè)置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數(shù)據(jù)提交到服務(wù)器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區(qū)域)，用來禁止輸入任何信息；

可以將數(shù)據(jù)提交到服務(wù)器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(tài)(如單選按鈕和復(fù)選框)

但在列表框或者下拉式菜單中，為了表示被選中的項(xiàng)目，可使用selected屬性；

7 placeholder屬性

規(guī)定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性 默認(rèn)值：輸入的文本會自動換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時, 換行符不會隨輸入的文本一同被提交到服務(wù)器；

off(也可寫成wrap)：不自動換行, 當(dāng)輸入的內(nèi)容超出文本區(qū)域右邊界時, 文本將向左滾動, 并顯示滾動條。

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

virtual：文本能夠自動換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時, 換行符不會隨輸入文本一同提交到服務(wù)器；(默認(rèn)值)

physical：文本能夠自動換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時, 換行符將會隨輸入的文本一同被提交到服務(wù)器進(jìn)行處理；

關(guān)于如何限制文本域輸入字符串的長度 見javascript|語法|設(shè)置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當(dāng)在表單中提交時, textarea 中的文本不換行, 默認(rèn)值。

hard 當(dāng)在表單中提交時, textarea 中的文本換行(包含換行符)。

當(dāng)使用 "hard" 時, 必須規(guī)定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項(xiàng)1
<input type="radio" name="radio" value="2"/>選項(xiàng)2
<input type="radio" name="radio" value="3"/>選項(xiàng)3

多個單選按鈕通過定義相同的name屬性, 以實(shí)現(xiàn)捆綁在一起；

必需的屬性:type name value

5 復(fù)選框

<input type="checkbox" name="checkbox[]" value="1"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="2"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="3"/>選項(xiàng)2

通過設(shè)置相同的name屬性可以把多個復(fù)選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設(shè)置size屬性,則該元素會顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項(xiàng));

還可以通過mutiple屬性定義列表框是否為多選(默認(rèn)是單選)；

通過<optgroup>標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：

<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標(biāo)簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

<input type="button" name="" value="普通按鈕"/>

它一般是配合javascript來使用;

關(guān)于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標(biāo)簽

在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認(rèn)值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認(rèn)編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進(jìn)制數(shù)據(jù)或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發(fā)送到電子郵箱時，enctype的值必須設(shè)為"text/plain",否則將會出現(xiàn)亂碼。

發(fā)送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當(dāng)前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當(dāng)前的窗口,默認(rèn)值

_parent 上一層窗口

_top 最上層窗口

框架名稱 指定指定窗口或框架名稱

label標(biāo)簽

作用: 擴(kuò)大觸控區(qū)域, 為了提升用戶體驗(yàn), 點(diǎn)擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

PHP實(shí)例：創(chuàng)建發(fā)送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發(fā)送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

表標(biāo)簽

在html中列表分為無序列表、有序列表和自定義列表（項(xiàng)目列表）。接下來就看看他們有什么不同吧！

作用：如果說table標(biāo)簽是用來顯示數(shù)據(jù)的，那么列表標(biāo)簽就是用來進(jìn)行html頁面布局的。

• 無序列表

語法：

<ul>
	<li></li>  
</ul>

<ul></ul>標(biāo)簽中只能且必須嵌套<li></li>標(biāo)簽。li標(biāo)簽之間沒有先后順序，是并列存在的。li標(biāo)簽里可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。跟table一樣，列表標(biāo)簽也自帶樣式屬性，但為了代碼統(tǒng)一，我們還是會使用css來設(shè)置。

代碼示例：

<h2>無序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

運(yùn)行界面：

• 有序列表

語法：

<ol>
 	<li></li> 
 </ol>

<ol></ol>標(biāo)簽里面只能嵌套<li></li>標(biāo)簽，在這里li標(biāo)簽是有順序的。

代碼示例：

<h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

運(yùn)行界面：

• 自定義列表

語法：

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<dl></dl>標(biāo)簽：定義列表

<dt></dt>標(biāo)簽：列表標(biāo)題

<dd></dd>標(biāo)簽：列表內(nèi)容

一個dd標(biāo)簽是對dt標(biāo)簽標(biāo)題的說明。這兩個標(biāo)簽中可以包含任何標(biāo)簽。

代碼示例：

<h2>自定義列表：</h2>
    <!-- dl：外層標(biāo)簽  dt：項(xiàng)目標(biāo)題  dd：項(xiàng)目內(nèi)容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

運(yùn)行界面：

表單標(biāo)簽

作用：收集用戶信息。一般用在注冊界面等。

組成：一個完整的表單中包含表單域（整個填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個部分。

• 表單域

表單域：是一個包含表單元素的區(qū)域。

<form>標(biāo)簽用于定義表單域，實(shí)現(xiàn)用戶信息的收集和傳遞。

作用：將其區(qū)域范圍內(nèi)的信息收集并傳送給服務(wù)器。

語法：

<form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>

注：action：url地址，指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。

method：用于設(shè)置表單數(shù)據(jù)的提交方式。

method=”get”：提交數(shù)據(jù)時，地址欄可查看到數(shù)據(jù)。數(shù)據(jù)量少且安全級別不高時使用。

method=”post”：提交數(shù)據(jù)時，地址欄數(shù)據(jù)是加密的。

name：表單域的名稱。用于區(qū)分同一頁面下的不同表單域。

• 表單控件

1.input輸入表單元素：

語法：<input type=””>，依據(jù)type屬性值不同區(qū)分不同控件。

文本框：<input type=”text”>。單行輸入字段，默認(rèn)寬度20個字符。輸入的文字可見。

密碼框：<input type=”password”>。輸入內(nèi)容默認(rèn)不可見。

單選框：<input type=”radio”>，默認(rèn)情況下選中后無法取消。

注：為實(shí)現(xiàn)多選一狀態(tài)，需要將所有的單選框控件具有同一個name名。

復(fù)選框：<input type=”checkbox”>，選中后可以更改可以取消。

提交按鈕：<input type=”submit”>，默認(rèn)按鈕中的提示文字是提交，可以通過value值進(jìn)行更改內(nèi)容。點(diǎn)擊提交按鈕后會把表單數(shù)據(jù)發(fā)送到服務(wù)器。

重置按鈕：<input type=”reset”>，默認(rèn)按鈕中的提示文字是重置，可以通過value值進(jìn)行更改內(nèi)容。點(diǎn)擊后會清楚表單中的所有數(shù)據(jù)。

普通按鈕：<input type=”button”>

文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。

label標(biāo)簽：標(biāo)注標(biāo)簽，配合input控件一起使用

作用：綁定表單控件，擴(kuò)大點(diǎn)擊范圍。

當(dāng)點(diǎn)擊label標(biāo)簽的內(nèi)容時，系統(tǒng)會自動選中該表單控件。

代碼示例：

<h1>label標(biāo)簽</h1>
    <form>
        <label for="text">用戶名：</label>
        <input type="text" name="用戶名" id="text"><br>
        <label for="password">密碼：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>

運(yùn)行界面：

Input控件屬性：

name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。

value：用戶自定義，提示input元素的內(nèi)容值。給后臺的提示。在文本框控件中會顯示該內(nèi)容，單選框和復(fù)選框則顯示不出來。

checked：默認(rèn)選中狀態(tài)。主要用于單選按鈕和復(fù)選按鈕中。

maxlength：正整數(shù)，規(guī)定輸入字段中的字符最大長度。

input代碼示例：

<h2>表單標(biāo)簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注冊">
        <input type="reset" value="清空"><br>
        <!-- 后期結(jié)合js搭配使用 -->
        <!-- 按鈕選框在默認(rèn)情況下是沒有文字內(nèi)容的，需要添加value值設(shè)置文字內(nèi)容 -->
        <input type="button" value="獲取短信驗(yàn)證碼"><br>
        上傳頭像：<input type="file">
    </form>

運(yùn)行界面：

2.select下拉表單元素：

使用場景：地址選擇、職業(yè)分類、學(xué)校分類等。

select標(biāo)簽：定義下拉列表。

語法：

<select>
	<option></option>  
</select>

代碼示例：

<h1>下拉表單</h1>
    <form>
        <label for="adress">籍貫：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
        </select>
    </form>

運(yùn)行界面：

3.textrea文本域表單控件

使用場景：留言、介紹、評論等。

語法：

<textrea rows=”” cols=””>文本內(nèi)容</textrea>

跟文本框控件不同，它是多行文本輸入框，可以自行設(shè)定行數(shù)以及一行容納多少字?jǐn)?shù)。

rows=“每行可輸入的字符數(shù)”，

cols=“顯示的行數(shù)”。

這兩個樣式屬性實(shí)際開發(fā)中大多使用css就可以改變操作。

代碼示例：

<h1>文本域表單元素</h1>
    <form action="">
        <label for="textrea">今日反饋：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
    </form>

運(yùn)行界面：

關(guān)于HTML基礎(chǔ)內(nèi)容就學(xué)習(xí)到這里了，明天練習(xí)一個綜合案例。對了，現(xiàn)在跟學(xué)的是黑馬前端的pink老師發(fā)布的基礎(chǔ)視頻，明天做的案例按照老師講解的案例去做。