HTML FORMS

COURSE INSTRUCTOR: SAADIA SHEHRYAR

Lecture 4
Outline
 What is HTML Form
 Form Elements
 Input Tag
 Input Types
 Button
 Checkbox
 RadioButton
HTML Form
 HTML Forms are required when you want to collect
some data from the site visitor
The <form> Element

 The <form> element defines an HTML form:

 <form>
.
form elements
.
</form>
 HTML forms contain form elements.
 Form elements are different types of input
elements, checkboxes, radio buttons, submit
buttons, and more.
The Action Attribute

 <form action="action_page.php">
 The action attribute defines the action to be
performed when the form is submitted.
 The common way to submit a form to a server, is by
using a submit button.
 Normally, the form is submitted to a web page on a
web server.
 If the action attribute is omitted, the action is set to
the current page.
The Method Attribute

 The method attribute specifies the HTTP method

(GET or POST) to be used when submitting the
forms.
 <form action="action_page.php" method="get">
 OR
 <form action="action_page.php" method="post">

Default. Appends the form-data to the URL in name/value pairs:

get
URL?name=value&name=value
post Sends the form-data as an HTTP post transaction
When to Use GET?

 You can use GET (the default method):

 If the form submission is passive (like a search
engine query), and without sensitive information.
 When you use GET, the form data will be visible in
the page address:
When to Use POST?

 If the form is updating data, or includes sensitive

information (password).
 POST offers better security because the submitted
data is not visible in the page address.
 Attributes of Form Tag

Attribute Value Description

action URL Specifies where to send the form-data when a form is

submitted

autocomplete on Specifies whether a form should have autocomplete

off on or off

method get Specifies the HTTP method to use when sending form-
post data

name text Specifies the name of a form

novalidate novalidate Specifies that the form should not be validated when
submitted
 The autocomplete Attribute

 The autocomplete attribute specifies whether a form or input

field should have autocomplete on or off.
 When autocomplete is on, the browser automatically
complete values based on values that the user has entered
before.
<form autocomplete="on">
Firstname:
<input type="text" name="fname"><br>
Email:
<input type="email" name="email" autocomplete
="off"><br>
<input type="submit">
</form>
The novalidate Attribute

 The novalidate attribute is a <form> attribute.

 When present, novalidate specifies that form data
should not be validated when submitted.
 <form novalidate>
Email: <input type="email" name="user
_email">
<input type="submit">
</form>
 The required Attribute

 It specifies that an input field must be filled out before

submitting the form.
 The required attribute works with the following input
types: text, search, url, email, password, date pickers,
number, checkbox, radio, and file.
Username:
<input type="text" name="user" required>
The <input> Element

 The <input> element is the most important form

element.
 The <input> element has many variations, depending
on the type attribute.
 <INPUT TYPE =
 TYPE must be one of:
 "text"
 "password"
 "checkbox"
 "radio”
 ”submit"
 ”reset”
 “button”
 Text Input Controls

 There are three types of text input used on forms:

 Single-line text input controls - This control is used for items
that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.
 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.
 Multi-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.
Single-line text input controls

 <input type="text"> defines a one-line input field

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

<form >
User ID : <br>
<input type="text" name="user_id" />
<br>
Password:
<input type="password" name="password" />
</form>
 Multiple-Line Text Input Controls

<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea> </form>
Attributes for Input Tag

Attribute Description
type Indicates the type of input control and for text
input control it will be set to text.
name Used to give a name to the control which is sent
to the server to be recognized and get the value.
value This can be used to provide an initial value inside
the control.
size Allows to specify the width of the text-input
control in terms of characters.
maxlength Allows to specify the maximum number of
characters a user can enter into the text box.
 The value Attribute

 The value attribute specifies the initial value for an

input field:
 <form >
First name:<br>
<input type="text" name="firstname" value
="John">
Last name:<br>
<input type="text" name="lastname">
</form>
The size Attribute

 The size attribute specifies the size (in characters)

for the input field:
 <form >
First name:<br>
<input type="text" name="firstname" v
alue="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
The maxlength Attribute

 The maxlength attribute specifies the maximum

allowed length for the input field:
<form >
First name:<br>
<input type="text" name="firstname" maxlen
gth="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
 With a maxlength attribute, the input control will not
accept more than the allowed number of characters.
 The min and max Attributes

 The min and max attributes specify the minimum and

maximum value for an <input> element.
 The min and max attributes work with the following input
types: number, range, date, time and week.
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max
="5">
Radio Button Input

 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.

 The name should be same in radio buttons.

<form>
<input type="radio" name="subject"
value="maths“ checked> Maths
<input type="radio" name="subject"
value="physics"> Physics
</form>
Input Type: checkbox

 <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="vehicle1" value="Bi
ke"> I have a pen
<br>
<input type="checkbox" name="vehicle2" value="Ca
r"> I have a book
</form>
Attributes
Attribute Description

type Indicates the type of input control and for checkbox input control
it will be set to radio.

name Used to give a name to the control which is sent to the server to
be recognized and get the value.

value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.

 The Submit Button

 <input type="submit"> defines a button for submitting a

form to a form-handler.
 The form-handler is specified in the form's action attribute:
• <form action="action_page.php">
First name:<br>
• <input type="text" name="firstname" value="Mi
ckey">
<br>
Last name:<br>
<input type="text" name="lastname" value="M
ouse">
<br><br>
<input type="submit" value="Submit">
</form>
Reset Button & Image Button
 Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
Image Button-acts like submit but image is
displayed
<input type="image" name="imagebutton"
src="/html/images/logo.png" />
Drop Down List
 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>
Grouping Form Data with <fieldset>
• The <fieldset> element groups related data in a form.
• The <legend> element defines a caption for the <fieldset> element.
<form >
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Grouping Form Data with <fieldset>
Input Type: number

 The <input type="number"> is used for input

fields that should contain a numeric value.
 You can set restrictions on the numbers.
 <form>
Quantity (between 1 and 5):
<input type="number" name="quantity
" min="1" max="5">
</form>
Input Type: date

 The <input type="date"> is used for input fields

that should contain a date.
 Depending on browser support:A date picker can
pop-up when you enter the input field.
<form>
Birthday
<input type="date" name=“age">
<input type="submit"></form>
The readonly Attribute

 The readonly attribute specifies that the input field is

read only (cannot be changed):
<form >
First name:<br>
<input type="text" name="firstname" val
ue="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
 The disabled Attribute

 The disabled attribute specifies that the input field is

disabled.
 A disabled element is un-usable and un-clickable.

 Disabled elements will not be submitted.

<form >
First name:<br>
<input type="text" name="firstname" value="J
ohn" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
.