Web CH 2 - Part 3

HTML class
• The HTML class attribute is used to specify <!DOCTYPE html>

<html>
<!DOCTYPE html>
<html>
<head>
a class for an HTML element. <style> <head>
.city { <style>
• The Syntax For Class background-color: tomato;
color: white; .note {
font-size: 120%;
•
border: 2px solid black;
To create a class; write a period (.) character, margin: 20px;
padding: 20px;
color: red;
followed by a class name. Then, define the }
</style>
}
</style>
CSS properties within curly braces {}: </head>
<body> </head>
<body>
• The class name is case sensitive! <div class="city">
<h2>London</h2>
• Multiple HTML elements can share the <p>London is the capital of England.</p>
</div>
<h1>My <span class="note"
>Important</span> Heading
same class. <div class="city"> </h1>
<h2>Paris</h2> <p>This is
• The class attribute is often used to point to a <p>Paris is the capital of France.</p>
</div>
some <span class="note">i
mportant</span> text.</p>
class name in a style sheet and also be used <div class="city">
<h2>Tokyo</h2>
by a JavaScript to access and manipulate <p>Tokyo is the capital of Japan.</p> </body>
</div> </html>
elements with the specific class name.
</body>
</html>
2
Compiled By Aliazar D. (MSc in SEng)
Conti.. <!DOCTYPE html>
<html>
• Use of The class Attribute in
JavaScript
<head>
• The class name can also be
• Multiple Classes <style>
used by JavaScript to perform
.city {
✓ HTML elements can background-color: tomato;
certain tasks for specific
elements.
belong to more than color: white;
one class. padding: 10px;
• JavaScript can access elements
}
✓ To define multiple with a specific class name with
the getElementsByClassName()
classes, separate the .main { method:
text-align: center;
class names with a }
space, e.g. <div </style>
<script>
class="city main">. </head> function myFunction() {
The element will be <body> var x
styled according to all <h2>Multiple Classes</h2> = document.getElementsByClassNam

<h2 class="city main">Addis e("city");
the classes specified. Ababa</h2> for (var i = 0; i <
x.length; i++) {
<h2 x[i].style.display = "none";
class="city">Wolkite</h2> }
}
</body> </script>
</html>
Compiled By Aliazar D. (MSc in SEng) 3
HTML id <!DOCTYPE html>
<html>
• Difference Between Class and ID
✓ A class name can be used by
<head> multiple HTML elements, while an
• The id attribute specifies a <style> id name must only be used by one
unique id for an HTML #myHeader { HTML element within the page
element. background- <style>
/* Style the element with the id "myHeader" */
• The value of the id attribute color: lightblue; #myHeader {

background-color: lightblue;
must be unique within the color: black; color: black;

padding: 40px;
HTML document. padding: 40px; }

text-align: center;
• The id attribute is used to text-align: center; /* Style all elements with the class name "city"
*/
point to a specific style } .city {
background-color: tomato;
declaration in a style sheet. </style> color: white;
padding: 10px;
</head>
• It is also used by JavaScript to <body>
}
</style>
access and manipulate the 

<h1 id="myHeader">My <h1 id="myHeader">My Cities</h1>
element with the specific id. Header</h1> 
• The syntax for id is: write a </body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
hash character (#), followed </html> <h2 class="city">Paris</h2>
by an id name. Then, define <p>Paris is the capital of France.</p>
the CSS properties within <h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>
curly braces {}.

• The id name is case sensitive!
4
• Iframe - Remove the
HTML Iframes Border
• By default, an iframe has a
• Iframe - Target for a
• An HTML iframe is used to display Link
a web page within a web page. border around it. • An iframe can be used as
• The HTML <iframe> tag specifies • To remove the border, add the target frame for a link.
an inline frame and it is used to the style attribute and use the • The target attribute of the
embed another document within the CSS border property: link must refer to the name
current HTML document. <iframe src="iframe.htm attribute of the iframe:
• Syntax " style="border:none;" <iframe src=“index.htm
• <iframe src="url" title="Iframe
title="description"></iframe> l" name="iframe_a" tit
Example"></iframe> le="Iframe
• Iframe - Set Height and Width
• Use the height and width attributes Example"></iframe>
to specify the size of the iframe. <p><a href="https://ww
• The height and width are specified w.whu.edu.et" target="
in pixels by default: iframe_a">WKU</a></p>
<iframe src="iframe.htm" heigh ----------------------
t="200" width="300" title="Ifr Or you can add a style
ame Example"></iframe> (style="border:2px
(style="height:200px;width:300px;) solid red;“)
Title is used by screen readers to read!

5
HTML File Paths
• A file path describes the location • Relative File Paths
of a file in a web site's folder ✓ A relative file path points to a file
structure. relative to the current page
• File paths are used when linking
Path Description
to external files, like:
– Web pages <img src="picture.jpg"> The "picture.jpg" file is located in the same
– Images folder as the current page
– Style sheets
– JavaScripts <img src="images/picture.jpg"> The "picture.jpg" file is located in the
• Absolute File Paths images folder in the current folder
• An absolute file path is the full
URL to a file:
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the
<img
src="https://www.wku.edu.et/images/l images folder at the root of the current web
ogo.jpg" alt=“Logo">
or <img src="../picture.jpg"> The "picture.jpg" file is located in the folder
C:/Users/Aliazar/Desktop/Web one level up from the current folder
Design/PPT/Web Ch 2 - Part 3.pptx

HTML - The Head Element
• The HTML <head> element • The HTML <title> Element
is a container for the • The <title> element defines the title of the document. It
following elements: <title>, must be text-only, and it is shown in the browser's title
bar or in the page's tab.
<style>, <meta>, <link>, • The <title> element is required in HTML documents!
<script>, and <base>. • The page title is used by search engine algorithms to
• The <head> element is a decide the order when listing pages in search results.
container for metadata (data • The content of a page title is very important for search
engine optimization (SEO)!
about data) and is placed • The HTML <base> Element
between the <html> tag and • The <base> element specifies the base URL and/or
the <body> tag. target for all relative URLs in a page.
• HTML metadata is data • The <base> tag must have either an href or a target
about the HTML document. attribute present, or both.
• There can only be one single <base> element in a
• Metadata is not displayed. document!
• Metadata typically define <head>
<base href="https://www.wku.edu.et/" target="_blank">
the document title, </head>
<body>
character set, styles, scripts, <img src="images/wkulogo.jpg" width="24" height="39" alt=“logo">
</body>
and other meta information. (https://www.wku.edu.et/images/wkulogo.jpg)
7
Conti..
• The HTML <style> •
The HTML <link> • The HTML <meta> Element
• The <meta> element is typically used to specify
Element Element the character set, page description, keywords,
• The <style> • The <link> element author of the document, and viewport settings.
defines the relationship • The metadata will not be displayed on the page,
but is used by browsers (how to display content
element is used to between the current or reload page), by search engines (keywords),
define style document and an and other web services.
information for a external resource.
single HTML • The <link> tag is most
page: often used to link to
<style> external style sheets:
body {background- <link rel="styleshee
color: powderblue;} t" href="mystyle.css
h1 {color: red;} ">
p {color: blue;} UTF-8 is a character encoding system. It lets you represent characters as ASCII text,
while still allowing for international characters, such as Chinese characters.
</style>
HTML Computer Code Elements
• HTML contains several elements for defining user input and computer code.
• The HTML <kbd> element is used to define keyboard input. The content
inside is displayed in the browser's default monospace font. <p>Save the
document by pressing <kbd>Ctrl + S</kbd></p>
• The HTML <samp> element is used to define sample output from a
computer program.
• The HTML <code> element is used to define a piece of computer code.
The content inside is displayed in the browser's default monospace font.
• The HTML <var> element is used to define a variable in programming or
in a mathematical expression. The content inside is typically displayed in
italic.

HTML Semantic Elements
• A semantic element clearly describes its meaning to • HTML <section> Element

both the browser and the developer. • According to W3C's HTML documentation: "A section is a
• In HTML there are some semantic elements that thematic grouping of content, typically with a heading."
can be used to define different parts of a web page: • Examples of where a <section> element can be used:
o <article> ✓ Chapters, Introduction, News items, Contact
o <aside> information
o <details> • A web page could normally be split into sections for
o <figcaption> introduction, content, and contact information.
o <figure> • HTML <article> Element
o <footer> • The <article> element specifies independent, self-contained
o <header> content.
o <main> • An article should make sense on its own, and it should be
o <mark> possible to distribute it independently from the rest of the
o <nav> web site.
o <section> • Examples of where the <article> element can be used:
o <summary> ✓ Forum posts, Blog posts, User comments, Product
o <time> cards, Newspaper articles 10
Conti..
• HTML <header> Element • HTML <nav> Element
• The <header> element represents a container for • The <nav> element defines a set of navigation links.
introductory content or a set of navigational links. • The <nav> element is intended only for major blocks of
• A <header> element typically contains: navigation links.
o one or more heading elements (<h1> - <h6>) • HTML <aside> Element
o logo or icon • The <aside> element defines some content aside from
o authorship information the content it is placed in (like a sidebar).
• HTML <footer> Element • The <aside> content should be indirectly related to the
• The <footer> element defines a footer for a surrounding content.
document or section. • HTML <figure> and <figcaption> Elements
• A <footer> element typically contains: • The <figure> tag specifies self-contained content, like
▪ authorship information illustrations, diagrams, photos, code listings, etc.
▪ copyright information • The <figcaption> tag defines a caption for a <figure>
▪ contact information element. The <figcaption> element can be placed as the
▪ sitemap first or as the last child of a <figure> element.
▪ back to top links
▪ related documents
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code

listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
12
<time> Defines a date/time Compiled By Aliazar D. (MSc in SEng)
HTML Entities
Result Description Entity Entity
Name Number
• Some characters are reserved in HTML. non-breaking space
• Reserved characters in HTML must be < less than < <
replaced with character entities.
> greater than > >
• If you use the less than (<) or greater than (>)
signs in your text, the browser might mix & ampersand & &
them with tags. " double quotation " "

mark
• Character entities are used to display reserved
' single quotation ' '
characters in HTML. mark (apostrophe)
• A character entity looks like this: ¢ cent ¢ ¢
&entity_name;
£ pound £ £
OR
&#entity_number; ¥ yen ¥ ¥
• To display a less than sign (<) we must write: € euro € €
< or < © copyright © ©

® registered trademark ® ®
13
HTML Symbols
Char Number Entity Description
• Symbols that are not Char Number Entity Description
∀ ∀ ∀ FOR ALL

present on your © © © COPYRIGHT
∂ ∂ ∂ PARTIAL
keyboard can also be SIGN
DIFFERENTIAL
® ® ® REGISTERED
added by using SIGN
∃ ∃ ∃ THERE EXISTS
entities. € € € EURO SIGN
™ ™ ™ TRADEMARK
• To add such symbols ∅ ∅ ∅ EMPTY SETS
to an HTML page, ← ← ← LEFTWARDS
NABLA
ARROW ∇ ∇ ∇
you can use the ↑ ↑ ↑ UPWARDS ELEMENT OF
ARROW ∈ ∈ ∈
entity name or the
→ → → RIGHTWARDS
NOT AN ELEMENT
entity number (a ARROW ∉ ∉ ∉
OF
↓ ↓ ↓ DOWNWARDS
decimal or a ARROW
∋ ∋ &ni; CONTAINS AS
hexadecimal MEMBER
♠ ♠ &spades; BLACK SPADE
reference) for the SUIT
∏ ∏ ∏ N-ARY PRODUCT
symbol. ♣ ♣ &clubs; BLACK CLUB
SUIT
∑ ∑ ∑ N-ARY
♥ ♥ &hearts; BLACK HEART
SUMMATION
SUIT
♦ ♦ &diams; BLACK

DIAMOND SUIT Compiled By Aliazar D. (MSc in SEng) 14
HTML Emojis
• Emojis look like images, or icons, but they are not. Emoji
Dec
Value
Hex
• They are letters (characters) from the UTF-8 😀 128512 1F600
(Unicode) character set. 😁 128513 1F601
• The HTML charset Attribute 😂 128514 1F602
😃 128515 1F603
• To display an HTML page correctly, a web 😄 128516 1F604
browser must know the character set used in the 😅 128517 1F605
😆 128518 1F606
page. 😇 128519 1F607
• This is specified in the <meta> tag: 😈 128520 1F608
😉 128521 1F609
<meta charset="UTF-8"> 😊 128522 1F60A
• Emoji Characters 😋 128523 1F60B
😌 128524 1F60C
Emojis are also characters from the UTF-8 alphabet: 😍 128525 1F60D
✓ 😄 is 128516 😎 128526 1F60E
✓ 😍 is 128525 😏
😐
128527
128528
1F60F
1F610
✓ 💗 is 128151 😑 128529 1F611
😒 128530 1F612
😓 128531 1F613

HTML Forms
• An HTML form is used to collect • The <input> Element
✓ The HTML <input> element is the most
user input. The user input is most used form element.
often sent to a server for processing. ✓ An <input> element can be displayed in
• The <form> Element many ways, depending on the type
attribute.
✓ The HTML <form> element is
used to create an HTML form Type Description
for user input: <input type="text"> Displays a single-line text
<form> input field
. <input type="radio"> Displays a radio button (for

selecting one of many
form elements choices)
. <input type="checkbox"> Displays a checkbox (for
</form> selecting zero or more of
• The <form> element is a container many choices)
for different types of input elements, <input type="submit"> Displays a submit button
(for submitting the form)
such as: text fields, checkboxes, <input type="button"> Displays a clickable button
radio buttons, submit buttons, etc.
16
Conti..
<!DOCTYPE html>
<html>
<body>
Text Fields • The <label> Element <h2>Radio Buttons</h2>
✓ The <input type="text"> ✓ The <label> tag defines a <p> Choose your favorite Web
defines a single-line input field label for many form language:</p>
<form>
for text input. elements.
<!DOCTYPE html> <input type="radio" id="html" name
✓ The <label> element is ="fav_language" value="HTML">
<html> useful for screen-reader <label for="html">HTML</label><br>
<body> <input type="radio" id="css" name=
users. "fav_language" value="CSS">
<h2>Text input fields</h2> ✓ The for attribute of the <label for="css">CSS</label><br>
<form> <input type="radio" id="javascript
<label> tag should be equal " name="fav_language" value="JavaScr
<label for="fname">First to the id attribute of the ipt">
name:</label><br> <label for="javascript">JavaScript
<input> element to bind </label>
<input type="text" id="fname"
name="fname" value="Lazarus"><br> them together.
</form>
<label for="lname">Last </body>
name:</label><br> • Radio Buttons </html>
<input type="text" id="lname" • The <input type="radio">

name="lname" value="D."> defines a radio button.
</form> • Radio buttons let a user
</body> select ONE of a limited
</html> number of choices.

Conti.. • The Submit Button
✓ The <input type="submit">
• Checkboxes
defines a button for submitting
✓ The <input type="checkbox">
defines a checkbox. the form data to a form-handler.
✓ Checkboxes let a user select ✓ The form-handler is typically a
ZERO or MORE options of a file on the server with a script
limited number of choices. for processing input data. • The Name Attribute
<form>
<input type="checkbox" id="veh ✓ The form-handler is specified for <input>
icle1" name="vehicle1" value="Bi in the form's action attribute. • Notice that each input
ke"> <form action="/some.php">
<label for="vehicle1"> I have field must have a name
a bike</label><br> <label for="fname">First
name:</label><br>
attribute to be submitted.
<input type="checkbox" id="veh
icle2" name="vehicle2" value="Ca <input type="text" id="fname" • If the name attribute is
r"> name="fname" value=“Lazarus"><br omitted, the value of the
<label for="vehicle2"> I have
a car</label><br> > input field will not be
<input type="checkbox" id="veh <label for="lname">Last
icle3" name="vehicle3" value="Bo name:</label><br> sent at all.
at"> <input type="text" id="lname"
<label for="vehicle3"> I have
a boat</label> name="lname" value="D."><br><br> <form action="/some.php">
</form> <input type="submit" value="Su <label for="fname">First
bmit"> name:</label><br>
</form> <input type="text" id="f
name" name="fname" value="
John"><br><br>
<input type="submit" val
ue="Submit">
</form>
• More on GET: • The Autocomplete
HTML Form Attributes ✓ Appends the form data to the URL, in
name/value pairs
Attribute
The Action Attribute ✓ NEVER use GET to send sensitive data! ✓ The autocomplete
✓ The action attribute defines the action to (the submitted form data is visible in the attribute specifies whether
be performed when the form is submitted.
URL!) a form should have
✓ Usually, the form data is sent to a file on
the server when the user clicks on the ✓ The length of a URL is limited (2048
submit button. characters) autocomplete on or off.
✓ If the action attribute is omitted, the ✓ Useful for form submissions where a user ✓ When autocomplete is on,
action is set to the current page. wants to bookmark the result the browser automatically
The Target Attribute ✓ GET is good for non-secure data, like query
✓ The target attribute specifies where to strings in Google
complete values based on
display the response that is received after • More on POST: values that the user has
submitting the form.
✓ Appends the form data inside the body of entered before.
The Method Attribute
the HTTP request (the submitted form data • The Novalidate Attribute
✓ The method attribute specifies the HTTP
is not shown in the URL)
✓ POST has no size limitations, and can be ✓
method to be used when submitting the The novalidate attribute is
form data.
✓ The form-data can be sent as URL used to send large amounts of data. a boolean attribute.
variables (with method="get") or as ✓ Form submissions with POST cannot be ✓ When present, it specifies
HTTP post transaction (with bookmarked
method="post").
✓ Tip: Always use POST if the form data
that the form-data (input)
✓ The default HTTP method when should not be validated
submitting form data is GET. contains sensitive or personal information!
✓ Always use POST if the form data contains when submitted.
sensitive or personal information!
POST GETD. (MSc in SEng) 19

Compiled By Aliazar
• The <textarea>
HTML Form Elements • The <select> Element
✓ The <select> element defines a Element
drop-down list. ✓ The <textarea> element
The HTML <form> • The <input> Element ✓ The <option> elements defines defines a multi-line
element can contain ✓ The input element an option that can be selected.
one or more of the input field (a text area):
following form represents a typed data ✓ By default, the first item in the <textarea name="message"
elements: field usually associated drop-down list is selected. rows="10" cols="30">
✓ To define a pre-selected option, Web Design and
with a control that Programming.
add the selected attribute to the
<input> allows users to edit its option: </textarea>
<label> value. ✓ Use the size attribute to specify ✓ The rows attribute
<select> • The <label> Element the number of visible values. specifies the visible
<textarea> ✓ The <label> element ✓ Use the multiple attribute to number of lines in a text
<button> defines a label for allow the user to select more than area.
<fieldset> several form elements. one value. (Hold down the Ctrl ✓ The cols attribute
<legend> ✓ The for attribute of the (windows) / Command (Mac) specifies the visible
button to select multiple options.)
<datalist> <label> tag should be <label for="cars">Choose a width of a text area.
<output> equal to the id attribute car:</label>
<option> of the <input> element <select id="cars" name="cars“
size="3" multiple >
<optgroup> to bind them together. <option value="volvo"
selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

• The <output> Element
Conti.. <form action="/action_p
age.php">
<fieldset>
• The <datalist> Element
✓ The <datalist> element ✓ The <output> element
represents the result of a
• The <button> Element specifies a list of pre-defined
<legend>Personalia: calculation (like one
✓ The <button> element </legend>
options for an <input>
defines a clickable button: element. performed by a script).
<label for="fname"> <form action="/action_page.php"
<button type="button" onc First name:</label><br> ✓ Users will see a drop-down oninput="x.value=parseInt(a.value)+p
arseInt(b.value)">
lick="alert('Hello <input type="text" list of the pre-defined 0
<input type="range" id="a" name="a"
World!')">Click id="fname" name="fname" options as they input data. value="50">
Me!</button> value="Lazarus"><br> ✓ The list attribute of the 100 +
<input type="number" id="b" name="b"
• The <fieldset> and <label for="lname"> <input> element, must refer value="50">
Last name:</label><br> to the id attribute of the =
<legend> Elements <output name="x" for="a b"></output>
<input type="text"
✓ The <fieldset> element is <datalist> element. <br><br>
id="lname" name="lname" <input type="submit">
used to group related data in a value="D."><br><br> <form action="/action_page.php"> </form>
<input list="browsers">
form. <input type="submit <datalist id="browsers">
<option value="Internet Explorer">
✓ The <legend> element " value="Submit"> <option value="Firefox">
defines a caption for the </fieldset> <option value="Chrome">
</form> <option value="Opera">
<fieldset> element. <option value="Safari">
</datalist>
</form>
Selection vs Datalist
Generally, both the tags are used for choosing an option from
the given list. But the main difference between both is that in
the <datalist> tag the user can enter its own input and add that
as an option with the help of the <input> element whereas the
<select> tag doesn't provide this feature.
21
•
HTML Input Types • Input Type Checkbox
✓ <input type="checkbox"> ✓
Input Type Email
The <input
• Input Type Text type="email"> is
• defines a checkbox.
Here are the different ✓ <input type="text">
input types you can use in • Input Type Button used for input fields
defines a single-line text
HTML: ✓ <input type="button"> that should contain
input field.
•<input type="button"> defines a button. an e-mail address.
•<input type="checkbox"> • Input Type Password
• Input Type Color • Input Type Image
•<input type="color"> ✓ <input type="password">
✓ The <input type="color"> ✓ The <input
•<input type="date"> defines a password field type="image">
is used for input fields that
•<input type="datetime-local">• Input Type Submit defines an image as
•<input type="email"> should contain a color.
✓ <input type="submit">
•<input type="file"> • Input Type Date a submit button.
defines a button for
•<input type="hidden"> ✓ The <input type="date"> • Input Type File
submitting form data to a
•<input type="image"> is used for input fields that ✓ The <input
form-handler.
•<input type="month"> should contain a date. type="file"> defines
•<input type="number"> • Input Type Reset
• Input Type Datetime- a file-select field
•<input type="password"> ✓ <input type="reset">
local and a "Browse"
•<input type="radio"> defines a reset button that
• The <input button for file
•<input type="range"> will reset all form values uploads.
•<input type="reset"> type="datetime-local">
to their default values.
•<input type="search"> specifies a date and time • Input Type Month
• Input Type Radio
•<input type="submit"> input field, with no time • The <input
✓ <input type="radio"> type="month">
•<input type="tel"> zone.
defines a radio button.
•<input type="text"> allows the user to
•<input type="time"> select a month and
•<input type="url"> year.
•<input type="week">
Conti..
• Input Type Number
• The <input type="number"> defines a numeric input field.
• Input Type Range
✓ The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control).
• Input Type Search
✓ The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
• Input Type Tel
✓ The <input type="tel"> is used for input fields that should contain a telephone
number.
• Input Type Time
✓ The <input type="time"> allows the user to select a time (no time zone).
• Input Type Url
✓ The <input type="url"> is used for input fields that should contain a URL
address.
• Input Type Week
23
✓ The <input type="week"> allows the user to select a week and year. Compiled By Aliazar D. (MSc in SEng)
HTML Input Attributes
• The value Attribute • The multiple Attribute • The step Attribute
✓ The input multiple attribute ✓ The input step attribute specifies
✓ The input value attribute specifies an
initial value for an input field. specifies that the user is allowed the legal number intervals for an
to enter more than one value in an input field.
• The readonly Attribute
input field. • The autofocus Attribute
✓ The input readonly attribute specifies ✓ The multiple attribute works with ✓ The input autofocus attribute
that an input field is read-only.
the following input types: email, specifies that an input field should
• The disabled Attribute and file. automatically get focus when the
✓ The input disabled attribute specifies • The input pattern attribute page loads.
that an input field should be disabled. ✓ Specifies a regular expression that ✓ The height and width
• The size Attribute the input field's value is checked Attributes
✓ The input size attribute specifies the against, when the form is • The input height and width
visible width, in characters, of an input submitted. attributes specify the height and
field. The default value for size is 20. ✓ The pattern attribute works with width of an <input
• The maxlength Attribute the following input types: text, type="image"> element.
✓ The input maxlength attribute specifies date, search, url, tel, email, and • The list Attribute
the maximum number of characters password. ✓ The input list attribute refers to a
allowed in an input field. • The placeholder Attribute <datalist> element that contains
• The min and max Attributes ✓ The input placeholder attribute pre-defined options for an
• The input min and max attributes specifies a short hint that <input> element.
specify the minimum and maximum describes the expected value of an • The autocomplete Attribute
values for an input field. input field (a sample value or a ✓ The input autocomplete attribute
• The min and max attributes work with short description of the expected specifies whether a form or an
the following input types: number, format). input field should have
range, date, datetime-local, month, time
and week. autocomplete on or off.
24
HTML Input form* Attributes
• The input form attribute
✓ Specifies the form the <input> element belongs to.
✓ The value of this attribute must be equal to the id attribute of the <form> element it
belongs to.
• The formaction Attribute
✓ The input formaction attribute specifies the URL of the file that will process the input
when the form is submitted.
• The formenctype Attribute
✓ The input formenctype attribute specifies how the form-data should be encoded when
submitted (only for forms with method="post").
• The formmethod Attribute
✓ The input formmethod attribute defines the HTTP method for sending form-data to the
action URL.
• The formnovalidate Attribute
✓ The input formnovalidate attribute specifies that an <input> element should not be
validated when submitted.
• The novalidate Attribute
✓ The novalidate attribute is a <form> attribute.

THE END!!

Web CH 2 - Part 3

Uploaded by

Copyright:

Available Formats

You might also like

Web CH 2 - Part 3

Uploaded by

Document Information

Original Description:

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

Web CH 2 - Part 3

Uploaded by

Copyright:

Available Formats

HTML class

• The HTML class attribute is used to specify <!DOCTYPE html>

styled according to all <h2>Multiple Classes</h2> = document.getElementsByClassNam

• The value of the id attribute color: lightblue; #myHeader {

must be unique within the color: black; color: black;

HTML document. padding: 40px; }

access and manipulate the

hash character (#), followed </html> <h2 class="city">Paris</h2>

by an id name. Then, define <p>Paris is the capital of France.</p>

the CSS properties within <h2 class="city">Tokyo</h2>

curly braces {}.

Title is used by screen readers to read!

Compiled By Aliazar D. (MSc in SEng) 6

Compiled By Aliazar D. (MSc in SEng) 9

• A semantic element clearly describes its meaning to • HTML <section> Element

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations, diagrams, photos, code

them with tags. " double quotation &quot; &#34;

&lt; or &#60; © copyright &copy; &#169;

∀ &#8704; &forall; FOR ALL

♦ &#9830; &diams; BLACK

Compiled By Aliazar D. (MSc in SEng) 15

. <input type="radio"> Displays a radio button (for

<input type="text" id="lname" • The <input type="radio">

Compiled By Aliazar D. (MSc in SEng) 17

POST GETD. (MSc in SEng) 19

Compiled By Aliazar D. (MSc in SEng) 20

Compiled By Aliazar D. (MSc in SEng) 25

Compiled By Aliazar D. (MSc in SEng) 26

You might also like

them with tags. " double quotation " "

< or < © copyright © ©

∀ ∀ ∀ FOR ALL

♦ ♦ &diams; BLACK