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=
</button>
</form>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...