PUBLISHED ON: JULY 23, 2021
How to change text of form submit button?
When we create a Submit button in HTML, it is submit by default. But the submit button is used for different purposes like logging in to the system, sending requests, etc. A webpage may include more than one submit button. So, we should rename the submit button according to the purpose of the button.
Input value attribute
The value attribute can be used to change the text of the form submit button. Use value attribute within <input> of type="submit" to rename the button.
Example: Change the text of form submit button
Here, we have added an input text field with a submit button. The submit button has been renamed to send.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>Change button text</h2>
<form>
<label for="name">Enter name:</label>
<input type="text" name="name" id="name" >
<input type="submit" value="send">
</form>
</body>
</html>
Output:
Example: Adding multiple buttons with the name change
Sometimes we need to add multiple buttons within the same form. So naming them according to the purpose will be more relevant than the default name. Here, we have a text field, password field, and two buttons one named as login and the other as signup.
Conclusion
So the value attribute is used to change the text of submit button within the form. It can be useful to the user as the user may better understand the purpose of the button if it has been named accordingly. Also if there are multiple buttons within the form, they can differentiate between them.
