HTML Forms:
Form is a part of web page.
It is used to collect user input through elements like text fields,
check box and radio button, select option, text area, submit buttons
and etc.
Form works like a container which consists of controls known as
form elements.
The HTML <form> tag is used to create an HTML form.
GET: Sends form data through the URL.
POST: Sends form data through the HTTP request body.
Attribute Description
action Specifies the encoding of the submitted data.
enctype Used to give a name to the control.
method Specify the method to be used to upload data.
name Used to identify and retrieve values from each form on the web page.
target Indicates the target of the address in the action attribute.
Syntax:
<form action="Script URL" method="GET/POST">
form elements land layout tags
</form>
Form Attributes
1. Creating text box
The <input> tag is used to create form elements.
It does not have end tag.
Attributes of <input> tag
Attribute Description
Type Specifies the type of input control.
Name Used to give a name to the control.
Id Used to identify the input field uniquely.
Size Used to specify the width of the text-input control in terms of characters
Value It is a default text or number that is displayed in the text field.
Maxlength Used to specify the maximum number of characters a user can enter into a input
field.
Example: Text Input Control
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control Example</title>
</head>
<body>
<form >
Name: <input type="text" name="name" />
<br>
Mobile No: <input type="text" name="mob_no" />
</form>
</body>
</html>
Output:
2. Creating password
A password field is nothing but the text box in which the characters
typed by the user are displayed as bullet or asterisks.
Example: Password Box
<!DOCTYPE html>
<html>
<head>
<title>Password Field Example</title>
</head>
<body>
<form >
Name: <input type="text" name="name" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Output:
3. Creating Submit Button
Submit button is used to send the form's data to the specified URL.
Example: Submit Button
<!DOCTYPE html>
<html>
<head>
<title>Submit Button Example</title>
</head>
<body>
<form >
Name: <input type="text" name="name" />
<br>
Mobile No: <input type="text" name="mob_no" />
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
4. Creating Radio Button
Radio button is used to select a single option from the list of options.
Example: Radio Button
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Example</title>
</head>
<body>
<form >
<input type="radio" name="gender" value="male"> Male
</br>
<input type="radio" name="gender" value="female"> Female
</form>
</body>
</html>
Output:
5. Creating Check Box
Check box is used to select more than one option from the list of options.
Example: Check Box
<!DOCTYPE html>
<html>
<head>
<title>Check Box Example</title>
</head>
<body>
<form >
<input type="checkbox" name="cricket" value="on"> Cricket
</br>
<input type="checkbox" name="hockey" value="on"> Hockey
</form>
</body>
</html>
Output:
6. Creating Multiple-Line Text Input
The <textarea> tag is used to create multi-line text box.
This is used to enter large amount of data.
Example: Multiple-Line Text Input
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Text Input Example</title>
</head>
<body>
<form>
<textarea rows="4" cols="30" name="address">
Text Area.....
</textarea>
</form>
</body>
</html>
Output:
ASSIGNMENT 5
Working with HTML Forms and CSS
1. Introduction to HTML Forms
An HTML Form is a section of a web document that allows users to
enter data and submit it to a server. Forms are the backbone of
interactive websites such as login pages, registration forms, surveys,
feedback forms, and e-commerce checkout pages.
Why HTML Forms are Important
Collect user information
Enable communication between user and server
Used in authentication, surveys, orders, feedback, etc.
Essential for dynamic web applications
Basic Structure of a Form
<form action="[Link]" method="post">
form controls
</form>
action: Specifies where the data is sent
method: GET or POST
2. HTML Form Elements
2.1 <form> Element
Acts as a container for all input controls.
Without <form>, data cannot be submitted.
2.2 <label> Element
Describes an input field.
Improves accessibility.
<label for="name">Name:</label>
<input type="text" id="name">
2.3 <input> Element
Most versatile form element.
Type Description
text Single-line text
password Hides characters
email Valid email format
number Numeric values
radio Select one option
checkbox Select multiple
date Calendar picker
submit Submit button
reset Clear form
file Upload file
2.4 <textarea>
Used for long text input such as address or feedback.
<textarea rows="4" cols="30"></textarea>
2.5 <select> and <option>
Creates a dropdown list.
<select>
<option>FY</option>
<option>SY</option>
</select>
2.6 <fieldset> and <legend>
Used to group related fields.
<fieldset>
<legend>Personal Info</legend>
</fieldset>
3. HTML Form Attributes (Important for Exams)
Attribute Purpose
required Mandatory field
placeholder Hint text
name Used in backend
Attribute Purpose
value Default value
checked Default checked
readonly Non-editable
4. CSS – Cascading Style Sheets (In Depth)
CSS controls presentation, layout, colors, fonts, spacing, and overall
look of a webpage.
Advantages of CSS
Separates content from design
Reusable code
Consistent layout
Faster loading
Easy maintenance
5. Types of CSS
5.1 Inline CSS
Applied directly to a single element
Not reusable
Least preferred
Inline CSS is defined within the HTML element using the style
attribute.
<p style="color:red; font-size:20px;">Hello</p>
5.2 Internal CSS
Written inside <style> tag
Applies to a single page
Better than inline CSS
Internal CSS is defined inside the <style> tag within the <head>
section of an HTML document.
<style>
p{
color: blue;
}
</style>
5.3 External CSS
Written in .css file
Best practice
Used for multiple pages
External CSS is written in a separate file with .css extension.
<link rel="stylesheet" href="[Link]">
6. CSS Selectors
Select Exampl
Use
or e
Elemen
p All paragraphs
t
Class .box Reusable styles
ID #main Unique element
Multiple
Group h1, p
elements
SET – A
FORM 1 – Personal Details Form (Simple HTML)
<!DOCTYPE html>
<html>
<head>
<title>Personal Details</title>
</head>
<body>
<form>
<fieldset>
<legend><b>Personal Details</b></legend>
Salutation:
<select>
<option>--None--</option>
<option>Mr.</option>
<option>Ms.</option>
</select>
<br><br>
First Name:
<input type="text"><br><br>
Last Name:
<input type="text"><br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<br><br>
Email:
<input type="email"><br><br>
Date of Birth:
<input type="date"><br><br>
Address:<br>
<textarea rows="4" cols="30"></textarea>
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
FORM 2 – Registration Form (Internal CSS)
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
body {
font-family: Arial;
background: #eee;
}
.form-box {
width: 400px;
margin: 50px auto;
padding: 20px;
background: linear-gradient(to right, #7b5cff, #c77dff);
color: white;
border-radius: 8px;
}
input {
width: 100%;
padding: 8px;
margin: 6px 0;
border: none;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="form-box">
<h2>Registration</h2>
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<input type="text" placeholder="Phone Number">
<input type="password" placeholder="Password">
<input type="password" placeholder="Confirm Password">
Gender:<br>
<input type="radio" name="g"> Male
<input type="radio" name="g"> Female
<input type="radio" name="g"> Prefer not to say
<br><br>
<button>Register</button>
</div>
</body>
</html>
FORM 3 – Department of Computer Studies (External CSS)
HTML ([Link])
<!DOCTYPE html>
<html>
<head>
<title>Department Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Department of Computer Studies</h2>
<p>Resize the screen to see the form layout change!</p>
<form>
<label>First Name</label>
<input type="text" placeholder="Your first name">
<label>Last Name</label>
<input type="text" placeholder="Your last name">
<label>Email</label>
<input type="email" placeholder="Your email address">
<button>Submit</button>
</form>
</div>
</body>
</html>
CSS ([Link])
body {
font-family: Arial;
background: #f5f5f5;
}
.container {
width: 400px;
margin: 50px auto;
background: white;
padding: 20px;
border: 2px solid green;
border-radius: 6px;
}
h2 {
color: green;
text-align: center;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
background: green;
color: white;
border: none;
}
FORM 4 – Student Form (External CSS)
HTML ([Link])
<!DOCTYPE html>
<html>
<head>
<title>Student Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="student-form">
<h2>Student Form</h2>
<label>First Name:</label>
<input type="text">
<label>Last Name:</label>
<input type="text">
<label>Email ID:</label>
<input type="email">
<label>Course:</label>
<input type="text">
<button>Submit</button>
</div>
</body>
</html>
CSS ([Link])
body {
background: #f2f2f2;
font-family: Arial;
}
.student-form {
width: 300px;
margin: 50px auto;
background: #ffe5c2;
padding: 20px;
border-radius: 5px;
}
h2 {
color: brown;
}
input {
width: 100%;
padding: 6px;
margin-bottom: 10px;
}
button {
padding: 6px 12px;
}
SET B – 1️⃣ Survey Form (Submit & Reset)
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<style>
body{
font-family: Arial;
background:#eef2f3;
}
form{
width:400px;
margin:50px auto;
padding:20px;
background:white;
border-radius:8px;
}
input, select{
width:100%;
padding:8px;
margin:6px 0;
}
button{
padding:8px 15px;
margin-top:10px;
}
</style>
</head>
<body>
<form>
<h2>Survey Form</h2>
Name:
<input type="text" required>
Age:
<input type="number">
Gender:
<select>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
How satisfied are you?
<select>
<option>Very Satisfied</option>
<option>Satisfied</option>
<option>Not Satisfied</option>
</select>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
SET B – 2️⃣ Feedback Form (Department Feedback)
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
<style>
body{
background:#f4f7f8;
font-family: Arial;
}
.form-box{
width:420px;
margin:50px auto;
background:#fff;
padding:20px;
border-radius:8px;
}
textarea, input, select{
width:100%;
padding:8px;
margin:6px 0;
}
button{
padding:8px 15px;
}
</style>
</head>
<body>
<div class="form-box">
<h2>Department Feedback Form</h2>
<form>
Student Name:
<input type="text">
Department:
<input type="text" value="Computer Studies" readonly>
Faculty Feedback:
<select>
<option>Excellent</option>
<option>Good</option>
<option>Average</option>
<option>Poor</option>
</select>
Comments:
<textarea rows="4"></textarea>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
</body>
</html>
SET B – 3️⃣ Shopping Website Homepage (Attractive UI)
<!DOCTYPE html>
<html>
<head>
<title>Shopping Home</title>
<style>
body{
font-family: Arial;
background:#f2f2f2;
}
header{
background:#333;
color:white;
padding:15px;
text-align:center;
}
.products{
display:flex;
justify-content:center;
gap:20px;
margin:30px;
}
.product{
background:white;
padding:15px;
width:200px;
border-radius:8px;
text-align:center;
}
.product img{
width:100%;
height:150px;
}
button{
background:#28a745;
color:white;
border:none;
padding:8px;
margin-top:10px;
}
</style>
</head>
<body>
<header>
<h1>Online Shopping Store</h1>
<p>Best Products at Best Prices</p>
</header>
<div class="products">
<div class="product">
<img src="[Link]
<h3>Smart Phone</h3>
<p>Price: ₹15,000</p>
<button>Buy Now</button>
</div>
<div class="product">
<img src="[Link]
<h3>Headphones</h3>
<p>Price: ₹2,000</p>
<button>Buy Now</button>
</div>
<div class="product">
<img src="[Link]
<h3>Laptop</h3>
<p>Price: ₹45,000</p>
<button>Buy Now</button>
</div>
</div>
</body>
</html>