HTML Forms
The HTML Forms are required, when you want to collect some data from the site visitor.
An HTML form is used to collect user input.
A form will take input from the site visitor and then will post it to a back-end application such as ASP or PHP 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.
Syntax
The HTML <form> tag is used to create an HTML form and it has following commonly used syntax:
<form action="URL" method="GET|POST">
form elements like input, textarea etc.
</form>
The <input> Element
The <input> element specifies an input control for a form.
Example
<form action="action">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Text Fields
The default value. provides single-line text field.
Line-breaks are automatically removed from the input value.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Note: The default width of an input field is 20 characters.
The <label> Element
The <label> element is used to relate descriptions to form controls.
Example
<form action="action">
<input type="radio" id="html" name="language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
Tip: The <label> element provides a usability improvement by making the form more accessible for mouse users. It provides a much larger clickable area for small elements link checkbox, radio
Checkboxes
The <input type="checkbox"> defines a checkbox.
A check box allowing single values to be selected or deselected.
Example
<label for="html">HTML: </label>
<input type="checkbox" id="html" value="HTML">
<label for="css">CSS: </label>
<input type="checkbox" id="css" value="CSS">
<label for="js">JavaScript: </label>
<input type="checkbox" id="js" value="JavaScript">
Radio Buttons
A <input type="radio"> button, allowing a single value to be selected out of multiple choices with the same name value.
Example
<input type="radio" id="html" name="language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="language" value="JavaScript">
<label for="javascript">JavaScript</label>
The Submit Button
The <input type="submit"> provides button that submits the form.
Example
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName"><br>
<input type="submit" value="Submit">
The Name Attribute for <input>
The name attribute allows a form control to be assigned a name to set as the name or value pair value sent to the server.
Example
<form action="action">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
See <input> HTML Tag.