HTML FORMS
by Ms. Gunjan
Khanna
Grade VIII
• Don’t hesitate to answer when I
ask you.
• Nothing is right or wrong! Only
Participation is important.
• Raise your hand and wait for your
turn to share your answer/query.
TOPIC- CREATING
FORMS IN HTML
Learning Outcomes of the day-
-Introduction to forms in HTML
-Uses of Forms
SAMPLE FORM
Input
Box
Password
box
Radio
Button
Dropdown
Select box Submit
Button
• HTML Forms are required when
you want to collect some data
FORMS from the website visitor.
IN HTML • For example during user
registration you would like to
collect information such as
name, email address, credit card,
etc.
• The information is then sent
back to the server or back-end
application such as CGI, ASP
Script or PHP script etc.
CONTROL ELEMENTS
• Input Boxes – for text and numerical entries
• Radio Buttons – for selecting a single option
from a predefined list
• Selection Lists – for long lists of options,
usually appearing in a Drop-Down List Box
• Check Boxes – for selecting one or more
option from a predefined list
• Text Areas – for extended entries that can
include several lines of text
• Button – It is used to submit data to
webserver at the backend.
FORMS IN HTML
• Users enter or select a field using Form Controls
Elements.
• Form/Control elements include: buttons,
checkboxes, text fields, radio buttons, drop-down
menus, etc.
• A form usually contains a Submit button to send
the information in the form elements to the
server
FORM TAGS
<form> - begin a form
<input> - ask for information in one of several
different ways
</form> - end a form HTML form
PASSWORD INPUT (TYPE=“PASSWORD”)
Password is exactly the same as text input elements, except
that when the viewer types in, they see "bullet" characters
rather then the letter they are typing.
Example 1: A password field named "pass1" that is 30
characters wide
<input type="password" name="pass1" size="30">
//Encrypted characters =******
INPUT TAG
•INPUT:Only used within a FORM element. It is denoted by
<INPUT>
Its Attributes:
•NAME: The name of the particular element.
•MAXLENGTH: The maximum number of characters that
can be entered by users in a text field.
•SIZE: Specifies the size of the field and depends on its
type.
•VALUE: Contain the initial value displayed to users.
•TYPE: Defines the type of data used in the field.
Example: A text field named "text1" that is 30 characters wide.
<input type="text" name="text1" size="30">
CHECKBOX TAGS
Checkbox:
An object where several values can be selected at the same
time.
The checkbox is submitted as separate name/value pair for
each selected value.
Example:
Hobbies: <input type="checkbox“ value="Singing">Singing
<input type="checkbox" value="Playing Sports">Playing
Sports
<input type="checkbox" value="Listening Music">Listening
Music
<input type="checkbox" value="Art and Craft"> Art and
Craft
<input type="checkbox" value="Net Surfing">Net Surfing
RADIO BUTTONS (TYPE=“RADIO”)
• Are sets of controls that are linked so that only one radio
button among each set is selected at a time
• If you click one radio button, the others in the set are
automatically de-selected
• Adding the option CHECKED to one of the buttons in a set
will make that button highlighted when the page loads
Radio buttons:
Gender:
<input type="radio" name="radiobutton" value= "male">
Male
<input type="radio" name="radiobutton" value=“female"
checked> Female
DROP-DOWN MENU OR LIST
School Wing:
<select name=" School Wing">
<option value="Pre School">Pre School
</option>
<option value="Primary">Primary</option>
<option value="Middle">Middle</option>
<option value="High">High</option>
<br><br>
</select>
TEXTAREA INPUT (TEXTAREA)
TEXTAREA- Text fields that have more than one line and
can scroll as the viewer enters more text.
Uses attributes ROWS and COLS to size.
<textarea rows=“5” cols=“20” name= “Address” >
CONTROL BUTTONS
A form must include at least one control button
for submitting the information once it is filled
out.
• A submit button:
<input type="submit" name="Submit"
value="Submit">
• A reset button:
<input type="reset" name="Submit2"
value="Reset"> submit: send data to server
reset: restore all form elements to
their initial state
PRACTICAL -FORMS
TOPIC -MY PORTFOLIO
<html>
<head>
<title>My Portfolio</title></head>
<body><H1>My Portfolio</H1>
<form>
First Name: <input type="text" value=""><br><br>
Second Name: <input type="text" value=""><br><br>
Age: <input type="number" value=""><br><br>
Address: <textarea rows="5" cols="20">
</textarea><br><br>
Class: <input type="text" value=""><br><br>
Gender:
<input type="radio" value="" Name="Gender" value =
"Male“ > Male
<input type="radio" value="“ Name =
"Gender"value="Female">
TOPIC -MY PORTFOLIO CONTD..
Hobbies: <br><input type="checkbox“ value="Singing">
Singing<br>
<input type="checkbox" value="Playing Sports">Playing
Sports<br>
<input type="checkbox" value="Listening Music">
Listening Music<br>
<input type="checkbox" value="Art and Craft"> Art and
Craft<br>
<input type="checkbox" value="Net Surfing">Net
Surfing<br><br>
School Wing:
<select name="Wing">
<option value="Pre School">Pre School</option>
<option value="Primary">Primary</option>
<option value="Middle">Middle</option>
<option value="High">High</option>
<br><br>
</select>
Output Screen
Query/Doubts
Home
Assignment
Create a registration form shown below using form elements.
THANK
YOU
I hope you can get useful
knowledge from this
presentation. Good luck !