Scribd
Upload
11 views18 pages

Lecture 3

The document provides an overview of HTML forms, including their purpose for data collection and various form elements such as text fields, checkboxes, and radio buttons. It explains how to create forms using the <form> tag and details different input types like single-line, password, and multi-line text inputs. Additionally, it covers the use of select boxes and the attributes associated with different form controls.

Uploaded by

Alex Kiplagat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views18 pages

Lecture 3

The document provides an overview of HTML forms, including their purpose for data collection and various form elements such as text fields, checkboxes, and radio buttons. It explains how to create forms using the <form> tag and details different input types like single-line, password, and multi-line text inputs. Additionally, it covers the use of select boxes and the attributes associated with different form controls.

Uploaded by

Alex Kiplagat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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>

You might also like