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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。