Form

¢HTML forms are used to pass data to a server.

¢An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

¢The <form> tag is used to create an HTML form

<form>
.
input elements
.
</form>

The Input Element

¢The most important form element is the <input> element.

¢The <input> element is used to select user information.

¢An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

          

            The Input Elements

Text Fields:

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text“ name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Password Field:

<input type="password"> defines a password field:

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

Radio Buttons:

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name=“gender“ value="male">Male<br>
<input type="radio" name=“gender“ value="female">Female
</form>

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Drop downs:

<select name=“subject"> defines a drop down.

<option value=“Algorithms”> defines the elements in drop down.

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi“ selected>Audi</option>

</select>

</form>

Drop downs:

<select name=“subject"> defines a drop down.

<option value=“Algorithms”> defines the elements in drop down.

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi“ selected>Audi</option>

</select>

</form>

               Optgroup

<optgroup> Group related options in the drop down list.

<select name="cars">

<optgroup label="Level 1">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="Level 2">

<option value="fiat">Fiat</option>

<option value="audi">Mercedes</option>

</optgroup>

</select> <br>

Submit Button:

<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form.htm" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Reset Button:

<input type=“reset"> defines a Reset button.

It creates a button that automatically resets form controls to their initial values.

<input type="reset" value="Clear Form">