html button標籤怎麼使用?html button標籤有什麼作用?

來源:互聯網
上載者:User
本篇文章主要的介紹了關於html button標籤的類型介紹,還有關於html button標籤的作用和使用方法,最後還有使用執行個體,現在就讓我們一起來看這篇文章吧

首先看看html button標籤我們知道多少?

html button標籤有三個類型:

  • type=”submit”:提交按鈕(除了Internet Explorer,該值是其他瀏覽器的預設值)。

  • type=”button”:可點擊的按鈕(Internet Explorer的預設值)。

  • type=”reset”:重設按鈕(清除表單資料)。

PS:當button標籤被form標籤包含時,比如:

<form action="www.php.cn">    <button>點擊</button></form>

現在說說html button標籤的作用:

由於button在大多數瀏覽器中預設是submit,如果form標籤的action屬性有值的話,點擊button後會跳轉到它設定的連結”www.php.cn”;否則,點擊button會重新整理當前頁面。

在html中,<button>標籤是用來定義一個按鈕,在<button>標籤中可以放置一些內容(文本、映像等)。 <input>標籤也是定義按鈕的,它和<button>標籤的區別是<input>標籤是單標籤,沒有元素內容,<button>標籤是雙標籤,可以有元素內容,因此<button>標籤有更強大的功能和更豐富的內容。

注意:在html表單中建立按鈕一般使用<input>標籤,因為在表單中如果使用<button>標籤,不同的瀏覽器會提交不同的值。

<button>標籤最好都設定type屬性,因為瀏覽器對<button>標籤的type屬性可能有不同的預設值。

現在來說說html button標籤的使用:

button更多的功能在button元素內部,您可以放置內容,比如文本或映像。

<button>控制項與<input type="button">相比,提供了更為強大的功能和更豐富的內容。不過在使用中應該時刻規定type屬性;

在form表單中,internet Explorer的預設類型是"button",而其他瀏覽器中(包括 W3C 規範)的預設值是"submit"。

使用當然是要看執行個體了:

<!DOCTYPE html><html><head>    <meta charset="utf-8"><title>php中文網</title></head><body>   <button type="button">這是一個topic.alibabacloud.com</button>    <hr/>   <br/>   <button type="button">   <img src="http://img.php.cn/upload/course/000/117/584/5aa8cd08b9cf9363.jpg" width="100" height="50">   </button>   <hr/>   <button type="button" autofocus="autofocus">已經獲得焦點</button>   <hr/>   <button type="button" disabled="disabled">失效</button>    <form action="http://www.php.cn"    method="get">    請選擇你喜愛的項目:    <button name="subject" type="submit" value="HTML">HTML</button>    <button name="subject" type="subject" value="CSS">CSS</button>     </form></body></html>

,效果也很簡單。我們一起來看看:

效果是不是很明顯,把能用的都用上了。

好了,以上就是這篇文章的全部內容了,介紹了關於button按鈕標籤的一些用法和作用。有問題的可以在下方提問。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.