HTML5 Input Button

HTML5 introduced several new input types that can be used to create different types of buttons. In this article, we will explore the different input button types and how they can be used in HTML5 forms.

The button Element

The button element is used to create a clickable button in HTML. It can be used with or without the type attribute. When the type attribute is not specified, the default value is "submit".

<button>Submit</button>

This creates a button with the label "Submit". Clicking on this button will submit the form data.

Submit Button

The submit button is used to submit the form data to the server. It is commonly used in HTML forms to perform actions like submitting a login form or saving data.

<input type="submit" value="Submit">

This code will create a submit button with the label "Submit". Clicking on this button will submit the form data.

Reset Button

The reset button is used to reset the form fields to their default values. Clicking on this button will clear all the form fields and set them to their initial values.

<input type="reset" value="Reset">

The code above will create a reset button with the label "Reset". Clicking on this button will reset the form fields.

Button Button

The button button is used to create a custom button with a custom behavior. It can be used to perform JavaScript actions when clicked.

<button type="button" onclick="alert('Hello World')">Click Me!</button>

This code will create a button with the label "Click Me!". Clicking on this button will trigger the JavaScript alert() function and display the message "Hello World".

Image Button

The image button is used to create a button with an image. It can be used to create visually appealing buttons.

<input type="image" src="button.png" alt="Submit">

The code above will create an image button with the image "button.png". Clicking on this button will submit the form data.

Conclusion

In this article, we explored the different input button types available in HTML5. We learned about the submit button, reset button, button button, and image button. These buttons can be used to create interactive forms and perform various actions. Experiment with these buttons and see how they can enhance the user experience of your HTML forms.

gantt
    dateFormat  YYYY-MM-DD
    title HTML5 Input Button Article Timeline

    section Research
    Read HTML5 Input Button Documentation    :done, Research, 2021-12-01, 2021-12-02

    section Writing
    Write Introduction and Submit Button     :done, Writing, 2021-12-02, 2021-12-03
    Write Reset Button and Button Button     :done, Writing, 2021-12-03, 2021-12-04
    Write Image Button and Conclusion        :done, Writing, 2021-12-04, 2021-12-05

    section Review
    Review and Edit Article                  :done, Review, 2021-12-06, 2021-12-07

    section Publish
    Publish Article                          :done, Publish, 2021-12-08, 2021-12-09