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:
Syntax:
<form>
.
input elements
.
</form>
Here are some of the most commonly used form tags in HTML:
HTML Forms – 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.
- 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>
Bottom of Form
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
- Password Field
<input type=”password”> defines a password field:
<form>
Password: <input type=”password” name=”pwd”>
</form>
Bottom of Form
Note: The characters in a password field are masked (shown as asterisks or circles).
- 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=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” 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>
- 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_action.asp” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>
The textarea
<textarea>….</textarea> tag is used to create a text area box.
<TEXTAREA NAME=”COMMENTS” ROWS=”10” COLS=”20”>
</TEXTAREA>
<TEXTAREA NAME=”COMMENTS” ROWS=”10” COLS=”20” READONLY>
this textarea is 40 ‘cols’ wide
and 10 ‘rows’ in height
</TEXTAREA>
the drop down menu
sometimes known as a pull down menu uses <SELECT> and <OPTION> tags
Top of Form
Eggs Pasta Sugar Cheese Bread Milk
Bottom of Form
a ‘name’ is given to the <SELECT> tag and a value is applied to each <OPTION> tag
<SELECT NAME=”INGREDIENTS”>
<OPTION VALUE=”EGGS”>Eggs
<OPTION VALUE=”PASTA”>Pasta
<OPTION VALUE=”SUGAR”>Sugar
<OPTION VALUE=”CHEESE” SELECTED>Cheese
<OPTION VALUE=”BREAD”>Bread
<OPTION VALUE=”MILK”>Milk
</SELECT>
Note that one of the items on the list is ‘SELECTED’ otherwise the default selected option would be the top one (Eggs)
It’s simple to transform the drop menu into a scrolling menu by adding a size to the <SELECT> tag
the<SELECT> tag should have a closing tag </SELECT>