Scribd
Upload
16 views34 pages

FORMS

The document provides an overview of HTML forms, detailing the <form> element and various input types including text fields, radio buttons, checkboxes, submit buttons, and more. It explains the purpose of each element and provides examples of how to implement them in HTML code. Additionally, it highlights the importance of the <label> element for accessibility and user interaction.

Uploaded by

manveetsidhu2025
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
16 views34 pages

FORMS

The document provides an overview of HTML forms, detailing the <form> element and various input types including text fields, radio buttons, checkboxes, submit buttons, and more. It explains the purpose of each element and provides examples of how to implement them in HTML code. Additionally, it highlights the importance of the <label> element for accessibility and user interaction.

Uploaded by

manveetsidhu2025
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/ 34

WEB DESIGNING

Course :BCA
Semester :4th​
Subject : WD​
Faculty: Ms. MONIKA AGGARWAL
Topic :FORMS IN HTML
HTML Forms

An HTML form is used to collect user input.


The user input is most often sent to a server
for processing.
The <form> Element

The HTML <form> element is used to create an


HTML form for user input:
<form>
.
form elements
.
</form>

The <form> element is a container for different


types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
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.
Here are some examples:
Text Fields

The <input type="text"> defines a single-line


input field for text input.
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <label> Element

Notice the use of the <label> element


in the example above.
The <label> tag defines a label for
many form elements.
The <label> element is useful for
screen-reader users, because the
screen-reader will read out loud the
label when the user focus on the input
element.
The <label> Element

The <label> element also help users


who have difficulty clicking on very
small regions (such as radio buttons or
checkboxes) - because when the user
clicks the text within
the <label> element, it toggles the
radio button/checkbox.
The for attribute of the <label> tag
should be equal to the id attribute of
the <input> element to bind them
Radio Buttons

The <input
type="radio"> defines a radio
button.
Radio buttons let a user select
ONE of a limited number of
choices.
Example

A form with radio buttons:

 <form>
<input type="radio" id="male" name="gender" value="male"
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="fem
le">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="othe
>
<label for="other">Other</label>
</form>
CONT..
This is how the HTML code above will be
displayed in a browser:

o Male
o Female
o Other
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="vehicle1" name="vehicle1" value="Bike">



<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label>

</form>
Cont..

This is how the HTML code above will be


displayed in a browser:

 I have a bike
 I have a car
 I have a boat
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="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><


br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br


><br>

<input type="submit" value="Submit">

</form>
The <select> 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

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</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

<textarea name="message" rows


="10" cols="30">
The cat was playing in the garden.
</textarea>
The <button> Element

The <button> element defines a clickable


button

Example

<button type="button" onclick="alert('Hello


World!')">Click Me!</button>
CONT..
This is how the HTML code above will be
displayed in a browser:
Input Type Password

<input type="password"> defines a password


field.
Example
<form>

<label for="username">Username:</label><br>

<input type="text" id="username" name="username">


<br>

<label for="pwd">Password:</label><br>

<input type="password" id="pwd" name="pwd">

</form>
CONT..

This is how the HTML code above will


be displayed in a browser.
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.
The form-handler is specified in the
form's action attribute.
Example

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><


br>

<input type="submit" value="Submit">

</form>
CONT..

This is how the HTML code above will be


displayed in a browser.
Input Type Reset

<input type="reset"> defines


a reset button that will reset all
form values to their default
values:
Example

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John">


<br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><


br><br>

<input type="submit" value="Submit">

<input type="reset">
CONT..

This is how the HTML code above will be


displayed in a browser:
Input Type Radio

<input type="radio"> defines


a radio button.
Radio buttons let a user select
ONLY ONE of a limited number of
choices.
Example

<form>

<input type="radio" id="male" name="gender" value ="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</form>
CONT..

This is how the HTML code above will be


displayed in a browser:

You might also like