HTML - <button> 標籤

HTML <button> 標籤用於建立按鈕。按鈕通常用於表單中提交表單，或者可以用於任何需要觸發操作的地方，例如清除、刪除、複製、貼上等。預設情況下，HTML 按鈕以與使用者執行的平臺匹配的樣式呈現，但您可以使用 CSS 更改按鈕樣式，例如顏色、寬度、高度等。

語法

<button>button name</button>

屬性

HTML button 標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，如下所示。

屬性	值	描述
autofocus	autofocus	頁面載入時按鈕獲得焦點
disabled	disabled	停用按鈕
form	form_id	按鈕所屬的一個或多個表單
formaction	URL	對於 type="submit"。提交表單時，將表單資料傳送到的位置。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	對於 type="submit"。在將表單資料傳送到伺服器之前，應如何對其進行編碼。
formmethod	get post	對於 type="submit"。如何傳送表單資料"
formnovalidate	formnovalidate	對於 type="submit"。提交時不應驗證表單資料。
formtarget	_blank _self _parent _top framename	對於 type="submit"。提交表單後，在何處顯示響應。
name	name	為按鈕指定名稱
type	button reset submit	指定按鈕的型別
value	text	為按鈕指定初始值

HTML button 標籤示例

以下示例將說明 button 標籤的用法、何時何地以及如何使用它來建立按鈕，以及如何使用 CSS 樣式化按鈕。

建立 HTML 按鈕

在以下程式中，我們使用 HTML <button> 標籤在 HTML 中建立了一個名為“click”的按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Button</title>
</head>

<body>
   <h1>HTML button</h1>
   <!-- HTML Button -->
   <button>click</button>
</body>

</html>

停用 HTML 按鈕

有時我們需要在某些條件下停用按鈕，這裡我們將建立一個虛擬的停用按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
</head>

<body>
    <h1>HTML button Tag</h1> 
    <strong>Normal HTML Button:</strong>
    <!-- HTML Button -->
    <button>Submit</button> 
    <br><br>
    <strong>Disable HTML Button:</strong>
    <!-- HTML Button -->
    <button disabled>Submit</button> 
</body>

</html>

樣式化 HTML 按鈕

以下是另一個 HTML <button> 標籤的示例。這裡，我們使用 <button> 標籤建立了一個名為“ClickMe！”的 HTML 按鈕，並且我們使用 CSS 來樣式化我們建立的按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>

<body>
    <h1>HTML button Tag</h1>
    <!-- HTML Button -->
    <button>ClickMe!</button> 
</body>

</html>

帶有連結的 HTML 按鈕

HTML 按鈕也可以用作連結，在此示例中，我們將建立一個連結到我們主頁的按鈕。我們可以用 HTML <a> 標籤包裝按鈕，或者我們可以使用 onclick 函式來觸發提到的 url。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>

<body>
    <h1>HTML button Tag</h1>
    <strong>Button with Link</strong>
    <!-- HTML Button using anchor tag -->
    <a href="https://tutorialspoint.tw/index.htm">
    <button>
        Tutorialspoint
    </button>
    </a>
    <!-- HTML Button using OnClick -->
    <button onclick="window.location.href = 
    'https://tutorialspoint.tw/index.htm';">
        Tutorialspoint
    </button>
</body>

</html>

支援的瀏覽器

標籤
button	是	是	是	是	是

html_tags_reference.htm

列印頁面