HTML form
➔ HTML <form> represents a section for user input.
➔ HTML <form> contains interactive input control elements.
➔ <form> submits user information to the server for processing.
➔ User input can be variety of types like text, check box, radio selection, combo box, date, file etc.
Primary attributes used with the HTML form tag:
<action>,
<method>,
<target>,
<enctype>,
<autocomplete>,
<novalidate>,
<name>,
<accept-charset>.
All global attributes can also be applied on all elements, although some elements may have no effect on them.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form tag with action and method Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="submit"] {
width: 150px;
height: 50px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="submit"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"],
input[type="email"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML form tag with action and method Attribute Example</h2>
<form action="tryithtml_blank_response01.jsp" method="POST">
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Copy code and click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Tag Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML Form Tag Example</h2>
<form id="myform" action="" method="get">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Submit" onclick=submitForm()>
</div>
</form>
<script>
function submitForm() {
if (myform.checkValidity()) {
event.preventDefault();
alert("Form data submitted.");
}
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.