HTML <form> Tag
Definition
The <form> tag in HTML is used to create an interactive form that collects user input and sends
the collected data to a server for processing. A form acts as a container for different form
controls such as text boxes, radio buttons, checkboxes, buttons, and drop-down lists.
General Syntax
<form action="url" method="get/post">
form controls
</form>
Attributes of <form> Tag (With Value Types)
1. action
Purpose:
Specifies the URL or file name of the server-side script that will process the submitted form
data.
Value Type:
● URL
● File name (e.g., .php, .jsp, .asp)
Example:
<form action="[Link]">
2. method
Purpose:
Defines the HTTP method used to send form data to the server.
Value Type:
● get
● post
- By Kumari Sneha
Explanation:
● get → Data is visible in URL (less secure)
● post → Data is hidden in request body (more secure)
Example:
<form method="post">
3. name
Purpose:
Assigns a name to the form, mainly used to identify the form in JavaScript.
Value Type:
● Text (string)
Example:
<form name="loginForm">
4. id
Purpose:
Provides a unique identifier to the form for CSS styling and scripting.
Value Type:
● Unique text value
Example:
<form id="regForm">
5. target
Purpose:
Specifies where the response from the server should be displayed.
Value Type:
_self: (Default) Loads the response into the same browsing context (the current window or tab)
that contains the form .
- By Kumari Sneha
_blank: Loads the response into a new, unnamed browsing context (a new window or tab) . This
is useful for linking to external resources or preventing the user from leaving the current
application flow.
_parent: Loads the response into the parent browsing context of the current one. If there is no
parent, it behaves the same as _self.
_top: Loads the response into the top-level browsing context (the topmost window or tab). If
there is no ancestor, it behaves the same as _self.
Example:
<form target="_blank">
Form-Related Tags and Their Attributes
1. <input> Tag
Definition
Used to create various types of input fields.
type Attribute and Values:
Value Purpose Syntax Example
text Single-line <input type="text"> <input type="text" name="username">
text
password Hidden <input <input type="password" name="userpass">
text type="password">
- By Kumari Sneha
email Email <input type="email"> <input type="email" name="useremail">
input
number Numeric <input <input type="number" name="quantity"
input type="number"> min="1" max="5">
radio Radio <input type="radio"> <input type="radio" name="gender"
button value="male">
checkbox Checkbox <input <input type="checkbox" name="subscribe"
type="checkbox"> value="yes">
file File upload <input type="file"> <input type="file" name="uploadfile">
submit Submit <input <input type="submit" value="Submit">
button type="submit">
reset Reset <input type="reset"> <input type="reset" value="Reset">
button
button Custom <input type="button"> <input type="button"
button onclick="alert('Hello')" value="Click Me">
- By Kumari Sneha
date Date <input type="date"> <input type="date" name="startdate">
picker
color Color <input type="color"> <input type="color" name="favcolor">
selector
hidden Hidden <input <input type="hidden" name="session_id"
data type="hidden"> value="12345">
Common Attributes of <input> (With Value Types)
name
● Purpose: Identifies the input field
● Value Type: Text
<input type="text" name="username">
Attribute Purpose Value Type
value Default or submitted value Text / Number
placeholder Hint text inside input box Text
required Makes input mandatory Boolean
readonly Makes field non-editable Boolean
- By Kumari Sneha
disabled Disables input field Boolean
maxlength / minlength Sets length limits Number
checked Pre-selects radio/checkbox Boolean
size Width of input field Number
2. <textarea> Tag
Definition
Used to accept multi-line text input.
Attributes of <textarea>
Attribute Purpose Value Type
rows Number of visible lines Number
cols Width of textarea Number
name Field name Text
placeholder Hint text Text
required Mandatory field Boolean
readonly Non-editable Boolean
disabled Disabled Boolean
3. <select> Tag
Definition
Used to create a drop-down list.
Attributes of <select>
- By Kumari Sneha
Attribute Purpose Value Type
name Name of dropdown Text
multiple Allows multiple selection Boolean
size Visible options Number
disabled Disables dropdown Boolean
required Mandatory selection Boolean
4. <option> Tag
Definition
Defines options inside a dropdown list.
Attributes of <option>
Attribute Purpose Value Type
value Submitted value Text
selected Default selected option Boolean
disabled Disables option Boolean
5. <label> Tag
Definition
Associates text labels with form elements.
Attributes of <label>
Attribute Purpose Value Type
for Links label to input id ID value
- By Kumari Sneha
6. <fieldset> and <legend>
Purpose
Groups related form controls.
Attributes of <fieldset>
● disabled (Boolean)
● name (Text)
<legend> has no major attributes.
HTML <table> Tag – Detailed Explanation
Definition
The <table> tag is used to display data in rows and columns.
Attributes of <table> Tag (With Value Types)
border
● Purpose: Sets table border thickness
● Value Type: Number
cellpadding
● Purpose: Space between content and cell border
● Value Type: Number
cellspacing
● Purpose: Space between table cells
● Value Type: Number
width
- By Kumari Sneha
● Purpose: Table width
● Value Type: Pixels / Percentage
height
● Purpose: Table height
● Value Type: Pixels
align
● Purpose: Aligns table
● Value Type: left | center | right
bgcolor
● Purpose: Background color
● Value Type: Color name / Hex code
rules
● Purpose: Internal borders
● Value Type: all | rows | cols | none
frame
● Purpose: Outer border
● Value Type: box | above | below | lhs | rhs | void
Related Table Tags and Attributes
1. <tr> – Table Row
Attribute Purpose Value Type
align Horizontal alignment left / center / right
valign Vertical alignment top / middle / bottom
bgcolor Background color Color value
- By Kumari Sneha
2. <th> – Table Header Cell
Attribute Purpose Value Type
colspan Merge columns Number
rowspan Merge rows Number
align Text alignment left / center / right
valign Vertical alignment top / middle / bottom
scope Header scope row / col
bgcolor Background color Color value
3. <td> – Table Data Cell
Attribute Purpose Value Type
colspan Column merge Number
rowspan Row merge Number
align Text alignment left / center / right
valign Vertical alignment top / middle / bottom
width Cell width Pixels / %
height Cell height Pixels
bgcolor Background color Color value
4. <caption>
Attribute Purpose Value Type
align Caption position top / bottom
- By Kumari Sneha
5. <thead>, <tbody>, <tfoot>
Purpose
Groups table content for structure and styling.
Common Attributes
● align
● valign
Value Type
● Alignment values
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Form and Table Example</title>
</head>
<body>
<h2 align="center">Student Registration Form</h2>
<form action="[Link]" method="post" name="regForm" id="registrationForm"
target="_self">
<fieldset>
<legend>Personal Information</legend>
<label for="fullname">Full Name:</label>
- By Kumari Sneha
<input type="text" id="fullname" name="fullname" placeholder="Enter your name"
required maxlength="50">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email">
<br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="60">
<br><br>
Gender:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<br><br>
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
<br><br>
<input type="hidden" name="session_id" value="ABC123">
</fieldset>
<br>
<fieldset>
<legend>Additional Details</legend>
<label for="startdate">Start Date:</label>
- By Kumari Sneha
<input type="date" id="startdate" name="startdate">
<br><br>
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor">
<br><br>
<label for="upload">Upload File:</label>
<input type="file" id="upload" name="uploadfile">
<br><br>
<label for="address">Address:</label>
<br>
<textarea id="address" name="address" rows="4" cols="40" placeholder="Enter your
address"></textarea>
<br><br>
<label for="course">Select Course:</label>
<select id="course" name="course" required>
<option value="">--Select--</option>
<option value="bca" selected>BCA</option>
<option value="bba">BBA</option>
<option value="mba">MBA</option>
<option value="mca" disabled>MCA</option>
</select>
<br><br>
</fieldset>
- By Kumari Sneha
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</form>
<hr>
<h2 align="center">Student Marks Table</h2>
<table border="2" cellpadding="10" cellspacing="5" width="80%" align="center"
bgcolor="lightgray" rules="all" frame="box">
<caption align="top"><b>Semester Results</b></caption>
<thead bgcolor="white">
<tr>
<th scope="col">Roll No</th>
<th scope="col">Name</th>
<th scope="col">Subject</th>
<th scope="col">Marks</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>101</td>
<td>Sneha</td>
<td>HTML</td>
<td>85</td>
- By Kumari Sneha
</tr>
<tr>
<td>102</td>
<td>Rahul</td>
<td>CSS</td>
<td>78</td>
</tr>
<tr>
<td>103</td>
<td>Anita</td>
<td>JavaScript</td>
<td>92</td>
</tr>
</tbody>
<tfoot bgcolor="white">
<tr>
<td colspan="3" align="right"><b>Total Students</b></td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
- By Kumari Sneha