Scribd
Upload
10 views70 pages

03Form Table-edited

web programming

Uploaded by

educationbom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views70 pages

03Form Table-edited

web programming

Uploaded by

educationbom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 70

Web Programming

Dr Nor Fatimah Awang


FORM, FRAME
& TABLE

January 4, 2025 Azlan Ismail, UiTM, Shah Alam Page 1


Web Programming

Table
Basic Table Tags

• <table> marks the beginning of the table; </table> marks


the end.

• Many <table> tags contain the attribute border, which


indicates the thickness of the border in pixels.

• There is frequently a <caption> tag which follows the


table tag, which contains the table’s caption.

Page 2
Web Programming

Table
Basic Table Tags

• Table content is specified one row at a time.

• <tr>… </tr> - specifies content for one row.

• <th>… </th> - specifies the content for a heading in one cell of


the table.

• <td>… </td> - specified data contained in one cell of the table.

Page 3
Web Programming

Table
Example :

<table width="37%"
border="1">
<tr>
<td
width="47%">Nama</td>
<td
width="53%">IC</td>
</tr>
<tr>
<td>Ahmad</td>
<td>1234</td>
</tr>
<tr>

<td>Rashid</td><td>5678</t
d>
</tr>
</table>
January 4, 2025 Page 4
Web Programming

Example :

<table width="35%" border="1">


<tr>
<td colspan="2">Pelajar-Pelajar Sessi
2004</td>
</tr>
<tr>
<td width="10%">1.</td>
<td width="90%">Ahmad</td>
</tr>
<tr>
<td>2. </td>
<td>Rashid</td>
</tr>
</table>

January 4, 2025 Page 5


Web Programming

Table + Hyperlinks
Example :

Refers to the other web page in


the same server - (ITC443.html)

…………..
<tr>
<td><a href="ITC443.html">
&nbsp;&nbsp;&nbsp; &raquo; ITC443 </a>
</td>
</tr>
……………..

January 4, 2025 Page 6


Web Programming

Table + List
<table width="27%" border="1">
Example : <tr>
<td width="6%">Bil</td>
<td width="94%">Tajuk</td>
</tr>
<tr>
<td>1.</td>
<td><ol>
<li>Nota 1</li>
<li>Nota 2</li>
</ol></td>
</tr>
<tr>
<td>2.</td>
<td><ol>
<li>Exercise 1</li>
<li>Exercise 2</li>
</ol></td>
</tr>
</table>

January 4, 2025 Page 7


Web Programming

Exercise : Table

January 4, 2025 Page 8


Web Programming

Table
rowspan and colspan Attributes

• There are occasions when we will want information in a


table to extend over more than one cell

• The rowspan attribute specifies that the cell’s contents


will extend over more than one row.

• The colspan attribute specifies that the cell’s contents


will extend over more than one column.

Page 9
Web Programming

Table
rowspan example

Page
Web Programming

Table
rowspan example

Page
Web Programming

Table
colspan example

Page
Web Programming

Table
colspan example

Page
Web Programming

Exercise : Table

January 4, 2025 Page 14


Web Programming

Exercise : Table

January 4, 2025 Page 15


Web Programming

Table
align and valign Attributes

Page
Web Programming

Table
align and valign Attributes

Page
Web Programming

Table
align and valign example
<body>
<table border="1">
<caption>Fruit Juice Drinks</caption>
<tr>
<th></th>
<th>Apple</th>
<th>Orange</th>
<th>Banana</th>
</tr>
<tr>
<th>Breakfast</th>
<td align="center">0</td>
<td>1</td>
<td valign="top" rowspan="3">Yes, we have no bananas</td>
</tr>
<tr>
<th>Lunch and <br />lunch some more<br/>and lunch still
until</th>
<td valign="bottom">1</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
</tr>
</table>
</body>
Page
Web Programming

Table
align and valign example

Page
Table Web Programming

Cellpadding & Cellspacing


Attributes

Page
Table Web Programming

Cellpadding & Cellspacing


Attributes

Page
Frame
 With frames, you can display more than one HTML
document in the same browser window. Each HTML
document is called a frame, and each frame is
independent of the others.

 The disadvantages of using frames are:


 The web developer must keep track of more HTML documents
 It is difficult to print the entire page

Page
Frame
 The Frameset Tag
 The <frameset> tag defines how to divide the window into
frames
 Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the amount of
screen area each row/column will occupy

 The Frame Tag


 The <frame> tag defines what HTML document to put into
each frame

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Page
Frame
Example :

<frameset cols="20%,*" frameborder="yes" border="0"


framespacing="0">
<frame src="side.html" name="leftFrame" scrolling="NO"
noresize>
<frame src="main.html" name="mainFrame">
</frameset>

January 4, 2025 Page 24


Web Programming

Form
• Form is a technique for capturing or collecting data from
users.
• Forms are used to collect data inputted by a user. They can be
used as an interface for a web application, for example, or to
send data across the web.
• Data that users enter on a web page normally is sent to a Web
server.
• At this stage you will need server side scripting (php
programming) to achieve this objective.
• Example :

January 4, 2025 Page 25


Web Programming

Basic Form
• A <form> is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
• A form usually contains a Submit button to send the information
in the form elements to the server
• The form’s parameters tell how to send the information to the
server
• Example :
<html>
<body>

<form parameters>
form elements ….
………..

</form>

</body>
</html>

January 4, 2025 Page 26


Web Programming

Basic Form
• The syntax is: <form parameters>
• “method” attribute :- whether post or get value. (We will see
some examples to understand this)
• “action” attribute :- URL of filename. To state a file that is
going to be opened after clicking the submit button.
Normally, it is the file that receives value from the form.

<html>
<body>

<form method=“POST” action=“”>


form elements …. p
………..

</form>

</body>
</html>

January 4, 2025 Page 27


Web Programming

Basic Form
• Example :
<HTML>
<TITLE>Form Exercise</TITLE>
<BODY>
<P> This is a form: </P>
<FORM method=“post” action=“”>
<p>Username : <input type="text" name=“nama">
</p>
<p>Password : <input type=“password"
name=“password"></p>
<p><input type="submit" name="Submit"
value="Submit"></p>

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

January 4, 2025 Page 28


Web Programming

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
Web Programming

Form elements –
The <input> tag

• There are three basic tags used to capture input in Forms: INPUT,
SELECT, and TEXTAREA
• Most, but not all, form elements use the input tag, with a type="..."
argument to tell which kind of element it is
• type can be text, checkbox, radio, password, hidden, submit, reset,
button
• Other common input tag arguments include:
• name: the name of the element
• id: a unique identifier for the element
• value: the “value” of the element; used in different ways for different values of
type

January 4, 2025 Page 30


Web Programming

Form elements – <input> tag

1. <input type="text" name="nama"> or


<input type="password" name="password">

2. <input type="radio" name="gender" value="male">

3. <input type="checkbox" name="bike">

4. <input type="submit" name="Submit" value="Submit">

5. <input type=“hidden” name=”recipient”


value=“[email protected]”>

January 4, 2025 Page 31


Web Programming

Form elements – <input> tag


1. <input type="color">

2. <input type="date"><input type="datetime-local">


3. <input type="month"><input type="week"><input
type="time">

4. <input type="email">

5. <input type="number">

6. <input type="file">

7. <input type="tel">

8. <input type="url">
January 4, 2025 Page 32
Web Programming

Input tag
text field:
<input type="text" name="textfield" value="with an initial val

password field:
<input type="password" name="textfield3" value="secret" />

• Note that two of these use the input tag, but one uses textarea

33
Web Programming

Form Structure
Web Programming

How forms interact with servers


Web Programming

Query Strings
At the end of the day, another string
Web Programming

<form> element

Two essential features of any form, namely the action


and the method attributes.
•The action attribute specifies the URL of the server-
side resource that will process the form data
•The method attribute specifies how the query string
data will be transmitted from the browser to the
server.
•GET
•POST
Web Programming

GET vs POST
Web Programming

GET vs POST
Advantages and Disadvantages

GET
Data can be clearly seen in the address bar.
Data remains in browser history and cache.
Data can be bookmarked
Limit on the number of characters in the form data
returned.

POST
Data can contain binary data.
Data is hidden from user.
Submitted data is not stored in cache, history, or
bookmarks.
Web Programming

Exercise – input tag


<HTML>
<TITLE>Form Exercise</TITLE>
<BODY>
<P> This is a form: </P>
<FORM method=“post” action=“register.php”>

<P> Enter a word (1): <INPUT TYPE=TEXT NAME="WORD1">


</P>
<P> Enter a word (2): <INPUT TYPE=TEXT NAME="WORD2" VALUE="A
word">
</P>
<P> Enter a word (3): <INPUT TYPE=TEXT NAME="WORD3" VALUE=""
SIZE=30>
</P>
<P> Enter a word (4): <INPUT TYPE=TEXT NAME="WORD4" SIZE=20
MAXLENGTH=5>
</P>
<p><input type="submit" name="Submit" value="Submit"></p>

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

January 4, 2025 Page 40


Web Programming

Forms Control Elements


Web Programming

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.


Web Programming

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" … />


Web Programming

Text Input Controls


Classic
Web Programming

Text Input Controls


HTML5
Web Programming

HTML5 advanced controls

Pattern attribute

datalist
Web Programming

Select Lists
Chose an option, any option.

• <select> element is used to create a multiline box


for selecting one or more items
• The options are defined using the <option> element
• can be hidden in a dropdown or multiple rows of
the list can be visible
• Option items can be grouped together via the
<optgroup> element.
Web Programming

Select Lists
Select List Examples
Web Programming

Which Value to send


Select Lists Cont.

The value attribute of the <option> element is used to


specify what value will be sent back to the server.
The value attribute is optional; if it is not specified,
then the text within the container is sent instead
Web Programming

Radio Buttons

Radio buttons are useful when you want the user to


select a single item from a small list of choices and you
want all the choices to be visible
•radio buttons are added via the <input type="radio">
element

•The buttons are mutually exclusive (i.e., only one can be


chosen) by sharing the same name attribute

•The checked attribute is used to indicate the default choice

•the value attribute works in the same manner as with the


<option> element
Web Programming

Radio Buttons
Web Programming

Checkboxes

Checkboxes are used for getting yes/no or on/off


responses from the user.
•checkboxes are added via the <input type="checkbox”>
Element

•You can also group checkboxes together by having them


share the same name attribute

•Each checked checkbox will have its value sent to the


server

•Like with radio buttons, the checked attribute can be used


to set the default value of a checkbox
Web Programming

Checkboxes
Web Programming

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.
Web Programming

Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit" />
• A reset button:
<input type="reset" name="Submit2" value="Reset" />
• A plain button:
<input type="button" name="Submit3" value="Push Me" />

• submit: send data

• reset: restore all form elements to


their initial state
• button: take some action as
specified by JavaScript
• Note that the type is input, not “button”

55
Web Programming

Button Controls
Web Programming

Hidden fields

• <input type="hidden" name="hiddenField" value="nyah">


&lt;-- right there, don't you see it?

• What good is this?


• All input fields are sent back to the server, including hidden fields
• This is a way to include information that the user doesn’t need to see (or
that you don’t want her to see)
• The value of a hidden field can be set programmatically (by JavaScript)
before the form is submitted

57
Web Programming

Number and Range

Typically input values need be validated.


Although server side validation is required,
optional client side pre-validation is good
practice.
The number and range controls Added in HTML5
provide a way to input numeric values that
eliminates the need for JavaScript numeric
validation!!!
Web Programming

Number and Range


Web Programming

Color
Web Programming

Date and Time Controls

Dates and times often need validation when


gathering this information from a regular text
input control.
From a user’s perspective, entering dates can be
tricky as well: you probably have wondered at
some point in time when entering a date into a
web form, what format to enter it in, whether
the day comes before the month, whether the
month should be entered as an abbreviation or a
number, and so on.
Web Programming

HTML5 Date and Time Controls


Web Programming

HTML5 Date and Time Controls


Web Programming

Exercises
Web Programming

Exercises
Web Programming

Exercises
Web Programming

Exercises
Web Programming

<html><head>
<title>Chapter 4</title>
</head>
<body>
<form method=“post" action="">
<fieldset>
<legend>Details</legend>
<p>
Title:
<input type="text" name="title">
<p>
Country:
<select name="where">
<option>Choose a country</option>
<option>Canada</option>
<option>Finland</option>
<option>United States</option>
</select>
</p>
<input type="submit" name="submit">
</fieldset>
</form>
</body>
</html>
Web Programming

<html><head><title>Chapter 4</title></head>
<body>
<form method=“post" action="">
<fieldset>
<legend>Sample Text Fields</legend>
<p>
Title:<br>
<input type="text" name="title">
<p>
Password:<br>
<input type="password" name="pass" size="8">
<p>
Email:<br>
<input type="email" name="email" size="45">
<p>
Website:<br>
<input type="url" name="website" size="45"/>
<p>
Description: <br>
<textarea placeholder="enter a description" rows="5"
cols="45"></textarea>
<p>
<input type="submit" name="Submit">
</fieldset>
</form>
</body>
</html>
<html><head><title>Chapter 4</title> Gender of Traveller:<br> Web Programming
</head><body> <input type="radio"
<form method=“post" action=""> name="gender" value="1">Female
<fieldset> <br>
<legend>Sample Choice Controls</legend> <input type="radio"
<p> name="gender" value="2">Male
Countries:<br> <br>
<select name="country"> <p>
<option>Australia</option> How did you hear about the
<option>Canada</option> site:<br>
<option>France</option> <input type="checkbox"
<option>Sweden</option> name="hear" value="email">Email<br>
<option>Thailand</option> <input type="checkbox"
<option>United States</option> name="hear" value="friend">Friend<br>
</select> <p>
Continent:<br> <input type="checkbox"
<select size="4" name="continent"> name="hear" value="website">Website
<option value="NA">North <p>
America</option>
<option value="EU">Europe</option> <input type="submit"
<option value="AS">Asia</option> name="Submit">
<option value="SA">South </fieldset>
America</option>
</select> <p> </form></body></html>
City:<br>
<select name="city">
<optgroup label="North America">
<option>Calgary</option>
<option>Los Angeles</option>
</optgroup>
<optgroup label="Europe">
<option>London</option>
<option>Paris</option>
<option>Prague</option>
</optgroup>
</select> <p>

You might also like