Lect 4 5 (HTML Forms)

HTML FORMS
WEB ENGINEERING
LECTURE N0. 7
INSTRUCTOR: MS. MEHAK SHEIKH
Div
2
• The <div> tag defines a division or a section in an HTML document.

• The <div> tag is often used to group block-elements to format them with styles.
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: pink;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading 2</h2>
<p>This is paragraph.</p>
</div>
</body>
</html>
3
HTML FORMS
What are forms?
4
 <form> is just another kind of HTML tag

 HTML forms are used to create GUIs on Web pages
 Usually the purpose is to ask the user for information
 The information is then sent back to the server
 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
 Other kinds of HTML tags can be mixed in with the form elements
 A form usually contains a Submit button to send the information in the
form elements to the server
 The form’s parameters tell JavaScript how to send the information to
the server.
 Forms can be used for other things, such as a GUI for simple programs
The <form> tag
5
 The <form arguments> ... </form> tag encloses form

elements (and probably other HTML as well)
 The arguments to form tell what to do with the user input
 action="url" (required)
 Specifies where to send the data when the Submit button is clicked
 method="get" (default)
 Form data is sent as a URL with form_data info appended to the end
 Can be used only if data is all ASCII and not more than 100 characters
 method="post"
 Form data is sent in the body of the URL request
 Cannot be bookmarked by most browsers
 target="target"
 Tells where to open the page sent as a result of the request
 target= _blank means open in a new window
 target= _top means use the same window
The <input> tag
6
 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, file, or image
 Other common input tag arguments include:
 name: the name of the element
 value: the “value” of the element; used in different ways for different
values of type
 readonly: the value cannot be changed
 disabled: the user can’t do anything with this element
 Other arguments are defined for the input tag but have meaning only
for certain values of type
Text input
7
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
• Note that two of these use the input tag, but one uses textarea
Buttons
8
 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
Checkboxes
9
 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
Radio buttons
10
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name=" radiobutton " value="myValue2" checked>
female
 If two or more radio buttons have the same name, the user
can only select one of them at a time
 This is how you make a radio button “group”
Drop-down menu or list
11
 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")
Hidden fields
12
 <input type="hidden" name="hiddenField" value="nyah">

<-- right there, don't you see it?
 What good is this?

 Data that cannot be seen or modified by users when a form is
submitted
 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 them to see)
 The value of a hidden field can be set programmatically (by JavaScript)
before the form is submitted
A complete example
13
<html>
<head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
Grouping Form Data with <fieldset>
14
The <fieldset> element is used to group related

data in a form.
The <legend> element defines a caption for the
<fieldset> element.
Grouping Form Data with <fieldset>
15
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
HTML Input Attributes
16
 The readonly Attribute

 The readonly attribute specifies that the input field is read
only (cannot be changed):
 <input type="text" name="firstname" value="John" readonly>
 The maxlength Attribute
 The maxlength attribute specifies the maximum allowed length for
the input field:
 <input type="text" name="firstname" maxlength="10">
HTML Input Attributes
17
The min and max Attributes

The min and max attributes specify the minimum and
maximum values for an <input> element.
The min and max attributes work with the following
input types: number, range, date, month, time and week.
Example
 Enter a date before 2020-01-01:
<input type="date" name="bday" max=“2019-12-31">
Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">
iframe
18
An iFrame is a frame within a frame. It is a

component of an HTML element that allows you to
embed documents, videos, and interactive media
within a page. By doing this, you can display a
secondary webpage on your main page.
You can insert an iFrame element by using
the <iframe> tag in an HTML document.
<iframe src="https://
www.w3schools.com" title="W3Schools Free Online
Web Tutorials"></iframe>
19
Example
HTML form
20
 <html><body><form>
 <h1>Create a Internet Mail Account</h1>
 <p>First Name <input type="text" name="T1" size="30"></p>
 <p>Last Name <input type="text" name="T2" size="30"></p>
 <p>Desired Login Name <input type="text" name="T3" size="20">
 @mail.com</p>
 <p>Password <input type="password" name="T4" size="20"></p>
 <input type="radio" checked="checked" name="gender" value="male" /> Male</br>
 <input type="radio" name="gender" value="female" /> Female
 <p>Birthday <input type="text" name="T6" size="05">
 <select size="1" name="D2">
 <option>-Select One-</option>
 <option>January</option>
 <option>February</option>
 <option>March</option> </select>
 <input type="text" name="T7" size="10"></p> TypeYourself<textarea rows="4" name="S1"
cols="20"></textarea>
 <br><input type="submit" value="Accept" name="B1"> <input type="reset " value="Cancel"
name="B2"></br> </form></body></html>
21
The autofocus attribute of <input>
22
HTML5 introduced a new attribute called

autofocus which would be used as follows:
<input type="text" name="search" autofocus/>
The required attribute
Now you do not need to have javascript for client
side validations like empty text box would never be
submitted because HTML5 introduced a new
attribute called required which would be used as
follows and would insist to have a value:
<input type="text" name="search" required/>
New Elements in HTML5
23
HTML5 <article> Tag

The <article> tag specifies independent, self-
contained content.
An article should make sense on its own and it
should be possible to distribute it independently
from the rest of the site.
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser
developed by Mozilla. Firefox has been the second
most popular web browser since January 2018.</p>
</article>
The Placeholder attribute
24
HTML5 introduced a new attribute

called placeholder. This attribute on <input> and
<textarea> elements provides a hint to the user of
what can be entered in the field.
Enter email : <input type="email"
name="newinput"
placeholder="email@example.com"/>
<input type="submit" value="submit" />
25
HTML5 <datalist> Tag
The <datalist> tag specifies a list of pre-defined
options for an <input> element.
The <datalist> tag is used to provide an
"autocomplete" feature on <input> elements.
Users will see a drop-down list of pre-defined
options as they input data.
Use the <input> element's list attribute to bind it
together with a <datalist> element.
26
HTML5 <datalist> Tag
<input type="text" list="browsers"
name="browser" />
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
27
HTML5 <details> Tag
The <details> tag specifies additional details that
the user can view or hide on demand.
The <details> tag can be used to create an
interactive widget that the user can open and close.
Any sort of content can be put inside the <details>
tag.
28
HTML5 <details> Tag
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are
the property of the company Refsnes Data.</p>
</details>
29
HTML5 <mark> Tag
The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts
of your text.
<html>
<body>
<p>Do not forget to buy <mark>milk</mark>
today.</p>
</body>
30
HTML5 <progress> Tag
Use the <progress> tag in conjunction with
JavaScript to display the progress of a task.
<progress value="22" max="100"></progress>
HTML5 Video
31
Until now, there has not been a standard for showing a

video/movie on a web page.
Today, most videos are shown through a plug-in (like
flash). However, different browsers may have different
plug-ins.
HTML5 defines a new element which specifies a
standard way to embed a video/movie on a web page:
the <video> element.
<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
HTML5 Video
32
HTML5 Video
33
The control attribute adds video controls, like play,

pause, and volume.
It is also a good idea to always include width and
height attributes. If height and width are set, the
space required for the video is reserved when the
page is loaded. However, without these attributes,
the browser does not know the size of the video,
and cannot reserve the appropriate space to it. The
effect will be that the page layout will change
during loading (while the video loads).
HTML5 Audio
34
HTML5 provides a standard for playing audio files

<audio controls="controls">
<source src="song.mp3" type="audio/mpeg" />
Some browser does not support the audio element.
</audio>
35
Question???

Lect 4 5 (HTML Forms)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lect 4 5 (HTML Forms)

Uploaded by

Copyright:

Available Formats

HTML FORMS

• The <div> tag defines a division or a section in an HTML document.

 <form> is just another kind of HTML tag

 The <form arguments> ... </form> tag encloses form

A multi-line text field

 submit: send data

 reset: restore all form elements to

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

 What good is this?

The <fieldset> element is used to group related

 The readonly Attribute

The min and max Attributes

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

An iFrame is a frame within a frame. It is a

HTML5 introduced a new attribute called

HTML5 <article> Tag

HTML5 introduced a new attribute

Until now, there has not been a standard for showing a

The control attribute adds video controls, like play,

HTML5 provides a standard for playing audio files

You might also like