HTML 表單標簽

單屬性匯總：

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>標簽在頁面中的表現(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ù)選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用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屬性默認值：輸入的文本會自動換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時, 換行符不會隨輸入的文本一同被提交到服務(wù)器；

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

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

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

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

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

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

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

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

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

4 單選按鈕

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

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

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

必需的屬性:type name value

5 復(fù)選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項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屬性指定列表框的高度(顯示幾個選項);

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

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

<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> 標簽。

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標簽

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

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

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

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

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

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數(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)前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

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

label標簽

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

<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實例：創(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

用html標簽使用介紹

本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。

常用html標簽列表

標簽	英文全拼	作用	特點
?<html></html>??	html	網(wǎng)頁的根標簽	所有的標簽都要寫在這一對根標簽里面
??<head></head>??	head	網(wǎng)頁的頭標簽	包括完檔的屬性和信息
??<body></body>??	body	網(wǎng)頁的主題	包含文檔的所有內(nèi)容
??<div></div>??	division	定義一個區(qū)域	瀏覽器通常會在??<div>??前后放置一個換行符
??<!-- 注釋 -->??	-	注釋	單標簽
??<br>或<br/>??	break	換行	單標簽，不會在其前后創(chuàng)建空白行
??<hr>或<hr/>??	horizontal rule	添加水平線	單標簽
??<img src="">??	image	添加圖片	單標簽
??<embed src="">??	embed	嵌入外部應(yīng)用	單標簽
??<meta>??	meta	提供有關(guān)頁面的元信息	單標簽，??<meta>???標簽通常位于??<head>??區(qū)域內(nèi)
??<link>??	link	定義文檔與外部資源的關(guān)系	單標簽，??<link>???標簽只能存在于??<head>??區(qū)域內(nèi)，不過它可出現(xiàn)任何次數(shù)。
??<p></p>??	paragraph	定義段落	自動在其前后創(chuàng)建空白行
??<h1> to <h6>??	Header 1 to Header 6	定義標題	h1在一個頁面里只能出現(xiàn)一次
??<strong></strong>??	strong	文本加粗	加粗標記該文本
??<b></b>??	bold	文本加粗	加粗顯示文本，不推薦使用
??<em></em>??	emphasize	文本傾斜	傾斜標記文本
??<i></i>??	italic	文本傾斜	傾斜顯示文本，不推薦使用
??<del></del>??	delete	文本添加刪除線	-
??<s></s>??	strike	文本添加刪除線	不推薦使用
??<ins></ins>??	insert	文本添加下劃線	-
??<u></u>??	underline	文本添加下劃線	不推薦使用
??<a href="">填寫內(nèi)容</a>??	anchor	添加超鏈接	最好使用CSS來改變鏈接的樣式
??<ul></ul>??	unordered list	定義無序列表	通常與??<li>??標簽一起使用
??<ol></ol>??	ordered list	定義有序列表	通常與??<li>??標簽一起使用
??<li></li>??	list item	創(chuàng)建列表項	可與各種列表定義標簽一起使用
??<dl></dl>??	definition list	定義描述列表	通常與??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定義條目	定義描述列表的項目
??<dd></dd>??	definition description	定義描述	對描述列表中的項目進行描述
??<table></table>??	table	定義HTML表格	盡可能通過樣式改變表格外觀
??<tr></tr>??	table row	定義表格的行	一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽
??<th></th>??	table headline	定義表格每一列的標題	該標簽的文本通常呈現(xiàn)為粗體且居中
??<td></td>??	table data	定義表格中的單元格數(shù)據(jù)	該標簽的文本呈現(xiàn)為普通且左對齊
??<caption>表格標題</caption>??	caption	定義整個表格的標題	??<caption>???標簽必須直接放在??<table>??標簽后
??<input type="">??	input	定義輸入控件	輸入字段可通過多種方式改變，取決于type屬性
??select??	select	定義下拉列表	??<select>???中的??<option>??標簽定義了列表中的可用選項
??<option></option>??	option	定義下拉列表中的可用項	??<option>??標簽不可自由定義寬高
??<optgroup></optgroup>??	options group	定義選項組	??<optgroup>??標簽用于把相關(guān)的選項組合在一起
??<textarea></textarea>??	textarea	定義多行的文本輸入控件	文本的默認字體是等寬字體
??<form></form>??	form	定義表單	??<form>??可以包含多個元素
??<fieldset></fieldset>??	field set	定義圍繞表單中元素的邊框	??<legend>???為??<fieldset>??定義標題
??<legend></legend>??	legend	為??<fieldset>??定義標題	??<legend>??通過css設(shè)定樣式
??<progress></progress>??	progress	定義運行中的任務(wù)進度	??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條
??<audio></audio>??	audio	添加音頻	??<audio>??標簽是HTML5的新標簽
??<video></video>??	video	添加視頻	??<video>??標簽是HTML5的新標簽
??<source>??	source	定義媒介資源	??<source>??標簽是HTML5中的新標簽

常用標簽使用說明

常用寫法：??<img src="" alt="" title=""width="" height=""??>
src：圖片的來源（必寫屬性）
alt：圖像不顯示時的替代文本
title：鼠標在移動到元素上的文本提示
width/height：圖片寬高，沒有定義寬高的時候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

常用寫法：??<a href="" title="" target="">填寫內(nèi)容</a>??
href：去往的路徑（必寫屬性）
title：鼠標在移動到元素上的文本提示
target：規(guī)定在何處打開路徑

_blank：新頁面打開
_parent：在父窗口中打開鏈接
_self：當(dāng)前頁面跳轉(zhuǎn)（默認值）
_top：在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個窗體

當(dāng)href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉(zhuǎn)
當(dāng)href的值為#，表示超鏈接為空鏈接，點擊此鏈接時會跳轉(zhuǎn)到頁首的位置

錨點鏈接

錨點鏈接通過點擊超鏈接，自動跳轉(zhuǎn)到我們設(shè)置錨點的位置，類似于word的目錄導(dǎo)航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉(zhuǎn)本頁面元素，其他頁面跳轉(zhuǎn)自行搜索。
具體做法如下：

給目標元素設(shè)置id值，如??<p id="id1"></p>??
設(shè)置錨點超鏈接，錨點的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復(fù)lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設(shè)置

在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

<head>
  <!-- 讓頁面所有的超鏈接新頁面打開 -->
  <base target="_blank">  
</head>

charset編碼

常用寫法： ??<meta charset="UTF-8">??
charset：定義文檔的字符編碼

ASCII/ANSI/Unicode：英語
GBK：亞洲通用字符集
GB2312：中文簡體
Big5：臺澳港繁體
UTF-8：世界通用字符集

name

關(guān)鍵字

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁的關(guān)鍵字，盡量將重要的關(guān)鍵詞放在前面

網(wǎng)頁描述

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁的主要內(nèi)容

作者

常用寫法： ??<meta name="author" content="">??
描述：告訴搜索引擎網(wǎng)頁的作者

文件檢索

常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時候會有一些站點內(nèi)容，不希望被ROBOTS抓取而公開。為了解決這個問題，ROBOTS開發(fā)界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標簽。
content: 文件檢索方式

all：文件將被檢索，且頁面上的鏈接可以被查詢（默認值）
none：文件將不被檢索，且頁面上的鏈接不可以被查詢
index：文件將被檢索；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢
follow：頁面上的鏈接可以被查詢
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

網(wǎng)頁自動跳轉(zhuǎn)

常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：網(wǎng)頁5秒后自動跳轉(zhuǎn)到谷歌主頁
url：為空則刷新本頁
常用寫法：
描述：規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫（必寫屬性）
type：規(guī)定被鏈接文檔的類型
href：鏈接的文件路徑
示例：

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設(shè)置網(wǎng)頁icon圖標：??<link rel="icon" href="a.ico">??

列表

無序列表

無序列表使用粗體圓點進行標記。簡單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數(shù)字進行標記，我們可以通過整數(shù)值start指定列表編號的起始值。簡單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過描述列表自定義列表，列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

<dl>
        <dt>A</dt> <!-- 小標題 -->
            <dd>A1</dd> <!-- 解釋標題 -->
            <dd>A2</dd> <!-- 解釋標題 -->
        <dt>B</dt> <!-- 小標題 -->
            <dd>B1</dd> <!-- 解釋標題 -->
            <dd>B2</dd> <!-- 解釋標題 -->
    </dl>

表格

基礎(chǔ)表格

常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框?qū)挾?/li>
cellspacing：單元格間距
cellpadding：內(nèi)容與邊框間距

簡單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

常用寫法：??<td colspan=“” rowspan=“”></td>??
描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
maxlength：輸入文本長度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認值

簡單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

常用寫法：??<input type="password" name="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
密碼輸入框的其他參數(shù)和文本輸入框一樣

簡單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

常用寫法：??<input type="radio" name="" checked="checked">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
checked：設(shè)定該輸入框被預(yù)先選定
想要多個單選框只能有一個被選中，設(shè)置所有單選框的name值相同即可實現(xiàn)

示例一，兩個單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個單選框只能有一個被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用寫法：??<select multiple=""></select>??
multiple：當(dāng)該屬性為true時，可選擇多個選項。

??<optgroup>??

常用寫法：??<optgroup label=""></optgroup>??
label：設(shè)定選項組的描述。

??<option>??

常用寫法：??<option value="" selected="">選項值</option>??
value：定義送往服務(wù)器的選項值。
selected：當(dāng)該屬性為true時，該選項被默認選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

常用寫法：??<input type="checkbox" checked="">??
type：規(guī)定輸入字段的類型
checked：設(shè)定該輸入框被預(yù)先選定

簡單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見文本的列數(shù)
rows：控制可見文本的行數(shù)
placeholder：提示字符

簡單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

常用寫法：??<input type="file" accept=""/>??
accept：規(guī)定提交的文件的類型

簡單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網(wǎng)址控件
  <input type="date">日期控件 
  <input type="time">時間控件
  <!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數(shù)字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??

??<progress>??

常用寫法：??<progress value="" max=""></progress>??
value：規(guī)定進程的當(dāng)前值
max：規(guī)定需要完成的值

簡單示例如下。

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

??<meter>??

常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規(guī)定度量的當(dāng)前值
max：規(guī)定被界定為高的值的范圍
min：規(guī)定被界定為低的值的范圍
low：規(guī)定被界定為低的值的范圍
high：規(guī)定被界定為高的值的范圍
optimum：規(guī)定度量的最優(yōu)值
具體使用見meter標簽改變顏色規(guī)則

簡單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

常用寫法：??<audio src="" controls autoplay loop></audio>??
src：規(guī)定音頻文件的url
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：規(guī)定視頻文件的url
width：設(shè)置視頻播放器的寬度（pixels）
height：設(shè)置視頻播放器的高度（pixels）
poster：設(shè)置視頻未播放時展示的畫面
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用寫法：??<source src="" type="">??
src：規(guī)定媒體文件的url
type：規(guī)定媒體文件的類型
因為不同瀏覽器支持的媒體格式不同，當(dāng)添加媒體文件時，需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件，然后使用source 標簽，讓瀏覽器從上到下選擇支持的媒體格式

簡單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對照表??

參考

??HTML基礎(chǔ)??
??HTML 參考手冊??
HTML中標簽對應(yīng)的英文
meter標簽改變顏色規(guī)則
HTML5 progress和meter控件

我們使用CSS來對一個高度未定的元素添加折疊動畫時，會遇到使用transition來對Height從0到auto添加過度動畫，動畫并沒有生效的問題；

幸運的是，現(xiàn)在有了解決方案：使用表格布局，實現(xiàn)簡單并且效果完美；

通常以前對于這種場景，使用CSS來實現(xiàn)：使用max-height 或者 scaleY 貌似能夠解決；但是會有不同程度的問題：

max-height:

折疊時設(shè)置max-height為零，展開時設(shè)置max-height為一個較大的值；

弊端：因為需要盡可能保證max-height大于折疊內(nèi)容的寬度，需要將max-height設(shè)置的比較大，導(dǎo)致展開時動畫速度變慢，并且折疊時有短暫的停頓；

scaleY

通過scaleY 0 - 1的過渡實現(xiàn)，但是動畫過程中可見內(nèi)容被擠壓變形，體驗不好；

現(xiàn)在如果用網(wǎng)格布局來實現(xiàn)，讓我們來試下：

grid-template-rows

html結(jié)構(gòu)：

html復(fù)制代碼<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>
css復(fù)制代碼.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

效果：

原文鏈接：

https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de

在線咨詢

上一篇：Pico.css - 優(yōu)雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面
下一篇：網(wǎng)頁前端設(shè)計-27JavaScript語法基礎(chǔ)

您的項目需求

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

整合營銷服務(wù)商

HTML 表單標簽

用html標簽使用介紹

常用html標簽列表

常用標簽使用說明

列表

表格

與

多媒體資源

特殊字符

參考

max-height:

scaleY

grid-template-rows

您的項目需求