ABUDHABI INDIAN SCHOOL – BRANCH 1, AL WATHBA
COMPUTER SCIENCE -Grade-9
HTML FORMS and TABLES
__________________________________________________
The Form Element
Forms are the vital part of an HTML document which are used to accept information from the
user using a Graphical User Interface(GUI) environment . The form element is a container for all
the content of the form, it has following syntax:
<form>
..
Form elements
..
</form>
HTML INPUT TAG
ATTRIBUTE DESCRIPTION
Name a string of characters as internal name of the field
Value It defines what will appear as the default value in the field
Type It can take the value as “text” or “password” or “radio” or
“checkbox” or “submit”, “reset”
INPUT “TYPE” ATTRIBUTES
“TYPE” ATTRIBUTE DESCRIPTION OTHER RELATED ATTRIBUTES
TEXT Creates textbox field Name, size, maxlength, value,
align, placeholder, disabled
PASSWORD Creates a password field, characters Name, size, maxlength, value,
appear as coded symbols align, placeholder, disabled
RADIO Allows the user to select only one of Name, value, disabled, checked
the multiple options given. Appears
as a small circle
CHECKBOX Allows the user to select multiple Name, value, disabled, checked
options. Appears as a small square
box that can be ticked.
RESET This clears all the entries made on the Value
form
SUBMIT It submits the form to the ‘action’ Value
page specified in the form tag
DROP-DOWN SELECTION
<SELECT> tag- The <select> element defines a drop-down list:
Attributes DESCRIPTION
Name Gives the internal name of the field
Size Defines the number of items visible to the user
Multiple It allows for multiple selections
<OPTION> tag-
The <option> element defines an option that can be selected. By default, the first item
in the drop-down list is selected. To define a pre-selected option, add the selected attribute to
the option.
Example: <option value="Math" selected>Math</option>
Value It defines the value of the item that will be assigned to the element
Selected Used to select this element by default
THE <TEXTAREA> TAG
The <textarea> tag is used to create a multi-line text box that can accept lengthy text values. We can
specify the number of rows and columns we want in text area by using the rows and cols attribute s of
the <textarea> tag.
SYNTAX:
<textarea rows=”2” cols=”70”>
Example:
Address:<textarea rows=”4” cols=”80”></textarea><br><br>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form. The <legend> element defines a
caption for the <fieldset> element.
Example:
<html>
<body>
<h1> Student Information System</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personal Details</legend><br><br>
First name:<input type="text">
Last name:<input type="text"><br><br>
Email:<input type="email"><br><br>
Birthday:<input type="date"><br><br>
</fieldset>
<br><br>
<br><br>
<fieldset>
<legend>Academics</legend>
Periodic Assessment1(%):<input type="text">
Term1(%):<input type="text"> <br><br>
Periodic Assessment2(%):<input type="text">
Term2(%):<input type="text">
</fieldset>
<br><br>
<input type="Submit">
<input type="Reset">
</form>
</body>
</html>
OUTPUT:
PROGRAMS:
Q1.Write the HTML code to create a form as shown below.
<html>
<head>
<title> FEEDBACK FORM
</title>
</head>
<body>
<form>
<H1 >FEEDBACK FORM</H1> <BR>
USERNAME: <input type="TEXT" NAME="ENAME1" SIZE="30" VALUE="ENTER USER NAME ">
<BR>
<BR>
GENDER: <input type="Radio" NAME="GENDER">MALE
<input type="Radio" NAME="GENDER" VALUE="FEMALE"> FEMALE
<BR>
SELECT OUR BEST FOOD ITEMS :<BR>
<INPUT TYPE="CHECKBOX" NAME="FOOD" VALUE="CHOLE BHATURE" > CHOLE BHATURE<BR>
<INPUT TYPE="CHECKBOX" NAME="FOOD"VALUE="BURGER" >BURGER <BR>
<INPUT TYPE="CHECKBOX" NAME="FOOD"VALUE="RAWA DOSA">RAWA DOSA <BR>
<INPUT TYPE="CHECKBOX" NAME="FOOD"VALUE="PANEER TIKKA">PANEER TIKKA<BR>
<BR>
HOW'S OUR STAFF BEHAVIOUR:<SELECT NAME="LIST NAME">
<OPTION>EXCEPTIONALLY GOOD</OPTION>
<OPTION>VERY GOOD & POLITE</OPTION>
<OPTION>GOOD</OPTION>
<OPTION>COULD BE BETTER</OPTION>
</SELECT>
<BR>
<BR>
</FORM>
</BODY>
</HTML>
Q2.Write the HTML code to design a Student’s Data Form as shown below:
The following input elements should be included in the form:
• A textbox to enter student’s name.
• A checkbox to allow the student to subscribe to a newsletter.
• Radio buttons to select the gender. The button should be grouped with individual values
as Male,Female,Other
• A list box(select dropdown) to choose the country . The available options are USA,
Canada, UK and Australia.
<html>
<head>
<title>Student data form</title></head>
<body >
<hr>
<h1>Student Data Input Form</h1><br><br>
<form>
Name : <input type="text" size=20>
<br><br>
Subscribe for Newsletter: <input type="checkbox"><br><br>
Gender :<br>
Male<input type="radio" name="gender" value="Male">Female<input type="radio"
name="gender" value="Female">Other <input type="radio"name="gender"
value="Others"><br><br>
Country<br>
<select>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>
TABLES in HTML
HTML tables, consisting of rows and columns, are used to present structured data on web pages. They
are essential for organizing information in a clear and concise manner.
HTML Tables Tags
Tag Description
Defines the structure for organizing data in rows
<table>
and columns within a web page.
Represents a row within an HTML table containing
<tr>
individual cells.
Shows a table header cell that typically holds titles
<th>
or headings.
Represents a standard data cell, holding content or
<td>
data.
Colspan
Allows a single table cell to span the width of more than one cell or column.
Example:
<table>
<caption>Invoice</caption>
<tr>
<th>Item / Desc.</th>
<th>Qty.</th>
<th>@</th>
<th>Price</th>
</tr>
<tr>
<td>Paperclips (Box)</td>
<td>100</td>
<td>1.15</td>
<td>115.00</td>
</tr>
<tr>
<td>Paper (Case)</td>
<td>10</td>
<td>45.99</td>
<td>459.90</td>
</tr>
<tr>
<td>Wastepaper Baskets</td>
<td>2</td>
<td>17.99</td>
<td>35.98</td>
</tr>
<tr>
<th colspan="3">Subtotal</th>
<td>610.88</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td>7%</td>
<td>42.76</td>
</tr>
<tr>
<th colspan="3">Total</th>
<td>653.64</td>
</tr>
</table>
OUTPUT:
rowspan
Allows a single table cell to span the height of more than one cell or row.
Example:
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th><th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
OUTPUT:
PROGRAMS:
Q1. Create a table in html to display names of three countries along with their capital, currency and
tourist destination.( Add all the basic html tags before table tag)
<table border=1 >
<tr>
<th>Name</th>
<th>Capital</th>
<th>Currency</th>
<th> Tourist Destination</th>
</tr>
<tr>
<td>India</td>
<td>Delhi</td>
<td>Rupees</td>
<td>Taj Mahal</td>
</tr>
<tr>
<td>UAE</td>
<td>Abu Dhabi</td>
<td>Dirham</td>
<td>Sheikh Zayed Mosque</td>
</tr>
<tr>
<td>UK</td>
<td>London</td>
<td>Pound</td>
<td>Buckingham Palace</td>
</tr>
</table>
Q2. Create a html table to display the following output given below:
<table border=1>
<tr>
<th></th>
<th scope="col">Semester</th>
<th scope="col">Grade</th>
</tr>
<tr>
<td>1</td>
<td>Jan - April</td>
<td>Credit</td>
</tr>
<tr>
<td>2</td>
<td>May - August</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>September - December</td>
<td>Distinction</td>
</tr>
</table>
