Scribd
Upload
25 views85 pages

HTM - Lab - Materials

The document provides a comprehensive overview of HTML elements, attributes, and their usage, including headings, paragraphs, links, images, tables, and styles. It explains the importance of proper HTML structure for web page design and search engine optimization. Additionally, it covers various formatting elements and their specific functions in web development.

Uploaded by

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

HTM - Lab - Materials

The document provides a comprehensive overview of HTML elements, attributes, and their usage, including headings, paragraphs, links, images, tables, and styles. It explains the importance of proper HTML structure for web page design and search engine optimization. Additionally, it covers various formatting elements and their specific functions in web development.

Uploaded by

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

HTML Lab Materials

• All HTML elements can have attributes


• The href attribute of <a> specifies the URL of the page the link
HTML Attributes
goes to
• The src attribute of <img> specifies the path to the image to be
displayed
• The width and height attributes of <img> provide size
information for images
• The alt attribute of <img> provides an alternate text for an
image
• The style attribute is used to add styles to an element, such as
color, font, size, and more
• The lang attribute of the <html> tag declares the language of
the Web page
HTML Headings
• HTML headings are titles or subtitles that you want to display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Headings

• Search engines use the headings to index the structure and


content of your web pages.

• Users often skim a page by its headings. It is important to use


headings to show the document structure.

• <h1> headings should be used for main headings, followed by


<h2> headings, then the less important <h3>, and so on.
HTML Paragraphs
• A paragraph always starts on a new line, and is usually a block of
text.
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after
a paragraph.
• Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Improve search suggestions
When you type in the address bar or search box, Chrome sends what
you type to your default search engine to get better suggestions.
This is off in Incognito.
HTML Display
• You cannot be sure how HTML will be
displayed. <p>
• Large or small screens, and resized This paragraph
windows will create different results. contains a lot of lines
• With HTML, you cannot change the in the source code,
display by adding extra spaces or but the browser
extra lines in your HTML code. ignores it.
• The browser will automatically </p>
remove any extra spaces and lines <p>
when the page is displayed: This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an


HTML page:

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a
new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
The HTML <pre> Element
<p> <pre>
My Bonnie lies over the ocean.
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me. My Bonnie lies over the ocean.
</p>

Oh, bring back my Bonnie to me.


</pre>

The HTML <pre> element defines preformatted


text.
HTML Tag Reference
HTML Styles
• Setting the style of an HTML element, can be done with the style
attribute.
• The HTML style attribute has the following syntax:
<tagname style="property:value;">

• Use the style attribute for styling HTML elements


• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
HTML Text Formatting
• HTML contains several elements <small> - Smaller text
for defining text with a special<del> - Deleted text
meaning. <ins> - Inserted text
<sub> - Subscript text
HTML Formatting Elements
<sup> - Superscript text
Formatting elements were designed The HTML <b> element defines bold
to display special types of text: text, without any extra importance.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
HTML <blockquote> for Quotations
• The HTML <blockquote> element defines a section that is quoted from another
source.
• Browsers usually indent <blockquote> elements.

<p>Here is a quote from WWF's website:</p>


<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.

</blockquote>

• The cite attribute specifies the source of a quotation.


• Tip: It's a good habit to always add the source of a quotation, if any.
HTML <abbr> for Abbreviations
• The HTML <abbr> tag defines an abbreviation or an acronym,
like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
• Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
<p>
The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.
</p>
HTML <address> for Contact Information
• It defines the contact information for the author/owner of a document or
an article.
• The contact information can be an email address, URL, physical address,
phone number, social media handle, etc.
• The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after the <address>
element.
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
HTML Color

• HTML colors are specified with predefined color names, or with


RGB, HEX, HSL, RGBA, or HSLA values.
• Color Names-In HTML, a color can be specified by using a color
name: red, blue, tomato.
• Background Color- You can set the background color for HTML
elements: <h1 style="background-color:DodgerBlue;">Hello
World</h1>
• Text Color-You can set the color of text: Hello World
<h1 style="color:red;">Hello World</h1>
Border Color

You can set the color of borders:


<h1 style="border: 2px solid Tomato;">Hello
World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello
World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
Color Values
• In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values.
• The following three <div> elements have their background color set
with RGB, HEX, and HSL values:
Color Values
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
HTML RGB and RGBA Colors
• An RGB color value represents RED, GREEN, and BLUE light sources.
• An RGBA color value is an extension of RGB with an Alpha channel (opacity).
• In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
• This means that there are 256 x 256 x 256 = 16777216 possible colors!
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
HTML Links
• Links are found in nearly all web pages. Links allow users to click
their way from page to page.
• HTML Links - Hyperlinks
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn
into a little hand.
• The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
HTML Links
• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL address.
• This example shows how to create a link to W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:


• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
• Use target="_blank" to open the linked document in a new browser window or
tab:
<a href="https://www.w3schools.com/" target="_blank">VisitW3Schools!</
a>
HTML Links - The target Attribute
HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;"> </a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program

(to let them send a new email):

<a href="mailto:[email protected]">Send email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a

button:
HTML Images
• Images can improve the design and the appearance of a web page.
HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.

A table in HTML consists of table cells inside rows and


columns
HTML Table –Example
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
HTML <col> Tag
• The <col> tag specifies column properties for each <col style="background-color:yellow">
column within a <colgroup> element. </colgroup>
• The <col> tag is useful for applying styles to entire <tr>
columns, instead of repeating the styles for each cell,
for each row. <th>ISBN</th>
• Set the background color of the three columns with <th>Title</th>
the <colgroup> and <col> tags: <th>Price</th>
</tr>
<!DOCTYPE html> <tr>
<html> <td>3476896</td>
<head> <td>My first HTML</td>
<style> <td>$53</td>
table, th, td { </tr>
border: 1px solid black; <tr>
} <td>5869207</td>
</style> <td>My first CSS</td>
</head> <td>$49</td>
<body> </tr>
<h1>The col element</h1> </table>
<table> </body>
<colgroup> </html>
<col span="2" style="background-color:red">
HTML <colgroup> Tag
• The <colgroup> tag specifies a group of one or more columns in a table for
formatting.
• The <colgroup> tag is useful for applying styles to entire columns, instead of
repeating the styles for each cell, for each row.
• Note: The <colgroup> tag must be a child of a <table> element, after any
<caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr>
elements.
• Tip: To define different properties to a column within a <colgroup>, use the
<col> tag within the <colgroup> tag.
HTML <colgroup> Tag
<!DOCTYPE html> <th>Title</th>
<html> <th>Price</th>
<head> </tr>
<style> <tr>
table, th, td { <td>3476896</td>
border: 1px solid black; <td>My first HTML</td>
} <td>$53</td>
</style> </tr>
</head> <tr>
<body> <td>5869207</td>
<h1>The colgroup element</h1> <td>My first CSS</td>
<table> <td>$49</td>
<colgroup> </tr>
<col span="2" style="background-color:red"> </table>
<col style="background-color:yellow"> </body>
</colgroup> </html>
<tr>
<th>ISBN</th>
HTML <div> Tag

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


document.
• The <div> tag is used as a container for HTML elements - which
is then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and
after the <div> element.
HTML Lists
• HTML lists allow web developers to group a set of related items in
lists.
Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
• The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered HTML List - Choose List Item
Marker
The CSS list-style-type property is used to define the style of the
list item marker. It can have one of the following values:
Unordered List Example
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items will be marked with numbers by default:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Control List Counting
By default, an ordered list will start <ol start="50">
counting from 1. If you want to <li>Coffee</li>
start counting from a specified
number, you can use the start <li>Tea</li>
attribute: <li>Milk</li>
<!DOCTYPE html> </ol>
<html> <ol type="I" start="50">
<body> <li>Coffee</li>
<h2>The start attribute</h2> <li>Tea</li>
<p>By default, an ordered list will <li>Milk</li>
start counting from 1. Use the start
attribute to start counting from a </ol>
specified number:</p> </body>
</html>
HTML Lists

• Use the HTML <ol> element to define an ordered list


• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML <div> Tag:- Example
<!DOCTYPE html> <h1>The div element</h1>
<html>
<head> <div class="myDiv">
<style> <h2>This is a heading in a div
.myDiv { element</h2>

border: 5px outset red; <p>This is some text in a div


element.</p>
background-color: lightblue;
</div>
text-align: center;
}
<p>This is some text outside the div
</style> element.</p>
</head>
<body> </body>
</html>
HTML <header> Tag
• The <header> element represents a container for introductory
content or a set of navigational links.
• A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information

• Note: You can have several <header> elements in one HTML


document. However, <header> cannot be placed within a
<footer>, <address> or another <header> element.
HTML <header> Tag:-Example
<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

</body>
</html>
HTML <span> Tag
• The <span> tag is an inline container used to mark up a part of a
text, or a part of a document.
• The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a
block-level element and <span> is an inline element.
HTML <span> Tag-Example

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>

</body>
</html>
HTML <nav> Tag
• The <nav> tag defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav>
element. The <nav> element is intended only for major block of
navigation links.
• Browsers, such as screen readers for disabled users, can use this
element to determine whether to omit the initial rendering of this
content.
HTML <nav> Tag-Example
<!DOCTYPE html>
<html>
<body>
<h1>The nav element</h1>
<p>The nav element defines a set of navigation links:</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
HTML <section> Tag
The <section> tag defines a section in a <p>The Panda has become the symbol of WWF.
document. The well-known panda logo of WWF originated from
a panda named Chi Chi that was transferred from
the Beijing Zoo to the London Zoo in the same year
<!DOCTYPE html> of the establishment of WWF.</p>
<html> </section>
<body> </body>
<h1>The section element</h1> </html>
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues
regarding the conservation, research and
restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in
1961.</p>
</section>
<section>
<h2>WWF's Symbol</h2>
HTML <iframe> Tag
• The <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the
current HTML document.
• Tip: Use CSS to style the <iframe> (see example below).
• Tip: It is a good practice to always include a title attribute for the
<iframe>. This is used by screen readers to read out what the
content of the <iframe> is.
HTML <iframe> Tag
<!DOCTYPE html>

<html>

<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online

Web Tutorials">

</iframe>

</body>

</html>
HTML <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.
• Potential sources for the <article> element:
Forum post
Blog post
News story
HTML <article> Tag-Example
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is
the world's most popular web browser today!</p>
</article>
<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>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft
Edge replaced Internet Explorer.</p>
</article>
HTML <aside> Tag
• The <aside> tag defines some content aside from the content it
is placed in.
• The aside content should be indirectly related to the surrounding
content.
• Tip: The <aside> content is often placed as a sidebar in a
document.
• Note: The <aside> element does not render as anything special
in a browser. However, you can use CSS to style the <aside>
element.
HTML <aside> Tag- Example
• Display some content aside from the content it is placed in:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside>
HTML Forms
• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
The <form> Element
• The HTML <form> element is used to create an HTML form for
user input:
<form>
.
form elements
.
</form>
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending
on the type attribute.
Here are some examples:
Text Fields
The <input type="text"> defines a single-line input field for text
input.
The <label> Element and Radio Buttons
The <label>
• The <label> tag defines a label for many form elements.
• The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.
• The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within the
<label> element, it toggles the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.

Radio Buttons
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.
Radio Buttons-Example

<!DOCTYPE html> <input type="radio" id="javascript"


<html> name="fav_language" value="JavaScript">
<body> <label for="javascript">JavaScript</label>
<h2>Radio Buttons</h2> </form>
<p>Choose your favorite Web language:</p> </body>
<form> </html>
<input type="radio" id="html"
name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css"
name="fav_language" value="CSS">
<label for="css">CSS</label><br>
Checkboxes
The <input type="checkbox"> defines a <label for="vehicle1"> I have a
checkbox. bike</label><br>
Checkboxes let a user select ZERO or MORE <input type="checkbox" id="vehicle2"
options of a limited number of choices name="vehicle2" value="Car">
<label for="vehicle2"> I have a
<!DOCTYPE html> car</label><br>
<html> <input type="checkbox" id="vehicle3"
<body> name="vehicle3" value="Boat">
<h2>Checkboxes</h2> <label for="vehicle3"> I have a
<p>The <strong>input boat</label><br><br>
type="checkbox"</strong> defines a <input type="submit" value="Submit">
checkbox:</p> </form>
<form action="/action_page.php"> </body>
<input type="checkbox" id="vehicle1" </html>
name="vehicle1" value="Bike">
The Submit Button
• The <input type="submit"> defines a <input type="text" id="fname"
button for submitting the form data to a name="fname" value="John"><br>
form-handler. <label for="lname">Last
• The form-handler is typically a file on the name:</label><br>
server with a script for processing input <input type="text" id="lname"
data. name="lname" value="Doe"><br><br>
• The form-handler is specified in the form's <input type="submit" value="Submit">
action attribute. </form>
<!DOCTYPE html> <p>If you click the "Submit" button, the
<html> form-data will be sent to a page called
<body> "/action_page.php".</p>
<h2>HTML Forms</h2> </body>
<form action="/action_page.php"> </html>
The Name Attribute for <input>
• Notice that each input field must value="John"><br><br>
have a name attribute to be <input type="submit"
submitted. value="Submit">
• If the name attribute is omitted, </form>
the value of the input field will not <p>If you click the "Submit" button,
be sent at all. the form-data will be sent to a page
<!DOCTYPE html> called "/action_page.php".</p>
<html> <p>Notice that the value of the
<body> "First name" field will not be
<h2>The name Attribute</h2> submitted, because the input
<form action="/action_page.php"> element does not have a name
<label for="fname">First attribute.</p>
name:</label><br> </body>
<input type="text" id="fname" </html>
HTML Form Attributes
The Action Attribute name:</label><br>
• The action attribute defines the action <input type="text" id="fname"
to be performed when the form is name="fname" value="John"><br>
submitted. <label for="lname">Last
• Usually, the form data is sent to a file name:</label><br>
on the server when the user clicks on <input type="text" id="lname"
the submit button. name="lname"
• Tip: If the action attribute is omitted, value="Doe"><br><br>
the action is set to the current page.
<input type="submit"
<!DOCTYPE html> value="Submit">
<html> </form>
<body> <p>If you click the "Submit" button, the
<h2>HTML Forms</h2> form-data will be sent to a page called
"/action_page.php".</p>
<form action="/action_page.php">
</body>
<label for="fname">First
</html>
The Target Attribute
• The target attribute specifies where to display the response that
is received after submitting the form.
• The target attribute can have one of the following values:
The Method Attribute
• The method attribute specifies the HTTP method to be used when
submitting the form data.
• The form-data can be sent as URL variables (with method="get") or
as HTTP post transaction (with method="post").
• The default HTTP method when submitting form data is GET.
Example
• This example uses the GET method when submitting the form
data:
<form action="/action_page.php" method="get">
• This example uses the POST method when submitting the form
data:
<form action="/action_page.php" method="post">
GET vs POST method
Notes on GET:
• Appends the form data to the URL, in name/value pairs
• NEVER use GET to send sensitive data! (the submitted form data is
visible in the URL!)
• The length of a URL is limited (2048 characters)
• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google

Notes on POST:
• Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of
data.
• Form submissions with POST cannot be bookmarked
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
The <input> Element
• One of the most used form element is the <input> element.
• The <input> element can be displayed in several ways, depending on the type
attribute.

<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The <label> Element
• The <label> element defines a label for several form elements.
• The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on the input
element.
• The <label> element also help users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it toggles the radio
button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
The <select> Element
The <select> element defines a drop- <option
down list: value="volvo">Volvo</option>
<!DOCTYPE html> <option value="saab">Saab</option>
<html> <option value="fiat">Fiat</option>
<body> <option value="audi">Audi</option>
<h2>The select Element</h2> </select>
<p>The select element defines a drop- <input type="submit">
down list:</p> </form>
<form action="/action_page.php"> </body>
<label for="cars">Choose a </html>
car:</label>
<select id="cars" name="cars">
The <option> elements
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>

Use the size attribute to specify the number of visible values:


<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
multiple attribute
Use the to allow the user to select more than one value:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text
area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text
area.
The cols attribute specifies the visible width of a text area.
The <button> Element
The <button> element defines a clickable button
<button type=“button" onclick="alert('Hello World!')">Click Me!</button>

The <fieldset> and <legend> Elements


The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <datalist> Element
• The <datalist> element specifies a list of pre-defined options for an
<input> element.
• Users will see a drop-down list of the pre-defined options as they input
data.
• The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML Input Types
Here are the different input types <input type="number">
you can use in HTML: <input type="password">
<input type="radio">
<input type="button"> <input type="range">
<input type="checkbox"> <input type="reset">
<input type="color"> <input type="search">
<input type="date"> <input type="submit">
<input type="datetime-local"> <input type="tel">
<input type="email"> <input type="text">
<input type="file"> <input type="time">
<input type="hidden"> <input type="url">
<input type="image"> <input type="week">
<input type="month">
HTML Input Attributes
• The input value attribute specifies an initial value for an input
field.
• The input disabled attribute specifies that an input field should
be disabled. A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when
submitting the form!
• The input size attribute specifies the visible width, in characters,
of an input field. The default value for size is 20. Note: The size
attribute works with the following input types: text, search, tel,
url, email, and password.
HTML Input Attributes
• The input read-only attribute specifies that an input field is read-
only.
• The input maxlength attribute specifies the maximum number of
characters allowed in an input field.
• The input multiple attribute specifies that the user is allowed to
enter more than one value in an input field.
• The multiple attribute works with the following input types: email,
and file.
HTML Input Attributes
• The input placeholder attribute specifies a short hint that describes the
expected value of an input field (a sample value or a short description
of the expected format).
• The input required attribute specifies that an input field must be filled
out before submitting the form. The required attribute works with the
following input types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.
• The input autofocus attribute specifies that an input field should
automatically get focus when the page loads.
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
HTML Input Attributes
• The input height and width <option value="Firefox">
attributes specify the height <option value="Chrome">
and width of an <input
type="image"> element. <option value="Opera">
• The input list attribute refers to <option value="Safari">
a <datalist> element that </datalist>
contains pre-defined options for
an <input> element. </form>
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet
Explorer">
• The input autocomplete attribute 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 starts to type in a field, the browser should display options
to fill in the field, based on earlier typed values.
• The autocomplete attribute works with <form> and the following
<input> types: text, search, url, tel, email, password,
datepickers, range, and color.
The Selected Element Examples

<!DOCTYPE html> <option


<html> value="volvo">Volvo</option>

<body> <option value="saab">Saab</option>

<h2>The select Element</h2> <option value="fiat">Fiat</option>

<p>The select element defines a drop- <option value="audi">Audi</option>


down list:</p> </select>
<form action="/action_page.php"> <input type="submit">
<label for="cars">Choose a </form>
car:</label> </body>
<select id="cars" name="cars"> </html>

You might also like