Sulaimani Polyteachnic University

College Of Informatics

2022-2023
Lecture Four
 Outline Of Lecture …..............................Four
1. Table
• Elements
• Attributes
• Spanning
• Page layout
2. Form?
• Form tag and its attributes
• Text input
• Password input
• Textarea input
• Control button
• Ratio button and checkbox button
• Drop down menu or list
• HTML5 inputs
• Date and time controls
• Numerical inputs
• Color selector
• Fieldset and legend
1
Table in HTML 2

HTML tables were created for instances:

• when you need to add tabular material (data arranged into rows
and columns) to a web page.

• Tables may be used to organize calendars, schedules, statistics,

or other types of information

• A table cell may contain any sort of information, including

numbers, text elements, and even images and multimedia objects.
Table elements 3

• <table>….</table> The start and end of the table and

contain other table elements.

• <tr>….</tr> is used when you want a new Table Row to

begin.

• <th> ... </th> A table heading cell, which is a column header

or row header

• <td>….</td>denotes Table Data. You put this in front of

every piece of information you want in a cell
Table element structure 4

<table>
<tr>
<th> Header 1 </th>
<td> Data1 </td>
</tr>
<tr> Header1 Data 1
<th> Header 2 </th> Header 2 Data 2
<td> Data 2 </td>
</tr>
This is the structure for 2
</table> row and 2 column
 5

<table>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
</tr>
<tr>
<td> Data 1 </td>
<td> Data 2 </td> Header1 Header2
</tr>
Data1 Data2
<tr>
Data 3 Data 4
<td> Data 3 </td>
<td> Data 4 </td> This is a structure for a table
</tr> Which has 3 rows and 2 column
</table>
Minimal table structure 6

Let’s take a look at a simple table to see what it’s made of!

The structure of this table according to the HTML table model

Minimal table structure 7

How this table parts translate into HTML elements ?

Source code and output example 8

The markup for the table Written out in a source document

would look like the following
Note! 9

• All the content must go in cells, that is, within td or th elements.

• You can put any content in a cell: text, a graphic, even another table

• Start and end table tags are used to identify the beginning and end of the
tabular material.

• The table element may directly contain only some number of tr (row)
elements

• The only thing that can go in the tr element is some number of td or th

elements.
Table caption 10

The caption tag will serve as a title or explanation for the table and
it shows up at the top of the table.
• The <caption> tag must be inserted immediately
after the <table> tag.
• You can specify only one caption per table.
• Syntax:
<table border=“1”>
<caption> table caption</caption>
<tr>
<td> data 2</td>
<td> data 2 </td>
</tr>
</table>
Spanning Cells 11

Spanning is one fundamental feature of table structure

Generally two basic cell spanning exist which is use either colspan or row
span attribute
1. Column spans
Column spans, created with the colspan attribute in the td or th
element, stretch a cell to the right to span over the subsequent
columns
Spanning Cells 12

2. Row spans
Row spans, created with the rowspan attribute,work just like column
spans, but they cause the cell to span downward over several rows.
Some table attributes 13

Cell padding is the space inside the cell, between the content and
the edge of the cell.
<table cellpadding =“5”>

The yellow represent the

cell padding in this table

Cell spacing is the space and area between cells

<table cellspacing=“5”>

The blue color represent

space between cells
Some table attributes 14

• Width is another attribute used to change the width of the

table and td cells

<table width=“100%”>
represent the same page size
<table width=“80%”>
represent the 80% page size
<td width=“50%”>
represent the 50% table size

*you can use any percentage to determine with of any table*

HTML Form Examples
What are HTML forms? 15

•HTML Forms are one of the main points of interaction between a user and
a web site or application. They allow users to send data to the web site.

•Most of the time that data is sent to the web server, but the web page can
also intercept it to use it on its own.

•An HTML Form is made of one or more widgets.Those widgets can be

text fields (single line or multiline), select boxes, buttons, checkboxes, or
radio buttons.

•Most of the time those widgets are paired with a label that describes their
purpose.

•Properly implemented labels are able to clearly instruct both sighted and
blind users on what to enter into a form input.
What are HTML forms? 16

Forms allow us to build more dynamic websites that allow our users
to interact with it.

An HTML form is made up of any number of

form elements.
These elements enable the user to do things such as enter information
or make a selection from a preset options.

In HTML, a form is defined using the <form></form>tags.

<form>
…
Form elements go here
...
</form>
Form attribute 17

✓ The method attribute specifies how to send form-data

– The form-data can be sent as URL variables (with method="get")
– as HTTP post transaction (with method="post").
✓ The name attribute is used to identify the field on the server side.

✓ The action attribute specifies where to send the form- data when a form is
submitted
<form action=“ URL”>
Possible values:
• An absolute URL - points to another web site
(like action="http://www.example.com/example.htm")

• A relative URL - points to a file within a web site

(like action="example.htm")
The <input>Tag 18

This is the most commonly used tag within HTML forms.It allows you
to specify various types of user input fields such as text, radio buttons
, checkboxes etc.

✓ Text
Text fields are used for when you want the user to type short amounts
of text into the form.

<form>
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
</form>
Text Input (type=“text”) 19

• You can create fields of other sizes by the value in the size option
• You can limit the number of characters by the value of the
maxlength option.
• Text input fields will be empty when the page loads, unless you
provide an initial text string for its value option
Syntax:

<input type=“text” name=“textfield”/>

or
<input type="text" name="textfield" size=“value” value=”initial value">
Text Input (type=“text”) 20

Example 1: A text field named "text1" that is 30 characters wide.

<input type="text" name="text1" size="30">

Example 2: A text field named "text2" that is 30 characters wide

but will only accept 20 characters.

<input type="text" name="text2" size="30" maxlength="20”>

Example 3: A text field named "text3" that is 40 characters wide

with default value.
<input type="text" name="text3" size="40” value=”your name">
Password Input (type=“password”) 21

A password field works just like a text entry field, except the
characters are obscured from view using asterisk (*) or bullet ()
or another character determined by the browser.

Example 4: A password field named "pass1" that is 30 characters

wide
<input type="password" name="pass1" size="30">

Example 5: A password field named "pass2" that is 30 characters wide but will
only accept 20 characters

<input type="password" name="pass2" size="30” maxlength="20">

Text Input (type=“textarea”) 22

• the <textarea> element to enable users to enter larger blocks of text

than with the <input> tag.
• It's often a good idea to use the maxlength attribute to restrict the user's
input to a certain number of characters.
• You can also use the cols and rows attributes to adjust the width and
height.
• You can also include default text to appear in the field

Example 6: A textarea field named "comments" that is 45 characters wide and

6 lines high

<textarea name="comments" rows="6" cols="45” >

The first time I ever saw a web page, I thought.... (continue)
</textarea>
Adding Control Buttons 23

• A form must include at least one control button for submitting

the information once it is filled out.

• Submitting button is used to send data

• In addition, forms often include a button for resetting all the

entries if a person wants to start over.
• Reset button is used to restore all element to their initial state
Adding Control Buttons 24

A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">

• submit: send data

• reset: restore all form elements to their
initial state

• Note that the type is input, not “button”

25
Radio buttons (type=“radio”) 25

• Radio buttons are used for when you want the user to select only
one option from a pre-determined set of options.

• If you click one radio button, the others in the set are automatic
-ally de-selected

• A set of radio buttons is defined by providing them the same name

• The value sent in the web form is the value of the radio button that
was last selected

• Adding the option CHECKED to one of the buttons in a set will

make that button highlighted when the page loads

• Radio buttons do not contain any text.

Radio buttons (type=“radio”) 26

Radio buttons:<br>
<input type="radio" name=”gender" value="myValue1”>male
<br>
<input type="radio" name=“gender" value="myValue2" checked>
female
Checkboxes (type=“checkbox”) 27

• Are similar to radio buttons, but they enable the user to make
multiple selections.
• Note that every checkbox has a unique name. If there is no check
in the box☐, clicking it will place an or a check mark there

• If the box is checked, clicking it again will remove the mark. The
value sent in the web form is the value of the checkbox if it was s
elected; otherwise the value will be empty

• Adding the option CHECKED to a checkbox will make that

checkbox highlighted when the page loads.
Checkboxes (type=“checkbox”) 28

A checkbox:
<input type=“checkbox” name=“checkbox”
value="checkbox" checked>

• type: “checkbox”
• name: used to reference this form element from JavaScript
• value: value to be returned when element is checked
• Note that there is no text associated with the checkbox—
you have to supply text in the surrounding HTML
Drop-down menu or list 29

A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value=“blue">blue</option>
</select>

Additional arguments:
– size: the number of items visible in the list (default is "1")
– multiple: if set to "true", any number of items may be selected (default is "false")
Grouping menu options 30

you can use the optgroup element to create conceptual groups of options.
The required label attribute in the optgroup element provides the heading
for the group.
<select name="icecream" size="7" multiple>
<optgroup label="traditional">
<option>vanilla</option>
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praline</option>
<option>Nut surprise</option>
<option>Candy corn</option>
</optgroup>
</select>
File upload 31

Web forms can collect more than just data. They can also be used to
transmit external documents from a user’s hard drive.

• The file selection control makes it possible for users to select a

document from the hard drive to be submitted with the form data.

<form action="/client.php" method="POST”>

<label>Send a photo to be used as your online icon <br/>
<input type="file" name="photo" size="28“ >
<label>
</form>
HTML5 text inputs 32

• Search field <input type="search">

• Email address <input type=“ email”>

• Telephone number <input type=“tel”>

• Location(url) <input type=“url”>

***Not all browsers support the new HTML5 input types or sup
port them in the same way, but the good news is that if the type is
n’t recognized, the default generic text input is displayed instead,
which works perfectly fine.***
Date and time controls (HTML5) 33

HTML5 introduced six new input types that make date and time
selection widgets part of a browser’s standard built-in display
capabilities
The new date- and time-related input types are as follows:
Date input control :
<input type="date" name="name" value="2017-02-08">
Time input control:
<input type="time" name="name" value="03:13:00">
Date/time control with time zone:
<input type="datetime" name="name" value="2004-01-14T03:1
3:00-5:00">
Date and time controls (HTML5) 34

Specifies a month in a year

<input type="month">
Specifies a particular week in a year
<input type="week">
Numerical inputs (HTML5) 35

Number input
<input type="number">
<input type="number" name=”semenar" min="1" max="6">
Slider input
<input type="range">
<input type="range" name="satis" min="0" max="10" step="1">
Color selector (HTML5) 36

the intent of the color control type is to create a pop-up colorpicker

for visually selecting a color value similar to those used in operating
systems or image-editing programs.
<input type="color">
<label>Your favorite color <input type="color"
name="favorite"></label>
Fieldset and legend 37

• The fieldset element indicates a logical group of form controls.

• A fieldset may also include a legend element that provides a caption
for the enclosed fields.
Fieldset and legend 38
39