HTML Form Action
The <form> tag has an attribute named action that contains a URL. The HTML action attribute defines the webpage URL on which you want to send the data after submitting the form, or you can redirect the user to the other page.
Examples of HTML Form Action:
Example 1:
This example creates a simple form with background color for making the web page attractive. After clicking the submit button, the data is sent, and the user is redirected to submit.html page, specfied in the action attribute.
<!DOCTYPE html>
<html>
<title> Example 1 of Form Action Attribute </title>
<body bgcolor="cyan">
<h1> Example 1 of Form Action Attribute</h1>
<form action="submit1.html">
<label for="Student Name"> Student Name: </label>
<input type="text" id="Student Name" name=" Student Name"><br><br>
<label for="email"> Email: </label>
<input type="text" id="email" name="email"><br><br>
<label for="age"> Age: </label>
<input type="text" id="age" name="age"><br><br>
<label for="Father's name"> Father's name:</label>
<input type="text" id="Father's name" name="Father's name"><br><br>
<label for="Mother's name"> Mother's name:</label>
<input type="text" id="Mother's name" name="Mother's name"><br><br>
<label for="University"> University:</label>
<input type="text" id="University" name="University"><br><br>
<label for="College"> College:</label>
<input type="text" id="College" name="College"><br><br>
<label for="Branch"> Branch:</label>
<input type="text" id="Branch" name="Branch"><br><br>
<label for="Hobby"> Hobby:</label>
<input type="text" id="Hobby" name="Hobby"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
The output screen has a form containing the student's name, email, age, father's name, mother's name, university, college, branch, hobby, and submit button.
On submission of the form, the user is redirected to the submit.html page, as shown below:
Example 2:
This example demonstrates the use of the form action attribute in HTML.
<!DOCTYPE html>
<html>
<head>
<title> Example 2 of Form Action Attribute </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, monospace, 'Segoe UI';
background-color: rgb(192, 241, 255);
}
.container {
padding: 40px;
background-color: rgb(232, 247, 166);
}
input[type=text] {
width: 100%;
padding: 12px;
margin: 6px 0 24px 0;
display: inline-block;
border: none;
background: #b4e0e1;
}
input[type=text]:focus {
background-color: rgb(93, 215, 223);
outline: none;
}
div {
padding: 12px 0;
}
.btn {
background-color: #e7a70f;
color: white;
padding: 15px 20px;
margin: 6px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
.btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<center> <h1> Registration Form </h1> </center>
<form action="submit2.html" method="post">
<div>
<label> Student Name </label>
<input type="text" name="Student Name" placeholder= "Student Name" size="14" required />
<label> Father's Name: </label>
<input type="text" name="Father's Name" placeholder="Father's Name" size="14"required />
<label> Mother's Name: </label>
<input type="text" name="Mother's Name" placeholder="Mother's Name" size="14"required />
<label>
Gender :
</label> <br>
<input type="radio" value="Male" name="gender" > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other <br> <br>
<label>
Date of Birth :
</label>
<input type="text" name="DOB" placeholder="DOB" size="10" required>
<label>
Mobile No. :
</label>
<input type="text" name="Mobile No." placeholder="Mobile No." size="10" required>
<div>
<button type="submit" class="btn"> Register </button>
</div>
</form>
</body>
</html>Output:
The below snapshot shows the registration form, which has input fields like first name, last name, father's name, mother's name, the radio button for gender selection, date of birth, mobile number, and a register button. The web page looks colourful due to the use of CSS (Cascading Style Sheets).
When you click on the registration button, data is sent to the action page, and the user is redirected to the web page contained in the action attribute, as shown below:
Browser Support:
It supports the browsers listed below:
- Mozilla Firefox
- Internet Explorer
- Google Chrome
- Safari
- Opera