You are currently viewing HTML Submit Button with an Action | Advanced Guide
  • Post category:HTML

HTML Submit Button with an Action | Advanced Guide

HTML submit button action

This article is about How to create submit button with action in HTML.

What is submit button?

This button helps to submit after filling in all the information in a form. You need to create this submit using the input tag inside the form tag, then all the data given in the form will be submitted. Create the submit button in the same way as creating the HTML button.

How to create submit button with an action

<form action="processor.html" method="get">
<p> Name:</p><input type="text" name="Username">
<p> Email:</p><input type="email" name="Email">
<p> Password</p><input type="Password" name="Pass">
<input type="submit"/>
</form>

The output after filled the information and clicking the submit button:

html submit button action

To create an HTML input submit button you need to create a <input> tag and give it a value of “Submit” using the type attribute. You need to create a submit button inside the <form> tag to submit the information in a form. The default button name of submit button is “submit”; if you want to change the button name, you can use the “value” attribute and give the desired button name. You must create an action attribute in the form tag and give it a filename and extension .html.

When you click on the submit button all filled information filled is sent to the action attribute in the <form> tag i.e processor.html. As in the above code, you only need to get information from the user using the input tag. In the above code, we are having “method” attribute in the <form> tag and set it to “get”, we are sending the complete information to the processor.html by the method get.

READ ALSO  Button Alignment in HTML | Advanced Trick

InĀ  get method, getting form user can able to see complete information filed in the form in the address bar. The address bar first displays the protocol file path and then displays a question mark, anything written after the question mark is known as a query string. The query string is actually a list of key-value pairs where the key will be the control name and the value will be entered or the value of the control. To separate key-value pairs in a query list browser uses an ampersand, ampersand is the separator between key-value pairs.

Post method

<form action="processor.html" method="get">

The output after filling in the information and clicking the submit button:html submit button action

One of the disadvantages of getting the method is user password is not secure, we can see the password in the address bar. So, the get method is not good when we are sending some secured information. You can use the post method instead of the getting method. To create a post method, you should give value as “post” to the method attribute in the <form> tag. If you use the post method, we cannot see the query sting itself so the post method is secured whereas the get method is not secured.

Conclusion

You should understand how the data is sent, I hope you guys have understood what is the difference between the getting method and the post method. And how to create an HTML submit button action.

Leave a Reply