Forms

• HTML Forms
• 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>
•

•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

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.
The most common input types are described below.
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>
How the HTML code above looks in a browser:
First name:
Last name: 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>
How the HTML code above looks in a browser:
Password: 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>
• How the HTML code above looks in a browser:
• Male
Female

• 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>
• How the HTML code above looks in a browser:
• I have a bike
I have a car

• 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>

New : New tags in HTML5.

Tag

Description

<form>

Defines an HTML form for user
input

<input>

Defines an input control

<textarea>

Defines a multiline input control
(text area)

<label>

Defines a label for an <input>
element

<fieldset>

Groups related elements in a
form

<legend>

Defines a caption for a
<fieldset> element

<select>

Defines a drop-down list

<optgroup>

Defines a group of related
options in a drop-down list

<option>

Defines an option in a dropdown list

<button>

Defines a clickable button

<datalist>New

Specifies a list of pre-defined
options for input controls

<keygen>New

Defines a key-pair generator
field (for forms)

<output>New

Defines the result of a
calculation

Forms

Related slideshows

More Related Content

Forms