HTML Button type用法及代碼示例

DOM Button類型的Property用於設置或返回<button>元素的type屬性的值。

用法:

它用於返回type屬性。
```
buttonObject.type
```

它用於設置type屬性。

buttonObject.type = "submit|button|reset"

屬性值：

submit:它定義了一個提交按鈕。它具有除Internet Explorer以外的所有瀏覽器的默認值。
button:它定義了一個可點擊的按鈕。它具有Internet Explorer的默認值。
reset:它定義了一個重置按鈕，用於更改表單中的先前數據。

返回值：它返回一個表示按鈕類型的字符串值。

示例1：演示如何返回buttonObject.type屬性的HTML程序。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>DOM button type Property</title>  
    </head>  
    <body style = "text-align:center">  
        <h1 style = "color:green;">  
            GeeksforGeeks  
        </h1>  
          
        <h2>  
            DOM button type Property  
        </h2>  
          
        <button id="btn"type="Button" value="GeeksForGeeks" 
                                          onclick="geek()">  
        Click me!</button>  
          
        <p id="g" style="font-size:25px;color:green;"></p>  
          
        <script>  
            function geek() {  
            var x = document.getElementById("btn").type;  
            document.getElementById("g").innerHTML =  x;  
            }  
        </script>  
    </body>  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：：

示例2：示例，說明如何設置buttonObject.type屬性。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>DOM button type Property</title>  
    </head>  
    <body style = "text-align:center">  
        <h1 style = "color:green;">  
            GeeksforGeeks  
        </h1>  
          
        <h2>  
            DOM button type Property  
        </h2>  
        <form id="myForm" action="/action_page.php"> 
       First name:<input type="text" name="fname"><br> 
       Last name:<input type="text" name="lname"><br> 
      <button id="btn" type="button" value="Submit">Submit</button> 
      <br><br> 
      <b>CLick on "Try it " Button to  
          change the type of above Button</b> 
      <br><br>     
     <button  onclick="geek()">  
        Try it</button>  
          
        <p id="g" style="font-size:25px;color:green;"></p>  
          
        <script>  
            function geek() {  
            var x = document.getElementById("btn").type = "submit" 
            document.getElementById("g").innerHTML =   
             "The value of a type attribute of a button" 
             + " was changed from button to " + x;  
            }  
        </script>  
    </body>  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

支持的瀏覽器：下麵列出了DOM Button類型“屬性”支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML | DOM Button type Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。