HTML5 Buttons

HTML5 Buttons

The clickable HTML5 buttons are defined with the following code

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Buttons </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <button type="button" onclick="alert('welcome to HTML5 buttons')"> Click here </button>
</body>
</html>

 

It is how the HTML5 button will display in the browser.

HTML5 Buttons

 

Definition and Use of HTML5 Buttons

The HTML5 button element displays a clickable button in the browser. Inside a <button> element, you can enclose text just like you do with other HTML5 elements like <strong>, <p>, <i>, and <img>.

However, you cannot write text in the button created with the <input> element.

Always use a ‘type’ attribute for the button element to instruct the browser what type of button you want to display.

Browsers Support for HTML5 Buttons

Here is the list of browsers that support HTML5 Buttons.

  • Google Chrome
  • Microsoft Edge
  • Opera
  • Firefox
  • Safari

Different Attributes of HTML5 Buttons and Their Values

Autofocus

It instructs the browser to focus the button when the page loads.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Form input types </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <button type="button" onclick="alert('Welcome to Vish Academy')" autofocus> Click here </button>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

 

  • disabled

It tells the browser that the button should be disabled

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Form input types </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <p> Button disable attribute </p>
    <button type="button" disabled> Click here </button>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

  • form

It tells the compiler button belongs to which form. The value of the id attribute of the form and the form attribute of the button should be the same.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Form input types </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <form action="action.php" method="GET" id="contactform">
        <label for="fname">Full Name:</label> <br>
        <input type="text" id="fname" name="fname" value="Vinay"> <br>
        <label for="Address">Address:</label> <br>
        <input type="text" id="Address" name="Address" value="Inida"> <br>
        <br>
    </form>
    <button type="submit" form="contactform"> Submi</button>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

  • formaction

Defines when the form input data will go upon submitting the form.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Form input types </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <form action="action.php" method="GET" id="contactform">
        <label for="fname">Full Name:</label> <br>
        <input type="text" id="fname" name="fname" value="Vinay"> <br>
        <label for="Address">Address:</label> <br>
        <input type="text" id="Address" name="Address" value="Inida"> <br>
        <br>
        <button type="submit" formaction="/action_page2.php"> Submit to another page</button>
    </form>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

  • formenctype

It specifies how the form input data should be encoded while sending to a server.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Form input types </title>
</head>
<body>
    <h1>HTML5 Buttons</h1>
    <form action="action.php">
        <label for="fname">Full Name:</label> <br>
        <input type="text" id="fname" name="fname" value="Vinay"> <br>
        <label for="Address">Address:</label> <br>
        <input type="text" id="Address" name="Address" value="Inida"> <br>
        <br>
        <button type="submit" formenctype="text/plain"> Submit without character encoding</button>
    </form>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

  • form method

It specifies which HTTP method to use for sending the form input data. We can assign GET or POST value to the ‘formmethod’ attribute.

Before we start discussing its syntax, let’s define GET and POST methods.

GET: it embeds the form input data to the URL

POST: it handles the data transition between the server and browser like an HTTP post-transaction

The syntax for Defining Formmethod

<button type=”submit” formmethod=”GET|POST” >

  • Formtarget

It specifies where to display the response upon the submission of the form. By default, HTML5 allows four values for the target attribute that are _blank, _self, _parent, and _top.

Before moving further, let’s discuss these four values separately:

_blank: displays the response page in a new tab.

_self: displays the response page in the same frame

_parent: displays the response page in the parent frame

_top: displays the response page in the full body of the window

The syntax for Defining ‘target’ Value

<button type=”submit” formtarget=”_blank | _self | _parent | _ top”>

  • Name

The ‘name’ attribute of the HTML5 button specifies a name for the button.

Example
<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Buttons </title>
</head>
<body>
    <h1>HTML5 Buttons with name attribute</h1>
    <form action="/action_page.php" method="get">
        Choose your favorite Javascript framework:
        <button name="framework" type="submit" value="React">React</button>
        <button name="framework" type="submit" value="Angular">Angular</button>
    </form>
</body>
</html>

 

The output of this code will be

HTML5 Buttons

 

 

To know more about styling buttons, visit our CSS portion.

 

48
48
48
48
48
48
48
Next Lesson » « Previous Lesson