HTML Forms

HTML Forms are used to create different kinds of user inputs.

HTML <form> Tag

HTML <form> tag is used create an HTML form to pass user inputs and data to the server. AN HTML form can contain input elements like text fields, checkbox, radio-buttons, submit-buttons, and more. A form can also contain select lists, textarea, fieldset, and label elements.

The <form> elemts can contain one or more of the following elements.

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>

For example:

<form action="form.asp" method="get">
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>

HTML <input> Tag

The most important form element is the input element. The <input> element is used to select user information. It specifies an input field where the user can enter data. The input element can vary in different ways, depending on the type attribute. It can be of text types, checkbox, password, radio button, submit button and more.

Text Fields
The text fields are used to create a one-line input field to enter text into.

For example:

<form>
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
</form>

Password Field
The password field are used to create a one-line input field to enter the password. The characters inside the password field are masked that is, it will be shown as asterisks or circles.

For example:

<form>
Password: <input type="password" name="pwd">
</form>

Radio Button
The radio buttons are used to create a radio button which allows the user to select only one of a limited number of choices.

For example:

<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

Checkboxes
The checkbox are used to create checkboxes that allows the user to select multiple number of options of a limited number of choices.

For example:

<form>
<input type="checkbox" name="web" value="HTML">Hyper Text Markup Language
<input type="checkbox" name="web" value="CSS">Cascading Style Sheets
</form>

Submit Button
A submit button is used to send form data into the server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute does some action the data it receives.

For example:

<form>
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>

HTML <textarea> Tag

The <textarea> tag is used to define a multi-line text input control. A text area can hold an unlimited number of characters, and the text is rendered in a fixed-width font. The size of the textarea can be specified by the cols and rows attributes, or using CSS height and width properties.

For example:

<textarea rows="4" cols="20">
The <textarea> tag is used  to define a multi-line text input control.
 The size of the textarea can be specified by the cols and rows attributes 
 or using CSS height and width properties.
<textarea>

HTML <label> Tag

The <label> tag defines a label for an <input> element. The <label> tag does not render as anything special for the user. However, it provide a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

For example:

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female">
</form>

HTML <fieldset> Tag

The <fieldset> tag is used to group related elements in a form. It draws a box around the related elements.

For example:

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30">
Email: <input type="text" size="30">
</fieldset>
</form>

HTML <legend> Tag

The <legend> tag is used to specify a caption for the fieldset element.

For example:

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30">
Email: <input type="text" size="30">
</fieldset>
</form>

HTML <select> Tag

The <select> tag is used to create a drop-down list.

For example:

<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</select>

HTML <optgroup> Tag

The <optgroup> tag is used to group related options in a drop-down list. It is used when you have a long list of options, and it helps to group realted options, ehich is easier to handle for a user.

For example:

<select>
<optgroup label="Designing">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</optgroup>
<optgroup label="Scripting">
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</optgroup>
</select>

HTML <option> Tag

The <option> tag is used to define a option in a drop-down list.

For example:

<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</select>

HTML <button> Tag

The <button> tag is used to create a clickable button. Inside the button element, we can put contents like text or images.

For example:

<button type="button">Click Me!</button>

HTML5 <datalist> Tag

The <datalist> tag is used to specify a list of pre-defined options for an input element. The datalist element is used to provide an autocomplete feature on input element. Users can see a drop-down list of pre-defined options as they input data.

For example:

<input list="browsers">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Safari">
</datalist>

HTML5 <keygen> tag

The <keygen> tag specifies a key-pair genator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.

For example:

<form action="form.asp" method="get">
Username: <input type="text" name="username">
Encryption: <keygen name="security">
<input type="submit" value="Submit">
</form>

HTML5 <output> tag

The <output> tag represents the result of a calculation.

For example:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>