App下載

HTML按鈕代碼怎么寫?如何寫按鈕的代碼

猿友 2021-03-16 15:41:58 瀏覽數(shù) (17004)
反饋

HTML 相信大家很了解了,HTML 中的按鈕交互功能運(yùn)用廣泛,本篇文章教你如何實(shí)現(xiàn) html 按鈕效果。

HTML<button>標(biāo)簽

標(biāo)簽定義及使用說明

<button> 標(biāo)簽定義一個按鈕,在它內(nèi)部您可以放置文本或圖像等內(nèi)容,這是該元素與使用 <input> 元素創(chuàng)建的按鈕之間的不同之處。

tips:請始終為 <button> 元素規(guī)定 type 屬性。不同的瀏覽器對<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>

效果圖:

button點(diǎn)擊效果

HTML5的<button>新屬性

屬性 描述
autofocus autofocus 規(guī)定當(dāng)頁面加載時按鈕應(yīng)當(dāng)自動地獲得焦點(diǎn)。
disabled disabled 規(guī)定應(yīng)該禁用該按鈕。
form form_id 規(guī)定按鈕屬于一個或多個表單。
formaction URL 規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù)。覆蓋 form 元素的 action 屬性。該屬性與 type="submit" 配合使用。
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對其進(jìn)行編碼。覆蓋 form 元素的 enctype 屬性。該屬性與 type="submit" 配合使用。
formmethod get
post
規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。覆蓋 form 元素的 method 屬性。該屬性與 type="submit" 配合使用。
formnovalidate formnovalidate 如果使用該屬性,則提交表單時不進(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>

表單效果圖:

input按鈕

以上就是小編為大家整理的關(guān)于 HTML 實(shí)現(xiàn)按鈕效果的全部內(nèi)容。

1 人點(diǎn)贊