HTML FORM
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name,
email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside the
application.
There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method =
"GET|POST">
form elements like input, textarea etc.
</form>
HTML Form Controls
There are different types of form controls that you can use to collect data using HTML
form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
Single-line text input controls
This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Password input controls
This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML <input>tag but type attribute is set to password.
Example
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Display a Reset Button
Click on the reset button to reset the form.
Enter your email:
Enter a PIN:
Reset Submit
<!DOCTYPE html>
<html>
<body>
<h1>Display a Reset Button</h1>
<p>Click on the reset button to reset the form.</p>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pin">Enter Your Password:</label>
<input type="text" id="pin" name="pin" maxlength="4"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body></html>