HTML FORMS
Lecture outline
• Review of previous lecture
• HTML forms introduction
• Form elements
• Formatting forms with tables
• Wrap up
Introduction
• Forms are the primary method for gathering data from site
visitors then pass data to a server.
EXAMPLE
FIRST NAME: Martin
Luther
LAST NAME :
SUBMIT
Creating a form
• The <form> tag is used to create an HTML form:
<form action="Script URL“ method="GET|POST">
form elements like input, text_area etc.
</form>
Form Attributes
Elements in forms
There are various form elements available like:
— Text fields
— Text_area fields
— Drop-down menus
— Radio buttons
— Checkboxes
FORMS ELEMENT- THE
INPUT
• Is the most important form element
• Used to select user information.
• Is displayed in several ways, depending on the type attribute
Example
Type Description
<input type="text"> Defines a single-line text input field
<input type="radio"> Defines a radio button (for selecting
one of many choices)
<input Defines a submit button (for
type="submit"> submitting the form)
HTML Form Controls
One can use the following types of form controls to collect
data using HTML form:
– Text Input Controls
– Checkboxes Controls
– Radio Box Controls
– Select Box Controls
– File Select boxes
– Hidden Controls Clickable Buttons
– Submit and Reset Button
Text Input Controls
There are three types of text input used on forms:
– Single-line text input controls
– Password input controls
– Multi-line text input controls
Single-line text input controls
• Used for items that require only one line of user input, such
as search boxes or names. They are created using HTML <input>
tag.
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
Attributes for text
Password input controls
• This is also a single-line text input but it masks the
character as soon as a user enters it.
• They are also created using HTML <input> tag but type
attribute is set to password.
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password"
name="password" />
</form>
Multiple-Line Text Input Controls
• This is used when the user is required to give details that
may be longer than a single sentence.
• Multi-line input controls are created using HTML
<textarea> tag.
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
Attributes of text_area
Checkbox Control
• Checkboxes are used when more than one option is
required to be selected.
• They are also created using HTML <input> tag but type
attribute is set to checkbox.
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
Attributes of <checkbox> tag:
Radio Button Control
• Radio buttons are used when out of many options, just one
option is required to be selected.
• They are also created using HTML <input> tag but type
attribute is set to radio.
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
Select Box Control
• A select box, also called drop down box which provides
option to list down various options in the form of drop down
list, from where a user can select one or more options.
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
