How to create a form with custom buttons in HTML ?
Last Updated :
31 May, 2023
HTML form contains other form elements like text box, check box, radio button, submit button, and many more.
For creating an HTML form, <form>________</form>tag is used as it is paired tag so starting and closing tags both are required. Other form elements are placed within these tags. It can be placed anywhere in the body tag of an HTML element.
Syntax:
<body>
<form>
</----other form elements ---->
</form>
</body>
There are two ways to create custom buttons with a PUSH button in an HTML document.
Method 1: Using text as a push button. Push-button does not have default behavior like Submit and Reset buttons so the basic coding is required for this button in terms of client-side scripting which gets executed when the button is clicked by the visitor of the website.
Syntax:
<button name="click me">Click Me</button>
The <button>tag is used to create a push-button. It is a paired tag so it is mandatory that starting (<button>) tag must have a closing (</button>) tag. Create a simple HTML form with basic coding using <form> tag and buttons with default behavior and customer behavior in order to see the difference in URL when the client-side script gets executed. By default Method attribute of the Form, tag takes the GET value if not specified. For this example, we are using the GET method as this method fetches the data from the fields of the HTML form entered by the user on the website, encoding is performed and then the form's information is appended to the end of the URL.
Example: In this example, we will use the above methods.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Push button</title>
</head>
<body>
<h2>Push Button</h2>
<form>
Username: <input type="text" name="name"
placeholder="Enter Username"
size="20">
<br><br>
Password: <input type="password"
name="password"
size="20"><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
<button name="click">
Click Me
</button>
</form>
</body>
</html>
The output of the URL when Submit Button is clicked
Output: when Reset Button is clicked
Output: When Text as Push Button is clicked
Method 2: Using Image as a push button. For enhancing the appearance of buttons, images can be included in custom buttons.
Syntax:
<button name="Click Me"><img src="click.jpeg"></button>
Example: In this example, we will use the above method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Push button</title>
</head>
<body>
<h2>Push Button</h2>
<form>
Username: <input type="text"
name="name"
placeholder="Enter Username"
size="20">
<br><br>
Password: <input type="password"
name="password"
size="20"><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
<button name="button">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220124213826/clickme.png">
</button>
</form>
</body>
</html>
Output:
Similar Reads
How To Create Registeration Form in HTML HTML Registration Form is a web-based form designed to collect user information such as name, email, password, and other details. It typically includes input fields, validation, and a submit button to register users on a website.HTML Registration FormHow to Create HTML Registration FormBasic Structu
2 min read
HTML Login Form HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or s
3 min read
HTML Form Design HTML forms are used on websites to collect information from users. They allow users to input information such as their name, email address, password, or feedback.The <form> tag defines the form structure.Form elements like <input>, <button>, and <select> are used to collect d
8 min read
How to add Radio Buttons in form using HTML ? In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro
1 min read
How to Add a Telephone Number into a form using HTML? In this article, we will learn how to add a telephone number field to an HTML form. Telephone numbers have numerous advantages and are an important component of contact forms, allowing for direct communication with the user. Users can receive messages or notifications regarding the services provided
2 min read
How to define a form for user input using HTML5 ? In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr
1 min read
How to Prevent Buttons from Submitting Forms in HTML? We will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn't completed all the required form fields, or added incorrect details in the form, etc. Below are the approaches to preve
3 min read
How to toggle password visibility in forms using Bootstrap-icons ? Toggle password visibility in forms allows users to reveal or hide their typed passwords for convenience and security. Using Bootstrap icons, you can implement this feature by toggling the input field's type attribute between "password" and "text" upon icon click, revealing or hiding the password. A
2 min read
How to perform form validation for a required field in HTML ? Performing form validation for a required field in HTML ensures that a user must fill in specific fields before submitting a form. This is typically done using the required attribute, which prevents form submission if the field is left blank, ensuring proper data input.Table of ContentRequired attri
4 min read
How do we take password input in HTML forms ? In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu
1 min read