HTML 相信大家很了解了，HTML 中的按鈕交互功能運(yùn)用廣泛，本篇文章教你如何實(shí)現(xiàn) html 按鈕效果。
HTML<button>標(biāo)簽
標(biāo)簽定義及使用說明
<button> 標(biāo)簽定義一個(gè)按鈕，在它內(nèi)部您可以放置文本或圖像等內(nèi)容，這是該元素與使用 <input> 元素創(chuàng)建的按鈕之間的不同之處。
tips：請(qǐng)始終為 <button> 元素規(guī)定 type 屬性。不同的瀏覽器對(duì)<button> 元素的 type 屬性使用不同的默認(rèn)值。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button - 編程獅(w3cschool.cn)</title>
</head>
<body>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>效果圖：
HTML5的<button>新屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 規(guī)定當(dāng)頁(yè)面加載時(shí)按鈕應(yīng)當(dāng)自動(dòng)地獲得焦點(diǎn)。 |
| disabled | disabled | 規(guī)定應(yīng)該禁用該按鈕。 |
| form | form_id | 規(guī)定按鈕屬于一個(gè)或多個(gè)表單。 |
| formaction | URL | 規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。覆蓋 form 元素的 action 屬性。該屬性與 type="submit" 配合使用。 |
| formenctype | application/x-www-form-urlencoded
multipart/form-data text/plain |
規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。覆蓋 form 元素的 enctype 屬性。該屬性與 type="submit" 配合使用。 |
| formmethod | get
post |
規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。覆蓋 form 元素的 method 屬性。該屬性與 type="submit" 配合使用。 |
| formnovalidate | formnovalidate | 如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證。覆蓋 form 元素的 novalidate 屬性。該屬性與 type="submit" 配合使用。 |
| formtarget | _blank
_self _parent _top framename |
規(guī)定在何處打開 action URL。覆蓋 form 元素的 target 屬性。該屬性與 type="submit" 配合使用。 |
| name | name | 規(guī)定按鈕的名稱。 |
| type | button
reset submit |
規(guī)定按鈕的類型。 |
| value | text | 規(guī)定按鈕的初始值?？捎赡_本進(jìn)行修改。 |
HTML<input>標(biāo)簽
?<input> ?標(biāo)簽用于創(chuàng)建交互式控件，這類控件是基于 web 表單的，它可以接收用戶的數(shù)據(jù)、信息。
主要代碼：
<input type="submit" value="提交">
<input type="reset" value="重置">表單代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button - 編程獅(w3cschool.cn)</title>
</head>
<body>
<form action="example.htm" method="post">
姓名: <input type="text" name="FirstName" value="張三豐"><br>
電話: <input type="text" name="LastName" value="123456"><br>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>表單效果圖：
以上就是小編為大家整理的關(guān)于 HTML 實(shí)現(xiàn)按鈕效果的全部?jī)?nèi)容。
