HTML Tables and

Forms

Chapter 3
Objectives

1 Introducing Tables

2 Styling Tables

3 Introducing Forms

4 Form Control
Elements
Section 1 of 6

Introducing Tables
 HTML Tables
▪ A grid of cells

▪ A table in HTML is created using the <table> element

▪ Tables can be used to display:
• Many types of content
• Calendars, financial data, lists, etc…
• Any type of data
• Images
• Text
• Links
• Other tables
HTML Tables
▪ Example usages
Tables
The <TABLE></TABLE> element has four sub-elements:

1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.

The table row elements usually contain table header elements or table data
elements.
 Tables Basics
▪ Rows and cells

• an HTML <table> contains any number of rows (<tr>)

• each row contains any number of table data cells (<td>)
• Content goes inside of <td></td> tags

– <table>
<tr>
<td>The Death of Marat</td>
</tr>
content
– </table>
A basic Example
Tables Attributes
▪ BG Color: Some browsers support background colors in a
table.
▪ Width: you can specify the table width as an absolute number
of pixels or a percentage of the document width. You can set
the width for the table cells as well.
▪ Border: You can choose a numerical value for the border
width, which specifies the border in pixels.
▪ Cell Spacing: Cell Spacing represents the space between cells
and is specified in pixels.
Table Attributes
▪ Cellpadding: Cell Padding is the space between the
cell border and the cell contents and is specified in
pixels.
▪ Align: tables can have left, right, or center
alignment.
▪ Background: Background Image, will be titled in
IE3.0 and above.
▪ Border Color, Border Color Dark.

10
Table Border & Header Attribute
❑ To display a table with borders, you will use the border attribute.

❑ Headings in a table are defined with the <th> tag.

<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td> Column 1 Header Column 2 Header
<td> Row1, Col2 </td>
</tr> Row1, Col1 Row1, Col2
<tr>
<td> Row2, Col1 </td> Row2, Col1 Row2, Col2
<td> Row2, Col2 </td>
</tr>
</table>

11
 Table Caption
▪ A table caption allows you to specify a line of text that will
appear centered above or bellow the table.

<TABLE BORDER=1 CELLPADDING=2>

<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

▪ The Caption element has one attribute ALIGN that can be

either TOP (Above the table) or BOTTOM (below the table).

12
Source Output
<table border="1">
<caption>This is a
caption</caption>
<thead> <tr><td>head
1</td> <td>head 2</td> </tr>
</thead>
<tbody>
<tr><td>Cell 1</td> <td>Cell
2</td> </tr>
</tbody>
<tfoot> <tr><td>Sum1</td>
<td>Sum2</td> </tr>
</tfoot>
</table>
Table Data and Table Header Attributes
▪ Colspan: Specifies how many cell columns of the table this cell should
span.

▪ Rowspan: Specifies how many cell rows of the table this cell should
span.

▪ Align: cell data can have left, right, or center alignment.

▪ Valign: cell data can have top, middle, or bottom alignment.

▪ Width: you can specify the width as an absolute number of pixels or a

percentage of the document width.

▪ Height: You can specify the height as an absolute number of pixels or

a percentage of the document height.
 Cell Padding and Spacing :
Cell padding tag is used to create space between the text inside your table and
the border surrounding the text.

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>

<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C

D E F
 Cell Padding and Spacing :
Cell spacing tag is used to create space between different cells within your table.

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>

<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C

D E F
 Rowspan & Colspan attribute
colspan attribute use to merge two or more columns into a single column.
rowspan use to merge two or more rows.
ROWSPAN COLSPAN
<TABLE BORDER> <TABLE BORDER>
<TR> <TR>
<TD>Item 1</TD> <TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD> <TD COLSPAN=2>Item 2</TD>
<TD>Item 3</TD> </TR>
</TR> <TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 5</TD>
</TR> </TR>
</TABLE> </TABLE>

Item 1 Item 3 Item 1 Item 2

Item 2
Item 4 Item 5 Item 3 Item 4 Item 5
Rowspan & Colspan attribute
Example
Tables Backgrounds :
You can set table background using one of the following two ways:

– bgcolor attribute - You can set background color for whole

table or just for one cell.

– background attribute - You can set background image for

whole table or just for one cell.

– You can also set border color also using bordercolor attribute.
<HTML> Tables Backgrounds :
<HEAD>
<TITLE>HTML Table Background </TITLE>
/<HEAD>
<BODY>
< table border=">"wolley"=rolocgb "neerg"=rolocredrob "1
< tr>
< th>column >ht/<1
< th>column >ht/<2
< th>column >ht/<3
/< tr>
< tr><td rowspan="1 woR>"2cell 1 wor>dt<>dt/<1cell 1 wor>dt<>dt/<2cell
>rt/<>dt/<3
< tr><td>Row 2 cell 2 wor>dt<>dt/<2cell >rt/<>dt/<3
< tr><td>colspan="3 wor>"3cell >rt/<>dt/<1
/< table>
/< BODY>
/<HTML>
Tables: Background Image
Table Size :
Table Width & Height:

▪ You can specify table width or height in terms of pixels or in terms of percentage of
available screen area. It can be defined as a fixed width or a relative width.

▪ A fixed table width is one where the width of the table is specified in pixels.

▪ For example, this code, <table width="550" height="150">, will produce a table that
is 550 pixels wide.

▪ A relative table width is specified as a percentage of the width of the visitor's

viewing window.

▪ Hence this code, <table width="80%">, will produce a table that occupies 80
percent of the screen.
Source Output
colgroup that has three columns of
different widths:
<tbody>
<colgroup span="3“
style=“color:#FF0000”<
<col width="20"></col>
<col width="50"></col>
<col width="80"></col>
</colgroup>
<tr> <td>1</td> <td>2</td>
<td>3</td> <td>4</td>
</tr>
</tbody>
HTML Tables
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td (row,col)span> Defines a table cell (table data)
<caption> Defines a table caption
<colgroup> Defines groups of table columns
Defines the attribute values for
<col>
one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
Attribute Value Description
align left Aligns the table. Deprecated.
center Use styles instead.
right
bgcolor rgb(x,x,x) Specifies the background color of
#xxxxxx the table.
colorname
border pixels Specifies the border width.
Tip: Set border="0" to display tables with
no borders!
cellpadding pixels Specifies the space between the
% cell walls and contents
cellspacing pixels Specifies the space between cells
%
width % Specifies the width of the table
pixels
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

26
 Special Things to Note
▪ TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will mess up
the formatting of the table if you omit the end tags. In particular, you
should always use end tags if you have a TABLE within a TABLE -- in this
situation, the table parser gets hopelessly confused if you don't close your
TH, TD and TR elements

▪ A default TABLE has no borders

By default, tables are drawn without border lines. You need the BORDER
attribute to draw the lines.

▪ By default, a table is flush with the left margin

TABLEs are plopped over on the left margin. If you want centered tables,
You can either: place the table inside a DIV element with attribute
ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN attribute. Allowed
values are "left", "right", or "center", for example: <TABLE ALIGN="left">. The values "left"
and "right" float the table to the left or right of the page, with text flow allowed around the
table. This is entirely equivalent to IMG alignment

27
What will be the output?
>TABLE BORDER width=“750”<
<TR> <TD colspan=“4” align=“center”<Page Banner>/TD<>/TR<

<TR> <TD rowspan=“2” width=“25%”<Nav Links</TD><TD

colspan=“2”<Feature Article</TD> <TD rowspan=“2” width=“25%”<Linked
Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD> <TD width=“25%”><News

Column 2 </TD></TR>
</TABLE>

28
The Output

29
▪ Section 3 of 6

Introducing Forms
 HTML Forms
▪ Richer way to interact with server

▪ Forms provide the user with an alternative way to interact

with a web server.

• Forms provide rich mechanisms like:

• Text input
• Password input
• Options Lists
• Radio and check boxes
Form Structure
How forms interact with servers
Forms
▪ To insert a form we use the <FORM></FORM> tags. The rest of
the form elements must be inserted in between the form tags.

Example:
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>

34
<FORM> element attributes
▪ ACTION: is the URL of the CGI (Common Gateway Interface) program
that is going to accept the data from the form, process it, and send a
response back to the browser.

▪ METHOD: GET (default) or POST specifies which HTTP method will be

used to send the form’s contents to the web server. The CGI
application should be written to accept the data from either method.

▪ NAME: is a form name used by VBScript or JavaScripts.

▪ TARGET: is the target frame where the response page will show up.

35
 Form Elements
▪ Form elements have properties:
▪ Text boxes,
▪ Password boxes,
▪ Checkboxes,
▪ Option(Radio) buttons,
▪ Submit, Reset, File, Hidden and Image.
▪ The properties are specified in the TYPE Attribute of the HTML
element <INPUT></INPUT>.

36
Sami Ali

Al al-Bayt University

38
 Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable name to be
passed to the CGI application.
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters accepted.

39
 Text Box
▪ Text boxes: Used to provide input fields for text, phone numbers, dates, etc.
<input type=“text” name=“firstName”>
Textboxes use the following attributes:
▪ TYPE: text.
▪ SIZE: determines the size of the textbox in characters.
Default=20 characters.
▪ MAXLENGHT : determines the maximum number of characters that the field
will accept.
▪ NAME: is the name of the variable to be sent to the CGI application.

▪ VALUE: will display its contents as the default value.

40
Text Box Example
<form action="http://www.example.com/login.php">
<p>Username:<input type="text" name="username" size="15“ maxlength="30" /></p>
</form>
Example on Text Box
<TITLE>Form_Text_Type</TITLE>

</HEAD> <BODY>

<h1> <font color=blue>Please enter the following bioData</font></h1>

<FORM name="fome1" Method= " get " Action= " URL " >

First Name: <INPUT TYPE="TEXT" NAME="FName“ SIZE="15" MAXLENGTH="25"><BR>

Last Name: <INPUT TYPE="TEXT" NAME="LName“ SIZE="15" MAXLENGTH="25"><BR>

Nationality: <INPUT TYPE="TEXT" NAME="Country“ SIZE="25" MAXLENGTH="25"><BR>

The Phone Number: <INPUT TYPE="TEXT" NAME="Phone“ SIZE="15"

MAXLENGTH="12"><BR>

</FORM> </BODY> </HTML>

42
Output

43
Password Box
▪ Password: Used to allow entry of passwords.
<input type=“password” name=“password”>

Text typed in a password box is starred out in

the browser display.
Password boxes use the following attributes:
▪ TYPE: password.

▪ SIZE: determines the size of the textbox in characters.

▪ MAXLENGHT: determines the maximum size of the password in characters.

▪ NAME: is the name of the variable to be sent to the CGI application.

▪ VALUE: is usually blank.

44
Example on Password Box
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15"
maxlength="30" />
</p>
</form>
Example on Password Box
<HTML>
<HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"SIZE="15“ MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD" NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM>
</BODY>
</HTML>

46
Output

47
TEXT AREA
▪ <TEXTAREA></TEXTAREA>: is an element that allows for free
form text entry.
<input type=“text” name=“firstName”>

Text area has the following attributes:

NAME: is the name of the variable to be sent to the CGI application.
ROWS: the number of rows to the textbox.
COLS: the number of columns to the textbox.

48
TEXT AREA Example
<BODY bgcolor=lightblue>
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
From observing the apathy of those about me during flag raising I
concluded that patriotism if not actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih
Out put
</TEXTAREA>:
From observing the apathy of those
</form>
about me during flag raising I
</BODY> concluded that patriotism if not
actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih

49
Check Box
▪ Check Box: Check boxes allow the users to select more than one option.
<input type=“checkbox” name=“sauce” value=“yes”>
Browser will display

Checkboxes have the following attributes:

▪ TYPE: checkbox.

▪ CHECKED: is blank or CHECKED as the initial status.

▪ NAME: is the name of the variable to be sent to the CGI application.

▪ VALUE: is usually set to a value.

50
Checkboxes
Example:
<input type="checkbox" name="sauce" value="yes" checked> Sauce<br>

<input type="checkbox" name="pepperoni" value="yes" checked> Pepperoni<br>

<input type="checkbox" name="anchovies" value="yes"> Anchovies<br>

However, if you click on the word, you cannot select the checkbox
<HTML>
Check Box Example
<HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language" CHECKED><BR> English:<INPUT
TYPE="CheckBox" Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>
</BODY>
</HTML>
52
Output

53
Radio Button
▪ Radio Button: Radio buttons allow the users to select only one option.
<input type=“radio” name=“gender” value=“male”>

Browser will display

Radio buttons have the following attributes:

▪ TYPE: radio.
▪ CHECKED: is blank or CHECKED as the initial status. Only one radio
button can be checked
▪ NAME: is the name of the variable to be sent to the CGI application.
▪ VALUE: usually has a set value.

54
Radio Button Example
Often, we want to display radio buttons or checkbox groups together We can
do this with the field set element

<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value=“male" id=“male">
<input type="radio" name="gender" value="female" id=“female">
</fieldset><br>
<HTML> Radio Button Example
<HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR> English:<INPUT TYPE="
RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR>
</FORM>
</BODY>
</HTML> 56
57
Radio Button Example
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY>
</HTML>

58
Output

59
 Push Button ‫اضغط الزر‬
▪ Push Button: This element would be used with JavaScript to cause
an action to take place.
‫سيتم استخدام هذا العنصر مع جافا سكريبت ليؤدي إلى اتخاذ إجراء‬
<INPUT TYPE=“BUTTON”>
Browser will display

Push Button has the following attributes:

▪ TYPE: button.

▪ NAME: is the name of the button to be used in scripting.

▪ VALUE: determines the text label on the button.

60
Push Button Example
<DIV align=center><BR><BR>
<FORM>
<FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button" VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" > <BR><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>

61
62
Submit and Reset ‫إرسال وإعادة تعيين‬

Submit – <input type=“submit”>

Reset - <input type=“reset”>

‫يسمح للمستخدم بإرسال الحقل للمعالجة‬
The submit button allows the user to submit the field for processing. The
location is determined by the attribute action in the <form> tag.

The reset button allows the user to clear out any user input and reset the field
to the default values assigned for each field.
‫يسمح للمستخدم بمسح أي إدخال للمستخدم وإعادة تعيين الحقل إلى القيم االفتراضية المعينة لكل حقل‬

Attribute:

The attribute value can be utilized to change the text that appears on the
button
Submit and Reset
Example:
<input type=“submit”><input type=“reset”>

<input type=“submit” value=“Submit Form”>

<input type=“reset” value=“Reset Form”>
Submit Button Example
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25 name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

65
66
Reset Button
▪ Reset: It is a good idea to include one of these for each form
where users are entering data. It allows the surfer to clear all
the input in the form.

▪ <INPUT TYPE=“RESET”>

Browser will display

Reset buttons have the following attributes:

▪ TYPE: reset.
▪ VALUE: determines the text label on the button, usually Reset.

67
Reset Button Example
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25 name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>

68
69
Image Submit Button
▪ Image Submit Button: Allows you to substitute an image for the
standard submit button.

<INPUT TYPE=“IMAGE” SRC=“jordan.gif”>

Image submit button has the following attributes:

▪ TYPE: Image.
▪ NAME: is the name of the button to be used in scripting.
▪ SRC: URL of the Image file.

70
<form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE" SRC=“Saudi arabia.gif">
</form>

71
File Input Box
▪ File Upload: You can use a file upload to allow surfers to upload files to
your web server.

<INPUT TYPE=“FILE”>
Browser will display

▪ File Upload has the following attributes:

TYPE: file.

SIZE: is the size of the text box in characters.

NAME: is the name of the variable to be sent to the CGI application.

MAXLENGHT: is the maximum size of the input in the textbox in characters.

72
File Input Box Example
<form action="http://www.example.com/upload.php"
method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
File Input Box Example
<BODY bgcolor=lightblue>

<form>

<H3><font color=forestgreen>

Please attach your file here to for uploading to My <font

color =red>SERVER...<BR>

<INPUT TYPE="File" name="myFile" size="30">

<INPUT TYPE="Submit" value="SubmitFile">

</form>

</BODY>

74
Select Box
▪ The two following examples are <SELECT></SELECT> elements,
where the attributes are set differently.

The Select elements attributes are:

NAME: is the name of the variable to be sent to the CGI application.

SIZE: this sets the number of visible choices.

MULTIPLE: the presence of this attribute signifies that the user can make multiple
selections. By default only one selection is allowed.

75
<BODY bgcolor=lightblue>
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
</BODY>
76
Drop Down List
▪ Drop Down List:
▪ Name: is the name of the variable to be sent to the CGI application.
▪ Size: 1.

<form
action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>

77
List Box
▪ List Box:

▪ Name: is the name of the variable to be sent to the CGI application.

▪ SIZE: is greater than one.

78
Option
▪ Option
The list items are added to the <SELECT> element by inserting
<OPTION></OPTION> elements.

The Option Element’s attributes are:

▪ SELECTED: When this attribute is present, the option is selected when
the document is initially loaded. It is an error for more than one
option to be selected.
▪ VALUE: Specifies the value the variable named in the select element.

79
Option Example
</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

80
81
Option Example
<HTML>
<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

82
83
 Grouping Form Elements
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
Date Input ‫تاريخ اإلدخال‬ type="date"

<form action=http://www.example.com/bookings/ method="post">

<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
Date and Time Controls
Date and Time Controls
HTML Controls
Type Description

date Creates a general date input control. The format for the date is "yyyy-mm-dd".

time Creates a time input control. The format for the time is "HH:MM:SS", for
hours:minutes:seconds.

datetime Creates a control in which the user can enter a date and time.

datetime-local Creates a control in which the user can enter a date and time without specifying a time zone.

month Creates a control in which the user can enter a month in a year. The format is "yyyy-mm".

week Creates a control in which the user can specify a week in a year. The format is "yyyy-W##".
 Email & URL Input type="email"

<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
90
 Form-Related HTML Elements
Type Description

<button> Defines a clickable button.

<datalist> An HTML5 element form defines lists to be used with other form elements.

<fieldset> Groups related elements in a form together.

<form> Defines the form container.

<input> Defines an input field. HTML5 defines over 20 different types of input.

<label> Defines a label for a form input element.

<legend> Defines the label for a fieldset group.

<option> Defines an option in a multi-item list.

<optgroup> Defines a group of related options in a multi-item list.

<select> Defines a multi-item list.

<textarea> Defines a multiline text entry box.

 Text Input Controls
Type Description
text Creates a single line text entry box. <input type="text" name="title" />

textarea Creates a multiline text entry box. <textarea rows="3" ... />

password Creates a single line text entry box for a password <input type="password" ... />

search Creates a single-line text entry box suitable for a search string. This is an HTML5 element.

<input type="search" … />

email Creates a single-line text entry box suitable for entering an email address. This is an HTML5 element.

<input type="email" … />

tel Creates a single-line text entry box suitable for entering a telephone. This is an HTML5 element.

<input type="tel" … />

url Creates a single-line text entry box suitable for entering a URL. This is an HTML5 element.

<input type="url" … />

 Button Controls
Type Description
<input type="submit"> Creates a button that submits the form data to the server.

<input type="reset"> Creates a button that clears any of the user’s already
entered form data.

<input type="button"> Creates a custom button. This button may require

Javascript for it to actually perform any action.

<input type="image"> Creates a custom submit button that uses an image for its
display.

<button> Creates a custom button. The <button> element differs

from <input type="button"> in that you can completely
customize what appears in the button; using it, you can, for
instance, include both images and text, or skip server-side
processing entirely by using hyperlinks.
You can turn the button into a submit button by using the
type="submit" attribute.
Color
What you’ve learned

1 Introducing Tables
2 Styling Tables

3 Introducing Forms
4 Form Control
Elements
<form method=”post” action=”ex10.php”>
First Name: <input type=”text”
name=”fname”><br>
Last Name: <input type=”text” name=”lname”><p>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>

<table border=”10" cellspacing=”5"

cellpadding=”5" align=”center”>
<tr><th colspan=”3">Sales Growth</th></tr>
<tr><th></th><th>2019</th><th>2020</th></tr>
<tr><td>Jan</td><td>10%</td><td>12%</td></tr>
<tr><td>Feb</td><td>14%</td><td>17%</td></tr>
</table>