The form element or the form tag (<form>.... </form>) contains several elements. As- input, select, text area, button, etc. We can use several attributes to form element but two are special as- “action” and “method”.
The "action" attribute indicates the location of the script that will process the information sent by the browser, when the form is submitted. This script is written in any server-side language and is supposed to be prepared to receive and process the form's data and the "method" attribute indicates the messenger through which we can send the information stored by the form.
Note:
The form attribute 'method' can contain the value either 'get' or 'post', which specifies the HTTP method to use when the form is submitted. As-
Get- With 'GET' the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The URL length is limited, so that there can be limitations on how much form data can be sent.
Post- With 'POST' all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser's address bar.
Form Controls-
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• Buttons (Clickable Buttons, Submit and Reset Button)
An HTML form element is any element that may be used inside of a <form> tag. These elements, along with the unique and standard attributes are-
Text Input Controls-
The <input> element can be displayed in as-
<input type="text" name=”anyNameHere”>
Example-
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Output-
Checkboxes Controls-
Checkboxes Control specifies that an <input> element should be pre-selected (checked) when the page loads. The checked attribute is a boolean attribute.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Chexk Box Example</title>
</head>
<body> I lived in:<br>
<form action="name_of_file" method="">
<input type="checkbox" name="me1" value="City1"> Nainital<br>
<input type="checkbox" name="me2" value="City2" checked> Dehradun<br>
</form>
</body>
</html>
Output-
Radio Box Controls-
A radio button is a form element that allows the user to select one option from a range of options. As-
<!DOCTYPE html>
<html>
<head>
<title> Radio Buttons</title>
</head>
<body>
<h2>Example- Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
Output-
Select Box Controls-
The <select> element is used to create a drop-down list. The <option> tag inside the <select> element is used. As-
Example-
<!DOCTYPE html>
<html>
<head>
<title> Select Box</title>
</head>
<body>
<form>
<h3>Facility Types:</h3>
<select>
<option value="Library">Library</option>
<option value="CompLab">Computer Center</option>
<option value="Hostel">Hostel</option>
<option value="Transport">Transport</option>
</select>
</form>
</body>
</html>
Output-
Buttons (Clickable Buttons, Submit and Reset Button)-
Generally, three types of buttons are used in html, as- Button, submit button and Reset button. Submit button is used to send form data, reset button is used to reset form fields and Button is simply a clickable button used as per situation. As-
Example- (Clickable Buttons)
<!DOCTYPE html>
<html>
<head>
<title> Clickable Buttons</title>
</head>
<body>
<form>
<h3>Clickable Buttons</h3>
<button name="subject" type="button" value="HTML"> Click on HTML</button>
<button name="subject" type="button" value="CSS">Click on CSS</button>
</form>
</body>
</html>
Output-
Example- (Submit and Reset Buttons)
<!DOCTYPE html>
<html>
<head>
<title>Submit and Reset Buttons</title>
</head>
<body>
<form action="name_of_file" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" form="form1" value="Submit">Click to Submit</button>
<button type="reset" form="form1" value="reset">Click to Reset</button>
</form>
</body>
</html>
Output-
Note- When you click on ‘Submit Button’ it sends the form data further for necessary action and when you click on ‘Reset Button’ it reset all the form fields.