Signup/Sign In

How to create Form Submit button in HTML?

Answer: Using the input tag with the type attribute value as submit.

Whenever we create HTML forms we need to send the form data to the server for processing. For this, we use submit buttons to submit the form data. When a user clicks on the submit button the data is submitted to the server.

Creating Submit Button

The <input> element with type="submit" attribute is used to create a submit button that submits form data to a form-handler.

The form-handler is generally a file on the server with a script to process input data values. In the form tag, we can use the action attribute to add the file name.

Here is the basic syntax:

<input type="submit" ... />

Example: Creating an HTML submit button

Here we have used the HTML <input> element to add buttons that submit the form data to the form handler.

Example: Form Submit button with Keyboard shortcut

We can use the accesskey attribute to add a keyboard shortcut for the submission button. When we use this attribute, then the user can submit the form by pressing the key we specify in this attribute.

In the example below, we have added "s" as an access key for submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Example</title>
</head>
<body>
    <h2>The submit button</h2>
	<form action="/my-handling-form-page" method="post">
	  <div>
		<label for="example">User name</label>
		<input id="example" type="text" name="text">
	  </div>
      <br/>
	  <div>
		<input type="submit" value="Submit Form" accesskey="s">
	  </div>
	</form>
</body>
</html>

Output:

Here is the output of the above program.

submit button with keyboard shortcut

Conclusion:

The <input> element with type="submit" is used to create a submit button for the form to submit the input value of forms to the form-handler.



About the author: