HTML Forms

• Traditionally, the term 'form' has referred to a printed

document that contains spaces for you to fill in
information.
• HTML borrows the concept of a form to refer to different
elements that allow you to collect information from
visitors to your site.
 Provides two-way communication between web servers
and browsers.
◦ Demand for most of the emerging applications.
◦ Providing dynamic contents.
 What is a HTML FORM?
◦ A form basically contains boxes and buttons
4/9/2024 1
FORM Tags and Attributes
 Several tags are used in connection with
forms:
<form> …… </form>
<input>
<textarea> …… </textarea>
<select> …… </select>

4/9/2024 3
<FORM> …… </FORM> Tag
 This tag is used to bracket a HTML form.
◦ Includes attributes which specify where and
how to deliver filled-up information to the
web server.
 Two main attributes:
◦ METHOD
◦ ACTION

4/9/2024 4
 Cont…
 METHOD:
◦ Indicates how the information in the form will be
sent to the web server when the form is submitted.
◦ Two possible values:
 GET: concatenates all field names and values in a single
large string.
 The parameters are visible in the URL itself.
 Suitable for small amounts of data.
 Limited length for the URL (usually around 2048
characters).
 Not secure for sensitive data since the data is visible
in the URL
4/9/2024 5
 Cont…
 POST: causes a form’s contents to be parsed one
element at a time.
 Data is not visible in the URL.
 Suitable for large amounts of data.
 No limitation on the length of data.
 More secure compared to GET because data is not
visible in the URL.

4/9/2024 6
 Cont…
 ACTION:
◦ Specifies the URL of a program on the origin
server that will be receiving the form’s inputs.
◦ Traditionally called Common Gateway Interface
(CGI).
◦ The specified program is executed on the
server, when the form is submitted.
 Output sent back to the browser.

4/9/2024 7
 Cont…
 Typical usage:
<FORM METHOD=“POST” ACTION=“cgi-bin/myprog.pl”>
……..
……..
</FORM>

4/9/2024 8
<INPUT> Tag
 This tag defines a basic form element.
 Several attributes are possible:
 TYPE
 NAME
 SIZE
 MAXLENGTH
 VALUE
 SRC
 ALIGN

4/9/2024 9
 Cont…
 TYPE:
◦ Defines the kind of element that is to be
displayed in the form.
 “TEXT” – defines a text box, which provides a
single line area for entering text.
 “RADIO” – radio button, used when a choice must
be made among several alternatives (clicking on one
of the buttons turns off all others in the same
group).
 “CHECKBOX” – similar to the radio buttons, but
each box here can be selected independently of the
others.

4/9/2024 10
 Cont…
◦ “PASSWORD” – similar to text box, but characters
are not shown as they are typed.
◦ “HIDDEN” – used for output only; cannot be
modified (mainly used to refer to choices that have
already been made earlier).
◦ “IMAGE” – used for active maps. When the user
clicks on the image, the (x,y) co-ordinates are stored
in variables, and are returned for further processing.
◦ “SUBMIT” – creates a box labeled Submit; if clicked,
the form data are passed on to the designated CGI
script.
◦ “RESET” – creates a box labeled Reset; if clicked,
clears a form’s contents.

4/9/2024 11
 Cont…
 NAME:
◦ Specifies a name for the input field.
◦ The input-handling program in reality receives
a number of (name,value) pairs.
 SIZE:
◦ Defines the number of characters that can be
displayed in a TEXT box without scrolling.
 MAXLENGTH:
◦ Defines the maximum number of characters a
TEXT box can contain.

4/9/2024 12
 Cont…
 VALUE:
◦ Used to submit a default value for a TEXT or
HIDDEN field.
◦ Can also be used for specifying the label of a
button (renaming “Submit”, for example).
 SRC:
◦ Provides a pointer to an image file.
◦ Used for clickable maps.
 ALIGN:
◦ Used for aligning image types.
◦ ALIGN = TOP | MIDDLE | BOTTOM
4/9/2024 13
<TEXTAREA> … </TEXTAREA> Tag

 Can be used to accommodate multiple

text lines in a box.
 Attributes are:
◦ NAME: name of the field.
◦ ROWS: number of lines of text that can fit
into the box.
◦ COLS: width of the text area on the screen.

4/9/2024 14
<SELECT> …. </SELECT> Tag
 Used along with the tag <OPTION>.
 Used to define a selectable list of elements.
◦ The list appears as a scrollable menu or a pop-up
menu (depends on browser).
 Attributes are:
◦ NAME: name of the field.
◦ SIZE: specifies the number of option elements
that will be displayed at a time on the menu. (If
actual number exceeds SIZE, a scrollbar will
appear).

4/9/2024 15
 Cont…
 MULTIPLE: specifies that multiple
selections from the list can be made.
<FORM ………….>
……..
Languages known:
<SELECT NAME=“lang” SIZE=4>
<OPTION> English
<OPTION> Amharic
<OPTION> Afan Oromo
<OPTION> Tigrigna
</SELECT>
</FORM>

4/9/2024 16
Example 1
<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF“
LINK="#FF9900" VLINK="#FF9900“
ALINK="#FF9900">
<CENTER><H3> Student Registration Form </H3>
</CENTER>
Please fill up the following form about the courses you will
register for this Semester.

4/9/2024 17
 Cont…
<FORM METHOD="POST" ACTION="/cgi/feedback">
<P> name: <INPUT name="name" TYPE="TEXT“ SIZE="30"
MAXLENGTH="50">
<P> roll number: <INPUT name="rollno“ TYPE="TEXT"
SIZE="7">
<P> course numbers:
<INPUT name="course1" TYPE="TEXT" SIZE="6">
<INPUT name="course2" TYPE="TEXT" SIZE="6">
<INPUT name="course3" TYPE="TEXT" SIZE="6">
<P> <P> press SUBMIT when done.
<P> <input type="submit">
<Input type="reset">
</Form>
</body>
</html>

4/9/2024 18
 Grouping Form Elements
 <fieldset>
o You can group related form controls together inside the
<fieldset> element.
o This is particularly helpful for longer forms.
o Most browsers will show the fieldset with a line around the edge
to show how they are related.
o The appearance of these lines can be adjusted using CSS.
• <legend>
o The <legend> element can come directly after the
opening <fieldset> tag and contains a caption which
helps identify the purpose of that group of form controls.

4/9/2024 19
 Cont…
<form method="post" action="registration.php">
<fieldset>
<legend><h1>well come to registration form</h1></legend></br>
user fname:<input type="text" name="fname" /><br>
user lname:<input type="text" name="lname" /><br>
password:<input type="password" name="password" /><br>
<input type="submit" value="submitt" />
</form>

4/9/2024 20
 html5: Form Validation
 You have probably seen forms on the web that give users
messages if the form control has not been filed in
correctly; this is known as form validation.
 Traditionally, form validation has been performed using
JavaScript But HTML5 is introducing validation and leaving
the work to the browser.
 Validation helps ensure the user enters information in a
form that the server will be able to understand when the
form is submitted.
 Validating the contents of the form before it is sent to the
server the helps:

4/9/2024 21
 Cont..
 Reduce the amount of work the server has to do
 Enables users to see if there are problems with the form
faster than if validation were performed on the server.
 It provides immediate feedback to users about the
correctness of the data they've entered.
 An example of HTML5 form validation is the required
attribute, which can be used on any form element that the
user is expected to fill in.
 This HTML5 attribute does not need a value, but in HTML4
all attributes must have a value. So, some people give this
attribute a value of required.
 By set the type pattern, maxlength, minlength. Like
pattern=[A-Za-z];
4/9/2024 22
 HTML 5 DATE INPUT
 <input>
Many forms need to gather information such as dates, email
addresses, and URLs. This has traditionally been done using
text inputs.
 HTML5 introduces new form controls to standardize the
way that some information is gathered.
 type="date"
If you are asking the user for a date, you can use an <input>
element and give the type attribute a value of date.
 This will create a date input in browsers that support the
new HMTL5 input types.

4/9/2024 23
 html5: Email & URL Input
 <input>
HTML5 has also introduced inputs that allow visitors to
enter email addresses and URLs.
 type="email"
If you ask a user for an email address, you can use the
email input. Browsers that support HTML5 validation will
check that the user has provided information in the
correct format of an email address.
 Some smart phones also optimize their keyboard to display
the keys you are most likely to need when entering an
email address (such as the @ symbol).

4/9/2024 24
 Cont…
 Type ="url"
A URL input can be used when you are asking a user for a
web page address.
 Browsers that support HTML5 validation will check that the
user has provided information in the format of a URL.
 Some smart phones also optimize their keyboard to display
the keys you are most likely to need when entering a URL.

4/9/2024 25
HTML 5 FOR SEARCH INPUT
 input type="search"
To create the HTML5 search box the <input> element
should have a type attribute whose value is search.
 placeholder
On any text input, you can also use an attribute called
placeholder whose value is text that will be shown in the
text box until the user clicks in that area.

4/9/2024 26
 How Forms Work
 A user fills in a form and then presses a button to submit
the information to the server.

 The name of each form control is sent to the server along

with the value the user enters or selects.

 The server processes the information using a programming

language such as PHP, C#,VB.net, or Java. It may also store
the information in a database.

 The server creates a new page to send back to the browser

based on the information received.

4/9/2024 27
 HTML Form Controls
 There are several types of form controls that you can use to
collect information from visitors to your site.
 Adding text:
Text input (single-line)
Used for a single line of text such as email addresses and
names using HTML <input> tag.
 Password input
Like a single line text box but it masks the characters
entered. They are also created using HTMl <input> tag.
 Text area (multi-line)
For longer areas of text, such as messages and comments
using HTML <textarea> tag

4/9/2024 28
 Cont…
 Making Choices
o Radio buttons
For use when a user must select one of a number of
options.
o Checkboxes
When a user can select and unselect one or more
options.
o Drop-down boxes
When a user must pick one of a number of options
from a list.
 Submitting Forms:
o Submit buttons
To submit data from your form to another web page.
The submit button is used to send a form to the server.
It has name and value(attributes)
o Image buttons
Similar to submit buttons but they allow you to use an
image. 4/9/2024 29
 Multiple-Line Text Input Controls
• Multi-line input controls are created using HTML
<textarea> tag
• list of attributes for <textarea> tag.
o Name: Used to give a name to the control
o rows:the number of rows of text area box.
o Cols:the number of columns of text area box

Checkbox Control
• Checkboxes are used when more than one option is
required to be selected.
• They are also created using HTML <input> tag but type
attribute is set to checkbox.

4/9/2024 30
 Cont..
• list of attributes for <checkbox> tag.
o Type:Indicates the type of input control
o Name:Used to give a name to the control which is
sent to the server to be recognized and get the value.
o value: The value that will be used if the checkbox is
selected.
o Checked: Set to checked if you want to select it by
default.

4/9/2024 31
 Radio Button Control
 Radio buttons are used when out of many
options, just one option is required to be
selected.
 They are also created using HTML <input> tag
but type attribute is set to radio.
 Attributes are similar with checkbox except
the value of type attribute
 The name of radio button should be the same

4/9/2024 32
 Select Box Control
 Also called drop down box which provides
option to list down various options in the form
of drop down list, from where a user can select
one or more options.
 Attributes
attributes of <select> tag:
o Name: Used to give a name to the control
o Size: used to present a scrolling list box.
o Multiple:If set to "multiple" then allows a user to
select multiple items from the menu.

4/9/2024 33
 Cont…
 Attributes of <option> tag
◦ value : The value that will be used if an option in
the select box is selected.
◦ Selected: Specifies that this option should
be the initially selected value when the page
loads.
◦ Label:An alternative way of labeling options

4/9/2024 34
 File Upload Box

• allow a user to upload a file to your web

site
 Example
<form action="“ method="post">

<p>Upload your song in MP3 format: </p>

<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />

</form>
4/9/2024 35
 Button Controls
• You can create a clickable button using <input>
tag by setting its type attribute to button. The
type attribute can take the following values:
• Submit: creates a button that automatically
submits a form.
• reset : creates a button that automatically
resets form controls to their initial values.
• Button: This creates a button that is used to
trigger a client-side script when the user clicks that
button.
• Image:This creates a clickable button but we can
use an image as background of the button.
4/9/2024 36
Hidden Form Controls
• used to hide data inside the page
• hides inside the code and does not
appear on the actual page.
• Can creates by <input> with type
attribute value is hidden

4/9/2024 37
 Flash, Video & audio
 Flash is a very popular technology used to add animations,
video, and audio to websites.

 Since the late 1990s, Flash has been a very popular tool for
creating animations, and later for playing audio and video in
websites.

 Whether you are creating an animation or a media player

in Flash, the files you put on your website are referred to
as Flash movies.

4/9/2024 38
 HTML5: adding Video To Your Pages
<video>

 The <video> element has a number of attributes

which allow you to control video playback:
◦ Src: this attribute specifies the path to the video.

◦ Poster: this attribute allows you to specify an image to show while

the video is downloading or until the user tells the video to play.

◦ width, height: these attributes specify the size of the player in

pixels.

◦ Controls When used, this attribute indicates that the browser

should supply its own controls for playback.
4/9/2024 39
 Cont..
o Autoplay When used, this attribute specifies that the file should play
automatically.
Loop When used, this attribute indicates that the video should start
playing again once it has ended.

o Preload This attribute tells the browser what to do when the page
loads. It can have one of three values:
 none The browser should not load the video until the user presses play.

 Auto The browser should download the video when the page
loads.

4/9/2024 40
 Cont..
 <!DOCTYPE html>
<html>
<head>
<title>Adding HTML5 Video</title>
</head> <body>
<video src="video/puppy.mp4“ poster="images/puppy.jpg“
width="400" height="300“ preload controls loop>
<p>A video of a puppy playing in the snow</p>
</video> </body> </html>

4/9/2024 41
HTML5: multiple Video sources
 <source> To specify the location of the fie to be played, you can use

the <source> element inside the <video> element. (This should

replace the src attribute on the opening <video> tag.) You can also

use multiple <source> elements to specify that the video is available

in different formats.

Src This attribute specifies the path to the video.

Type You should use this attribute to tell the browser what format

the video is. Otherwise, it will download some of the video to see if it

can play the fie (which will take time and bandwidth).

4/9/2024 42
 example
 <!DOCTYPE html>
<html> <head>
<title>Multiple Video Sources</title>
</head> <body>
<video poster="images/puppy.jpg" width="400“ height="320" preload
controls loop>
<source src="video/puppy.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/puppy.webm" type='video/webm;codecs="vp8,
vorbis"' />
<p>A video of a puppy playing in the snow</p>
</video> </body> </html>

4/9/2024 43
 Adding audio To web Pages
 By far the most popular format for putting audio on web pages
is MP3.

 <audio> HTML5 introduced the <audio> element to include

audio files in your pages. As with HTML5 video, browsers expect
different formats for the audio. The <audio> element has a
number of attributes which allow you to control audio playback:

 src This attribute specifies the path to the audio fie.

 Controls This attribute indicates whether the player should

display controls. If you do not use this attribute, no controls will
be shown by default. You can also specify your own controls
4/9/2024 44
using JavaScript.
 Cont…
 Autoplay The presence of this attribute indicates that the
audio should start playing automatically. (It is considered better
practice to let visitors choose to play audio.)
 preload
This attribute indicates what the browser should do if the
player is not set to autoplay.
 loop
This attribute specifies that the audio track should play again
once it has finished.

4/9/2024 45
 Example
<!DOCTYPE html>
<html> <head>
<title>Adding HTML5 Audio</title>
</head> <body>
<audio src="audio/test-audio.ogg" controls autoplay>
<p>This browser does not support our audio format. </p>
</audio>
</body>
</html>

4/9/2024 46
HTML5: multiple audio sources
 <source>
It is possible to specify more than one audio fie using the
<source> element between the opening <audio> and
closing </audio> tags (instead of the src attribute on the
opening <audio> tag).

 This is important because different browsers support

different formats for audio files.

 You could also provide a Flash alternative for older browsers

that do not support the <audio> element.
4/9/2024 47
 Cont…
 src
The <source> element uses the src attribute to indicate
where the audio fie is located.
Type At the time of writing, the type attribute was not
commonly being used on the <source> element in the
same way it was for the <video> element.

4/9/2024 48
Example
 <!DOCTYPE html>
<html> <head>
<title>Multiple Audio Sources</title>
</head> <body>
<audio controls autoplay>
<source src="audio/test-audio.ogg" />
<source src="audio/test-audio.mp3" />
<p>This browser does not support our audio format. </p>
</audio> </body> </html>

4/9/2024 49
 Block Elements
 Block elements appear on the screen as if
they have a line break before and after
them.
 For example
<p>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<ul>, <ol>, <dl>,
<pre>, <hr />, <blockquote>, and <address>
They all start on their own new line, and anything
that follows them appears on its own new line.

4/9/2024 50
Grouping text & Elements in a block
<div>

 The <div> element allows you to group a set of elements together in

one block-level box.

 For example, you might create a <div> element to contain all of the

elements for the header of your site (the logo and the navigation), or

you might create a <div> element to contain comments from visitors.

 In a browser, the contents of the <div> element will start on a new

line.

4/9/2024 51
 Cont…
 Using an id or class attribute on the <div> element,

however, means that you can create CSS style rules to

indicate how much space the <div> element should

occupy on the screen and change the appearance of all

the elements contained within it.

 It can also make it easier to follow your code if you have

used <div> elements to hold each section of the page.

4/9/2024 52
 Cont…
 Example

<div id ="header">
<img src="images/logo.gif" alt="Anish Kapoor" />
<ul> <li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> </div><!-- end of header -->

4/9/2024 53
 Inline Elements
 Inline elements, on the other hand, can appear
within sentences and do not have to appear on
a new line of their own.
 The <b>, <i>, <u>, <em>, <strong>, <sup>,
<sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>,elements are all inline
elements.

4/9/2024 54
 Grouping text & Elements inline
 <span>
The <span> element acts like an inline equivalent of the <div>
element.
 It is used to either:
Contain a section of text where there is no other suitable
element to differentiate it from its surrounding text
Contain a number of inline elements
 The most common reason why people use <span> elements is so that
they can control the appearance of the content of these elements
using CSS.
 You will usually see that a class or id attribute is used with <span>
elements:
● To explain the purpose of this <span> element
● So that CSS styles can be applied to elements that have specific
values for these attributes
4/9/2024 55
 Cont…
id attribute
 Every HTML element can carry the id attribute. It is used to
uniquely identify that element from other elements on the page.
 Its value should start with a letter or an underscore (not a
number or any other character).
 It is important that no two elements on the same page have the
same value for their id attributes (otherwise the value is no
longer unique).
 The id attribute is known as a global attribute because it can be
used on any element.(we will see more on CSS section)
4/9/2024 56
 Class attribute
 Every HTML element can also carry a class attribute.

 Sometimes, rather than uniquely identifying one element

within a document, you will want a way to identify several
elements as being different from the other elements on
the page.

 To do this you can use the class attribute.

 Its value should describe the class it belongs to.

 The class attribute on any element can share the same

value.
4/9/2024 57
4/9/2024 58