Chapter 5

HTML FORMS
Title and Contents
HTML FORMS
• An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
• The HTML <form> element is used to create a HTML form for
user input:
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
• All the different form elements are covered in this chapter
THE <INPUT> ELEMENT
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways,
depending on the type attribute.
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many

<input type="button"> Displays a clickable button

Example:

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="FirstName">
</form>
RADIO BUTTONS
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.
Example:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</form>
CHECKBOXES
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Example:
<form>
<input type="checkbox" id="bike" name="ch1">
<label for="bike">Bike</label>
<input type="checkbox" id="car" name="ch2">
<label for="car">Car</label>
<input type="checkbox" id="boat" name="ch3">
<label for="boat">Boat</label>
</form>
THE SUBMIT BUTTON
• The <input type="submit"> defines a button for submitting the
form data to a form-handler.
• The form-handler is typically a file on the server with a script
for processing input data.
• The form-handler is specified in the form's action attribute.
EXAMPLE
<form action="test.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="FirstName"><br>
<label for="lname">Last Name</label>
<input type="text" id="lanme" name="LastName"><br>
<input type="submit" name="submit">
</form>
THE ACTION ATTRIBUTE
• The action attribute defines the action to be performed when
the form is submitted.
• Usually, the form data is sent to a file on the server when the
user clicks on the submit button.
• In the example below, the form data is sent to a file called
“test.php". This file contains a server-side script that handles
the form data:
EXAMPLE
<form action="test.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="FirstName"><br>
<label for="lname">Last Name</label>
<input type="text" id="lanme" name="LastName"><br>
<input type="submit" name="submit">
</form>
THE METHOD ATTRIBUTE
• The method attribute specifies the HTTP method to be used
when submitting the form data.
• The default HTTP method when submitting form data is GET.
Example:
<form action=“test.php" method="get">
<form action=“test.php" method=“post">
THE NAME ATTRIBUTE FOR <INPUT>
• Notice that each input field must have a name attribute to be
submitted.
• If the name attribute is omitted, the value of the input field
will not be sent.
EXAMPLE
<form action="test.php">
<label for="fname">First Name</label>
<input type="text" id="fname" ><br>
<label for="lname">Last Name</label>
<input type="text" id="lanme" name="LastName"><br>
<input type="submit" name="submit">
</form>
THE AUTOCOMPLETE ATTRIBUTE
• The autocomplete attribute specifies whether a form should
have autocomplete on or off.
• When autocomplete is on, the browser automatically
complete values based on values that the user has entered
before.
Example:
<form action=“test.php" autocomplete="on">
THE <SELECT> ELEMENT
• The <select> element defines a drop-down list:
Example:
<label for="select">Select</label>
<select id="select">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
CONTINUEE…
• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to
the option:
CONTINUEE…
• The <select> element defines a drop-down list:
Example:
<label for="select">Select</label>
<select id="select">
<option>First</option>
<option selected>Second</option>
<option>Third</option>
</select>
VISIBLE VALUES
• Use the size attribute to specify the number of visible values:
Example:
<label for="select">Select</label>
<select id="select“ size=“2”>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
ALLOW MULTIPLE SELECTIONS
• Use the multiple attribute to allow the user to select more than
one value:
Example:
<label for="select">Select</label>
<select id="select“ size=“2” multiple>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
THE <TEXTAREA> ELEMENT
• The <textarea> element defines a multi-line input field (a text area):
• The rows attribute specifies the visible number of lines in a text
area.
• The cols attribute specifies the visible width of a text area.
Example:
<form>
<textarea rows="10" cols="30">
</textarea>
</form>
THE <BUTTON> ELEMENT
• The <button> element defines a clickable button:
Example:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
GROUPING FORM DATA WITH <FIELDSET>
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset>
element.
EXAMPLE
<form>
<fieldset>
<legend>Registration Form</legend>
<label for="fname">First Name</label>
<input type="text" id="fname"><br>
<label for="lname">Last Name</label>
<input type="text" id="lanme"><br>
</fieldset>
</form>
THE <DATALIST> ELEMENT
• The <datalist> element specifies a list of pre-defined options
for an <input> element.
• Users will see a drop-down list of the pre-defined options as
they input data.
• The list attribute of the <input> element, must refer to the id
attribute of the <datalist> element.
EXAMPLE
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML INPUT TYPES
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
HTML INPUT TYPES
<input type="number">
<input type="password">
<input type="radio">
<input type="reset">
<input type="search">
<input type="submit">
<input type="text">
<input type="time">
<input type="week">
THE VALUE ATTRIBUTE
• The input value attribute specifies an initial value for an input
field:

Example:
<input type="text" value=“Enter Name”>
THE READONLY ATTRIBUTE
• The input readonly attribute specifies that an input field is
read-only.
• The value of a read-only input field will be sent when
submitting the form!
Example:
<input type="text" value=“Enter Name” readonly>
THE DISABLED ATTRIBUTE
• The input disabled attribute specifies that an input field
should be disabled.
• A disabled input field is unusable and un-clickable.
Example:
<input type="text" value=“Enter Name” disabled>
THE MAXLENGTH ATTRIBUTE
• The input maxlength attribute specifies the maximum
number of characters allowed in an input field.
Example:
<input type="text" value=“Enter Name” maxlength="4" >
THE AUTOFOCUS ATTRIBUTE
• The input autofocus attribute specifies that an input field
should automatically get focus when the page loads.

Example:
<input type="text" value=“Enter Name” autofocus>
THANK YOU.
Any Questions?