COMPUTER SCIENCE
SUBJECT NAME : WEB TECHNOLOGY
CHAPTER NO : 2
CHAPTER NAME : HTML Table and Forms
LECTURE NO: 2
Setting Image Background for Table
frame attribute in HTML Table
⚫ The purpose of the HTML frame attribute is to specify
which sides of a table border frame should be displayed.
Example
rules attribute in table
⚫ The HTML <table> rules Attribute is used to specify the
which parts of the inside borders that should be visible.
Attribute Values:
none: It does not create any lines.
rows: It creates line between the rows.
cols: It creates line between the columns.
all: It creates line between the rows and columns.
rules in Table
<col> tag in HTML tag
⚫ The <col> tag specifies column properties
HTML Form
⚫ HTML Forms are required, when you want to collect some
data from the site visitor.
⚫ For example, during user registration you would like to collect
information such as name, email address, credit card, etc.
⚫ A form will take input from the site visitor and then will post it
to a back-end application PHP script.
⚫ The back-end application will perform required processing on the
passed data based on defined business logic inside the application.
Creating a HTML Form
The <form> Element
⚫ The HTML <form> element defines a form that is used to
collect user input and submit to registered server URL.
⚫ An HTML form contains form elements.
⚫ Form elements are different types of input elements, like text
fields, checkboxes, radio buttons, submit buttons, and more.
<form>
.
form elements
.
</form>
<form> tag
⚫ The <form> tag is used to create an HTML form for user input.
⚫ Also, it is a container for input elements or tags.
⚫ Basic Attributes: action, method
⚫ action-Specifies where to send the form-data when a form is
submitted(URL).
⚫ method-Specifies the HTTP method to use when sending form-
data(GET or POST)
action and method are an
important <form> attributes to
specify the server URL and
method of submitting form data
such as get,post
What is HTTP?
⚫ The Hypertext Transfer Protocol (HTTP) is designed to
enable communications between clients and servers.
⚫ HTTP works as a request-response protocol between a client
and server.
⚫ Example:
⚫ A client (browser) submits an HTTP request to the server; then the server
returns a response to the client.
⚫ The response contains status information about the request and may also
contain the requested content.
Get method vs. Post method
⚫ GET is one of the most common HTTP methods.
⚫ GET requests not secured and it can be cached
⚫ GET requests remain in the browser history
⚫ GET requests can be bookmarked
⚫ GET requests should never be used when dealing with sensitive data
⚫ GET requests have length restrictions(2,048 characters-minus number of characters in
URL)
⚫ POST is one of the most common HTTP methods.
⚫ POST requests are secured, never cached
⚫ POST requests do not remain in the browser history
⚫ POST requests cannot be bookmarked
⚫ POST requests have no restrictions on data length
Form Elements
⚫ The <input> Element
⚫ The most important form element is the <input> element.
⚫ The <input> element can be displayed in several ways, depending on the
type attribute.
⚫ The <select> Element
⚫ The <select> element defines a drop-down list.
⚫ The <textarea> Element
⚫ The <textarea> element defines a multi-line input field (a text area).
⚫ The <button> Element
⚫ The <button> element defines a clickable button.
⚫ HTML5 <datalist> Element
⚫ The <datalist> element specifies a list of pre-defined options for an <input>
element.
<input> tag
⚫ The <input> tag is the most important form element.
⚫ The <input> tag can be displayed in several ways, depending
on the type attribute.
HTML Input Types
Input Types Description
<input type="text"> defines a one-line text input field
<input type="password"> defines a password field
<input type="submit"> defines a button for submitting form data to a form-
handler
<input type="reset"> defines a reset button that will reset all form values to
their default values
<input type="radio"> defines a radio button
<input type="checkbox"> defines a checkbox.
<input type="button"> defines a button
<input type="color"> is used for input fields that should contain a color.
color chooser
<input type="date"> defines a calendar date picker
<input type="email"> defines a pre-validated email box
<input type="file"> defines a file-select field and a "Browse" button for file
uploads.
HTML Input Types
Input Types Description
<input type="month"> allows the user to select a month and year.
<input type="number"> defines a numeric input field.
<input type="range"> defines a slider input control
<input type="search"> used for search fields (a search field behaves like a
regular text field).
<input type="tel"> used for input fields that should contain a telephone
number.
<input type="time"> allows the user to select a time (no time zone).
<input type="url"> used for input fields that should contain a URL address.
Submitting a form data to server
⚫ <input type=“submit”> will create a button, it will submit
the collected user data to the server URL specified in
action attribute.
<body>
<form action="server.php" method="POST">
<!-- Form input elements goes here -->
<input type="submit">
</form>
</body>
When user click the “submit” button,
page navigated to server.php
Submitting a form data to server
⚫ <input type=“image”> will create a button, it will submit the collected
user data to the server URL specified in action attribute.
<body>
<form action="server.php" method="POST">
<!-- Form input elements goes here -->
<input type="image" src="image.png" width="150" height="50">
</form>
</body>
When user click the “submit” image button,
page navigated to server.php
Text Input Elements
⚫ Single-line text input box− This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag
with type=“text”.
Enter your Name: <input type="text">
⚫ Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl <input> tag with
type=“password”.
Enter Password: <input type="password">
⚫ Multi-line text input controls − This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag with mandatory attributes rows(number of lines) and
cols(number characters in each line).
Comments:<textarea rows="5" cols="10"></textarea>
⚫ Clear the Text Boxes – HTML provides an input type element called “reset” which is
used to clear the user entered data in text box, password box and text areas.
<input type="reset">
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<form action="server.php" method="get">
Name: <input type="text" >
<br><br>
Password: <input type="password">
<br><br>
Comments:
<textarea rows="5" cols="10" align="bottom"></textarea>
<br><br>
<input type="submit"> <input type="reset">
</form>
</body>
</html>
Single Line Text Box
Single Line Password Box
submit button reset button Multi-line Text Box
HTML <input> Tag Attributes
Input Attribute Description
value Specifies an initial value for an input field
Specifies that an input field is read-only which cannot be modified
readonly by the user.
(boolean type)
size Specifies the visible width, in characters, of an input field
Specifies the maximum number of characters allowed in an input
maxlength
field
Short hint that describes the expected value of an input field (a
placeholder sample value or a short description of the expected format). It is
displayed in the input field before the user enters a value.
Specifies that an input field must be filled out before submitting the
required
form. (boolean type)
Specifies that an input field should automatically get focus when the
autofocus
page loads. (boolean type)
HTML <input> Tag Attributes
Input Attribute Description
Specifies that an input field should be disabled which is unusable and un-
disabled clickable
(boolean type)
min Specify the minimum value for an input field
max Specify the maximum value for an input field
Specify unique name for the input field such as text box, etc. Also, this
name name attribute used to autocomplete the value and also for sending data to
server as parameter.
step Specifies the legal number intervals for an input field
Specifies a regular expression that the input field's value is checked
pattern
against, when the form is submitted.
Specifies whether a form or an input field should have autocomplete on or
off. Autocomplete allows the browser to predict the value. When a user
autocomplete
starts to type in a field, the browser should display options to fill in the field,
based on earlier typed values. (boolean type)
refers to a <datalist> element that contains pre-defined options for an
list
<input type= “text”> element.
Example
<form action="server.php">
Username: <input type="text" size="20" placeholder="Enter Username"
maxlength="10” autofocus required>
<br>
<br>
Role: <input type="text" value="Director" readonly>
<br>
<br>
<input type="submit"> <input type="reset">
</form>
- HTML Special Character to display 1 space, you can repeat this
depends on how many spaces you want.
Output
Cursor is focused inside the text box due to autofocus attribute is set.
* Here, “Enter Username” is placeholder text
due to placeholder=“Enter Username”.
* Also, text box is 20 characters wide
since size=20
• In Role Text Box showing initial text as “Director” since value="Director"
• Also, the value cannot be modified due to readonly attribute is set.
Output
⚫ When user click the submit button without typing any data in Username text box will generate an
error message as shown below, since the required attribute is set which makes that field is mandatory
to fill.
⚫ Moreover, we have set the maxlength as 10 characters wide using the attribute maxlength="10".
Due to this, user cannot type more than 10 characters inside the text box.
