Chapter 6: HTML Forms

With Stylings (Internal, External and Inline CSS)

Objectives:

 At the end of this chapter, the students will

be able to understand:
 How to create HTML forms?
 How to Create or include different input controls
in a form?
 How to add styles

University of Technology and Applied Sciences 2

Form Element
 The HTML <form> element defines a form that is
used to collect user input.
 Syntax:

 An HTML form contains form elements.

Note:
HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as 3
University of Technology and Applied Sciences
name, email address, credit card, etc.
How to insert Form in Blue Griffon

University of Technology and Applied Sciences 4

How to insert different input elements -
TEXTBOX

University of Technology and Applied Sciences 5

Insert Text box with attributes
 Placeholder – The input placeholder attribute specifies short a hint
that describes the expected value of an input field

 Size - The input size attribute specifies the visible width, in characters, of an input field.
 Maxlength – It specifies the maximum number of characters allowed in an input field.
 Required – It specifies that the input field must be filled before submitting the form. The field
should not be left blank.
 Autofocus – It specifies that an input field should automatically
get focus when the page loads.

University of Technology and Applied Sciences 6

How to insert different input elements –
PASSWORD

University of Technology and Applied Sciences 7

How to insert different input elements –
EMAIL

University of Technology and Applied Sciences 8

How to insert different input elements –
DATE

University of Technology and Applied Sciences 9

How to insert different input elements –
RADIO BUTTON
 The radio buttons should be given same names. Assigning same name for the
radio button must be done through source in Blue Griffon,
 Checked – The checked property sets or returns the checked state of a radio
button.
 Single selection only possible in radio button.

University of Technology and Applied Sciences 10

How to insert different input elements –
CHECKBOX
 Multiple selection is possible in checkbox.

University of Technology and Applied Sciences 11

How to insert different input elements –
TEXTAREA
 The <textarea> element defines a multi-line input field.

University of Technology and Applied Sciences 12

How to insert different input elements –
SELECTION LIST
 The <select> element defines a drop-down list.
 The <option> elements defines an option that can be selected.

University of Technology and Applied Sciences 13

How to insert different input elements –
SELECTION LIST

University of Technology and Applied Sciences 14

How to insert different input elements –
SUBMIT Button
 It is defined as a button for submitting the form data to a form-handler.

University of Technology and Applied Sciences 15

Message displaying on clicking Submit button

 <input type="button"> defines a button.

 Example:
 <input type=“submit” onclick=“alert(‘Login Successful’)”
value=“Sign In”>

University of Technology and Applied Sciences 16

How to insert different input elements –
RESET Button

University of Technology and Applied Sciences 17

Styling the Form elements
 Can be done using any CSS.
 Select any input element(eg : textbox)
 Choose “input”.
 Go to “style properties” and apply any styles.
 Then click “stylesheets” and edit the code.

input[type=text]{background-color:grey;}

University of Technology and Applied Sciences 18

What are the FORM Elements?

The form elements are as follows:

Input Element
Select Element
Text Area Element
Button Element

University of Technology and Applied Sciences 19

Different Types of FORM controls

 Text Input Controls

 Single-Line Input Control
 Multiple-Line Input Control (Text Area)
 Checkboxes
 Radio Buttons / Option Buttons
 Select Boxes / Combo box / List box
 File Select boxes
 Clickable Buttons
 Buttons (Submit and Reset)
University of Technology and Applied Sciences 20
The <input> Element

 The <input> element is the most important form element.

 The <input> element can be displayed in several ways, depending on
the type attribute.
 Here are some examples:

University of Technology and Applied Sciences 21

The input type
 <input type="button">
 <input type="text">
 <input type="password">
 <input type="checkbox">
 <input type="radio">
 <input type="color">
 <input type="time">
 <input type="date">
University of Technology and Applied Sciences
 <input type=“week">
 <input type="email">
 <input type="file">
 <input type="image">
 <input type=“number">
 <input type="range">
 <input type="submit">
 <input type="reset">
22
The <input> Attributes
 Autocomplete  Readonly
 Autofocus  Rows
 Cols  Size
 Disabled  Value
 Name  Step
 Maxlength
 Min and max
 Multiple
 Placeholder
 Required
University of Technology and Applied Sciences 23
The <Input> Attributes : Description
 AUTOCOMPLETE: The autocomplete attribute specifies
whether a form or input field should have autocomplete on or
off.

 AUTOFOCUS: The autofocus attribute specifies that the input

field should automatically get focus when the page loads.

 VALUE: The value attribute specifies the initial value for an

input field.

 READONLY: The readonly attribute specifies that the input

field is read only (cannot be changed)

University of Technology and Applied Sciences 24

The <Input> Attributes : Description
 DISABLED: The disabled attribute specifies that the input
field is disabled.
A disabled input field is unusable and un-clickable, and its
value will not be sent when submitting the form.

 MAXLENGTH: The maxlength attribute specifies the

maximum allowed length for the input field

University of Technology and Applied Sciences 25

The <Input> Attributes : Description

 MULTIPLE: The multiple attribute specifies that the user is allowed to

enter more than one value in the <input> element.
The multiple attribute works with the following input types:
email, and file.

 MIN AND MAX: The min and max attributes specify the minimum and
maximum values for an <input> element.
The min and max attributes work with the following input types:
number range, date, datetime-local, month, time and week

University of Technology and Applied Sciences 26

The <Input> Attributes
 PLACEHOLDER: The placeholder attribute specifies a hint
that describes the expected value of an input field (a
sample value or a short description of the format).
The hint is displayed in the input field before the user
enters a value.
The placeholder attribute works with the following
input types: text, search, url, tel, email, and password.

 REQUIRED: The required attribute 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, tel, email, password, date pickers,
number, checkbox, radio, and file.
University of Technology and Applied Sciences 27
Input Type Text

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

for text input.
 The default width of a text input field is 20
characters.
 Example:

University of Technology and Applied Sciences 28

Input Type Text with Placeholder
 The placeholder attribute specifies a short hint that
describes the expected value of an input field.

 The short hint is displayed in the input field before the user
enters a value.

 Note: The placeholder attribute works with the following

input types: text, search, url, tel, email, and password.

University of Technology and Applied Sciences 29

Example: Input Type Text with Placeholder

University of Technology and Applied Sciences 30

Input type with Value
 The value attribute specifies the value of an <input>
element.
 The value attribute is used differently for different input
types:
 For "button", "reset", and "submit" - it defines the text on the
button.
 For "text", "password", and "hidden" - it defines the initial
(default) value of the input field.
 For "checkbox", "radio", "image" - it defines the value
associated with the input

University of Technology and Applied Sciences 31

Example: Input type Text with Value

University of Technology and Applied Sciences 32

Example: Input type Text with Autofocus
 The autofocus attribute is a boolean attribute. When
present, it specifies that an <input> element should
automatically get focus when the page loads.

University of Technology and Applied Sciences 33

 How to disable textbox?
What attribute shall be used?
ANSWER: The disabled attribute is a boolean attribute. When
present, it specifies that the element should be disabled.

A disabled element is unusable.

Example:

University of Technology and Applied Sciences 34

Input Type Password
 <input type="password"> defines a password field.

 Example:

University of Technology and Applied Sciences 35

Input Type Password with Required Attribute
 The required attribute is a boolean attribute.When present, it specifies
that an input field must be filled out before submitting the form.
 Note: The required attribute works with the following input types: text,
search, url, tel, email, password, date pickers, number, checkbox, radio,
and file.
 Example:

University of Technology and Applied Sciences 36

Input Type Radio Button

 <input type="radio"> defines a radio button.

 Radio buttons let a user select ONE of a limited
number of choices.
 Example:

University of Technology and Applied Sciences 37

Input Type Checkbox
 <input type="checkbox"> defines a checkbox.
 Checkboxes let a user select ZERO or MORE options of
a limited number of choices.
 Example:

University of Technology and Applied Sciences 38

Input Type Submit

 <input type="submit"> defines a button for submitting form data

to a form-handler.
 The form-handler is typically a server page with a script for
processing input data.
 Example:

University of Technology and Applied Sciences 39

Input Type Reset
 <input type="reset"> defines a reset button that will
reset all form values to their default values.
 Example:

University of Technology and Applied Sciences 40

Input Type Email

 The <input type="email"> is used for input fields that should

contain an e-mail address.
 Depending on browser support, the e-mail address can be
automatically validated when submitted.
 Example:

University of Technology and Applied Sciences 41

Input Type File : Single
 Define a file-select field and a "Browse..." button (for file uploads).

 Example:

University of Technology and Applied Sciences 42

Input Type File : Multiple

 Example:

University of Technology and Applied Sciences 43

Input type: Hidden

 Define a hidden field (not visible to a user).

 Example:

University of Technology and Applied Sciences 44

The <select> Element & <option> Element

 The <select> element defines a drop-down list.

 The <option> elements defines an option that can be selected.
 By default, the first item in the drop-down list is selected

Example:

University of Technology and Applied Sciences 45

How to define a pre-selected option?

 Answer: add the selected attribute to the option

 Example

University of Technology and Applied Sciences 46

How to convert drop-down list/combo
box into list box?

University of Technology and Applied Sciences 47

The <textarea> Element

 The <textarea> element defines a multi-line input field.

What are the attributes?

The rows attribute specifies the visible

number of lines in a text area.

The cols attribute specifies the visible

width of a text area.
University of Technology and Applied Sciences 48
Example: Textarea

University of Technology and Applied Sciences 49

 How to set Maximum Length of
Textarea?
Set the maximum characters of text area to 50 Characters.

University of Technology and Applied Sciences 50

 What is the use of readonly attribute?
 ANSWER:
The readonly attribute is a boolean attribute. When
present, it specifies that a text area should be read-
only. In a read-only text area, the content cannot be
changed, but a user can tab, highlight and copy
content.

University of Technology and Applied Sciences 51

Readonly Attribute : <Input type =“text”>

 Example:

University of Technology and Applied Sciences 52

 Min and Max attribute can be
applied in what input type element?

 ANSWER:
 The max and min attributes works with the following input
types: number, range, date, datetime, month, time and
week.

University of Technology and Applied Sciences 53

The <fieldset> and <legend> Element
 The <fieldset> tag is used to group related elements in a form.

 The <fieldset> tag draws a box around the related elements.

 The name attribute specifies a name for a fieldset.

 The name attribute is used to reference elements in a JavaScript, or

to reference form data after a form is submitted.

 The <legend> tag defines a caption for the <fieldset> element.

 The align attribute specifies the alignment of the caption in a fieldset.

University of Technology and Applied Sciences 54

How to add Legend and Fieldset to a
form?

University of Technology and Applied Sciences 55

Example: Fieldset and Legend

University of Technology and Applied Sciences 56

How to set the width and background
color of fieldset?

University of Technology and Applied Sciences 57

How to set the legend at the right side of fieldset?

University of Technology and Applied Sciences 58

Input type color
 is used for input fields that should contain a color.
 It displays a Color picker.
Example:

University of Technology and Applied Sciences 59

How to display value of color picker in a
Message box or alert?
 Answer:

University of Technology and Applied Sciences 60

Input type Date
 is used for input fields that should contain a date.
 It displays a date picker.

University of Technology and Applied Sciences 61

 How to display in an alert box the date
chosen from the date picker?

University of Technology and Applied Sciences 62

Input type Time
 allows the user to select a time (no time zone).

University of Technology and Applied Sciences 63

Input Type Week
 allows the user to select a week and year.

University of Technology and Applied Sciences 64

Input type Number
 defines a numeric input field.
 You can set restrictions on what numbers are accepted.

University of Technology and Applied Sciences 65

• How to set the number values as
1,3,5? What attribute is needed?
Answer: Step

University of Technology and Applied Sciences 66

Input type Range
 Defines a control for entering a number.
 Default range is 0 to 100.
 Restrictions can be set using min, max and step attributes.

University of Technology and Applied Sciences 67

How to set the range value?

 Example: Set the range pointer to 8.

 Answer

University of Technology and Applied Sciences 68

Exercise 1: Design the form as shown
below screen shot.

University of Technology and Applied Sciences 69

Exercise 2: Design the form as shown below
screen shot.

University of Technology and Applied Sciences 70

What are the styles can be applied to
the form elements?
 Background color
 Color
 Font
 Font-size
 Bold
 Italic
 Opacity
 Padding
 Border

University of Technology and Applied Sciences 71

Styling the Buttons

University of Technology and Applied Sciences 72

Styling the Textboxes

University of Technology and Applied Sciences 73

Styling Drop-down List/Combobox

University of Technology and Applied Sciences 74

References:

 https://www.w3schools.com/html/html_form_elements.asp
 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HT
ML_form
 https://www.tutorialspoint.com/html/html_forms.htm
 https://marksheet.io/html-forms.html

University of Technology and Applied Sciences 75