So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 91
Chapter 8 — CSS Positioning and Background Images
Exercises
Word Search
b b a
Free t a e p p r o u n d p o t u
p a a b e l f k n p n c e n a y p
eBook
n r c c r k e p a o c n o o c s p
a d n k k g e - e d b u a - a r o
s c e e g g e a r a a y a r a e r
y a d c - r r r e p e a t e t p e
e p s k f c o o b a r r d p p e p
e a a a s - c u u n a e - e y a e
a - b b u p g r n n k e d a p t a
Edition
o s e s o e a p u d d r o t a - t
i e e o u p e c t o - - e c c y -
e d a l - f c o e r c r i t n f x
d o a u g l a e y t p l e m r e l
e a t t s o g u r a r p e p a e e
a e a e e a e o p u o c u a e g c
Please support this work at
p k l s t t x d t a t a t d r a e
d t r i b - p o r l m g e u e a t
absolute, background-image, background-repeat, clear, float,
http://syw2l.org
no-repeat, repeat, repeat-x, repeat-y, round, space
Problems
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 92
Chapter 9 – The CSS Grid
Free
Chapter 9 – The CSS Grid
The CSS grid allows the designer to lay the page, or an element on the page, into regions. These
regions are logically arranged in rows and columns. The grid allows for flexibility and for truly
eBook
102
responsive formatting.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
apply the grid display to an element,
•
Edition
add a gap between grid elements,
•
create a page with nested grids,
•
span multiple grid cells with a single element,
•
use the new "fr" unit to divide up the unused part of a grid.
•
Please support this work at
Creating a Simple Grid
http://syw2l.org
To create a grid layout on an element you must first change the display to grid, using the
display: grid; style. In the example the grid was placed on the body element, but it may
be placed on virtually any element. Once the element has been told to display as a grid, the
Free
columns and optionally the rows need to be defined.
In the CSS below we are only defining the columns, by using the grid-template-
103
columns: dimensions; style. There are three dimensions, representing the three
columns. The first you see that I have defined three columns by placing three dimensions. The
first column has a fixed dimension and the second and third column are of a special grid unit of
fr or fraction. The width of a fractional column is the total unallocated width times this fraction
eBook
divided by the total of the fractions. There are a total of three fractions so the second column is
1/3 of the unallocated space and the second one is 2/3 of the remaining space. 104
The grid-gap: rowgap columngap; style is also applied and adds spacing between the
columns and rows. If you only specify one dimension it will be applied to both the columns and
Edition
102 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
103 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
104 https://mozilladevelopers.github.io/playground/css-grid/04-fr-unit/
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 93
Chapter 9 – The CSS Grid
105
rows.
Free
The last new CSS style in this example is grid-column: start / end; which tells the
grid layout to place an element in a specific column or columns. The first column is number 1
and the last column is one more than the column you want to fill. You can see the
<header>...</header> is defined with a grid-column: 1/4; that tells the grid to
spread the header across columns 1, 2, and 3.
106
eBook
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Grid Layout</title>
Edition
<link href="grid0.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Simple 3 Column Grid Layout</h1>
</header>
<div>div 1</div>
Please support this work at
<div>div 2</div>
<img src="greenguy.png" alt="smile">
<div> div 3</div>
<p>This grid element contains a paragraph of text. This paragraph
http://syw2l.org
will wrap and fill the grid.</p>
<article>
<p>Another paragraph of text in a grid element. If you wanted
multiple paragraphs of text in a single cell then they would
Free
need to be contained in an article or some other flow
element.</p>
<p>Second sentence in the article, in a cell. Remember that a
paragraph can not be inside another paragraph.</p>
</article>
<footer>
<small>Demo of Grid Layout</small>
</footer>
</body>
</html> eBook
/* grid0.css - simple grid layout */
body {
Edition
display: grid;
105 https://developer.mozilla.org/en-US/docs/Web/CSS/gap
106 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 94
Chapter 9 – The CSS Grid
grid-template-columns: 50px 1fr 2fr;
Free
grid-gap: 5px 10px;
}
header {
border: 3px solid blue;
grid-column: 1/4;
}
article {
eBook
border: 2px solid red;
}
div {
border: 2px solid black;
}
p {
background-color: yellow;
}
Edition
footer {
border: 3px solid green;
grid-column: 1/4;
}
Please support this work at
http://syw2l.org
Free
eBook
Illustration 28: Simple 2 Column Grid Layout
Defining Rows
Edition
In the first example you saw that we defined a grid of columns and then had elements that
spanned multiple columns. We can also define rows of a grid and give them heights. This is done
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 95
Chapter 9 – The CSS Grid 107
with the grid-template-rows: dimensions; style. It was said earlier, that a grid
Free
may be applied to elements other than the <body>..</body>. In the following example there
are actually three grids: 1) the <body>..</body> is divided into three rows with heights
defined, 2) the <header>..</header> is divided into two columns, and 3) the
<main>...</main> is also divided into two columns (but differently than the header).
eBook
Edition
Please support this work at
Illustration 29: Layout of the Three Grids
http://syw2l.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title> Free
<link href="grid1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>My Page with Lots of Grids</h1>
<img src="greenguy.png" alt="logo">
</header> eBook
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> Edition
107 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 96
Chapter 9 – The CSS Grid
</main>
Free
<footer>
<small>© 2020 The SYW2L Project
<a href="http://www.syw2l.org"> http://www.syw2l.org
</a></small>
</footer>
</body>
</html>
eBook
body {
display: grid;
grid-template-rows: 4em 1fr 2em;
} gap: 5px;
Edition
main {
display: grid;
grid-template-columns: 3em 1fr;
}
header {
display: grid;
grid-template-columns: 1fr 50px;
background-color: #ffc0c0;
Please support this work at
border-bottom: 3px groove #800000;
}
div {
border: 1px solid black;
} http://syw2l.org
footer {
background-color: #c0c0ff;
Free
border-top: 3px groove #000080;
}
eBook
Edition
Illustration 30: Second Grid Example - Multiple Grids
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 97
Vocabulary
Free • • rows
columns
•
fraction
template
•
grid
•
Exercises
eBook
Word Search
p f i c t l c w r
l r p t r t a s l
c a l r m s r t r
r c a c p r c r t
i t l g l o s i w
d i s r a w o m o
u o o
Editioni t s l s a
a n s d e s r l m
Please support this work at
g s c o l u m n s
columns, fraction, grid, rows, trmplate
http://syw2l.org
Problems
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 98
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
Free
Chapter 10 — More CSS Selectors to Give Your Style
Sheet Surgical Precision
In the style sheets we have created, so far, we have used the tag selector, the id selector, the class
selector, the descendant combinator, and the :nth-child(n) pseudo class. In this chapter we will
review those CSS selectors and show several of the most commonly used ones.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapte
eBook r and assignments found at the end, a student
should be able to:
Edition
Create CSS that includes the tag, id, and class selectors,
•
use combinators to select elements within elements,
•
use the universal selector to select all elements in a page or a combintor expression,
•
create selection rules that use other attributes beyond id or class,
•
use simple pseudo selectors.
•
Please support this work at
Selectors
A selector is used to tell the web browser to apply a style to an HTML element or group of
elements. There are four selectors that we commonly use: 1) the universal selector; 2) the HTML
http://syw2l.org
tag selector; 3) the class selector; and 4) the id selector.
The Universal Selector
* — everybody (the universal selector) 108 Free
Apply this CSS to every element on the page. It is commonly used with combinators, attribute
selectors, and with pseudo classes that are to be applied to the entire page.
eBook
The Tag Selector
tag — all tags of a specific type 109
Edition
108 https://www.w3.org/TR/selectors-3/#universal-selector
109 https://www.w3.org/TR/selectors-3/#type-selectors
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 99
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
The Class Selector
Free
.class — class selector — apply the style to all the tags that have the same class defined as an
110
attribute.
On the HTML tag we define a class or classes using an attribute like: class="group" or
class="first second"
eBook 111
You may specify multiple class names on a tag by separating then with a space.
Class names are case sensitive and should start with a letter and contain letters, numbers, dashes,
112
and underscores.
The ID Selector
Edition 113
#id — id selector — find the tag with the specified id attribute
<!DOCTYPE html>
Please support this work at
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link href="simple_selectors.css" rel="stylesheet" type="text/css">
</head> http://syw2l.org
<body>
<h1>This page shows the simple CSS selectors at work.</h1>
Free
<section>
<h2>Page section one</h2>
<p class="happy">This is a paragraph that belongs to the
happy class.</p>
</section>
<section>
<h2 class="happy">Page section two</h2>
<p>This is a paragraph that has <em id="cheese">Cheddar</em>
on the side.</p>
</section> eBook
</body>
</html>
Edition
110 https://www.w3.org/TR/selectors-3/#class-html
111 http://www.w3schools.com/tags/att_global_class.asp
112 http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
113 https://www.w3.org/TR/selectors-3/#id-selectors
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 100
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
Free
/* simple_selectors.css - Sample CSS Sheet for Simple Selectors */
/* make everything blue */
* {
} color: blue;
eBook
/* set the h2 tags white on blue */
h2 {
color: white;
background-color: blue;
}
/* give the happy class a yummy background */
Edition
.happy {
background-color: tomato;
}
/* set id cheese to orange */
#cheese {
color: orange;
Please support this work at
}
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 101
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
Free
eBook
Edition
Please support this work at
Illustration 31: Simple CSS Selectors
http://syw2l.org
Cascading
In the example above you will notice that the "Page section two" heading has the "happy"
Free
background. This is because, if an element has more than one style that may apply the more
specific style will be applied and may overwrite style from less specific styles.
Combinators
eBook
A combinator allows for selectors to be combined to help zero in on a specific tag or group of
tags. This introduction will cover five of the most common combinators.
This and That Combinator
Edition
selector_one, selector_two ... (Comma) — apply the same style for multiple
elements. It is really just a shortcut to keep from having the style repeated when it is used in
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 102
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
114
more than one place.
Free
Descendant Combinator
selector_one selector_two ... (Space) — select all of selector_two inside
selector_one. May be embedded anywhere within elements parent elements. 115
eBook 116
Adjacent Sibling Combinator
selector_one + selector_two ... (plus) — find the selector_two directly after
selector_one at the same level. Siblings not children.
Edition 117
General Sibling Combinator
selector_one ~ selector_two ... (tilde) — find the selector_two sibling(s) that
follows selector_one at the same level. The siblings do not have to be adjacent, just follow.
Direct Children Combinator
Please support this work at
selector_one > selector_two ... (greater than) — select all selector_two children
inside selector_one. This only gets direct children and not children of children. 118
http://syw2l.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Combinators</title> Free
<link href="combinators.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This page shows the CSS combinators at work.</h1>
eBook
<section class="bignews">
<h2>Page section one</h2>
<p>This is a paragraph that belongs to a <b>bignews</b>
section.</p>
<section>
<h3>Inside section one</h3>
114 https://www.w3.org/TR/selectors-3/#grouping
Edition
115 https://www.w3.org/TR/selectors-3/#descendant-combinators
116 https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators
117 https://www.w3.org/TR/selectors-3/#general-sibling-combinators
118 https://www.w3.org/TR/selectors-3/#child-combinators
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 103
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
<p>Inside <b>paragraph</b>.</p>
Free
</section>
</section>
<section>
<h2>Page section two</h2>
<p>This is a paragraph that has <em id="cheese">Cheddar</em>
on the side.</p>
</section>
eBook
<section>
<h2>first one</h2>
<h3>adjacent sibling</h3>
<p>Paragraph with <b>two</b> heads.</p>
</section>
</body>
Edition
</html>
/* combinators.css - Sample CSS Sheet for Common Combinators */
/* this or that - apply to multiple selectors */
/* comma */
h1, em {
Please support this work at
font-family: script;
}
/* descendant - apply to selector within */
http://syw2l.org
/* apply to all <b> tags in the class happy */
/* whitespace */
.bignews b {
color: white;
background-color: red;
} Free
/* adjacent sibling */
/* plus */
h2 + h3 {
border-bottom: 5px solid black;
}
/* general sibling */ eBook
/* tilde */
h1 ~ section {
border: 2px groove grey;
}
Edition
/* direct children */
/* greater than */
section > section {
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 104
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
border: 4px outset green;
Free
margin: 5px;
}
eBook
Edition
Please support this work at
http://syw2l.org
Illustration 32: CSS Combinators
Free
Attribute Selectors
Attribute selectors modify add additional refinement to the selectors above. They allow us to not
only select items by tag, class, or id but also by attributes that the tag may have. Follow a
119
eBook
selector with a set of square braces. Inside the braces place an attribute name to test if the
element has the attribute (with any value); or an expression to test the specific value of the
attribute.
selector[attribute] — Select if the element has the attribute.
Edition
selector[attribute=value] — Select if the element has the attribute with a specific
value.
119 https://www.w3.org/TR/selectors-3/#attribute-selectors
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 105
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
selector[attribute*=value] — Select if the element has the value one or more times
Free
anywhere in the attribute.
There are more attribute selectors, that allow for more complex selection rules, but these are
common. For more information follow the links in the footnotes to this section.
eBook
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Attribute Selector</title>
<link href="attribute_selector.css" rel="stylesheet" type="text/css">
</head>
<body>
Edition
<h1>Attribute Selector</h1>
<ul>
<li><label for="username">Name:</label>
<input type="text" name="username" required>
</li>
<li><label for="color">Favorite Color:</label>
<select name="color" id="color_select" required>
Please support this work at
<option value="R">Red</option>
<option value="O">Orange</option>
<option value="Y">Yellow</option>
<option value="G">Green</option>
http://syw2l.org
<option value="B">Blue</option>
<option value="I">Indigo</option>
<option value="V">Violet</option>
<option value="X">Do Not Wish to Answer</option>
</select>
</li>
<li><label for="Comment">Comment:</label> Free
<textarea name="comment"></textarea>
</li>
</ul>
</body>
eBook
</html>
/* attribute_selector.css - Sample CSS Sheet for Attribute Selectors */
ul {
list-style: none;
Edition
}
label {
display: inline-block;
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 106
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
width: 10em;
Free
}
/* put a bold border around required fields */
*[required] {
border: 5px groove black;
}
eBook
option[value="R"] {
color: red;
}
option[value="O"] {
} color: orange;
Edition
Please support this work at
http://syw2l.org
Free
Illustration 33: Attribute Selector
Pseudo-classes
eBook
120
Pseudo means false. These special selectors are typically added to the end of a simple selector
121
(class, id, tag, or universal) to create special behavior. As an example, we can change the style
of an element based on whether the mouse pointer is hovering over an element.
Edition
120 http://dictionary.reference.com/browse/pseudo
121 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 107
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
:hover — apply this style to the element when the mouse pointer is over the
122
•
Free
element.
123
:link — for anchors (<a>) apply this style if it is a clickable link.
•
:visited — for anchors (<a>) apply this style if we have visited the link.
•
:nth-child(n) — one of many of the "Structural Pseudos" but very common.
124
•
eBook
Usually used for pretty table and list formatting. This was seen in the previous chapter on
tables.
:checked — apply this style when the element is checked
125
•
126
• selector_1:not(selector_2) — Negation — selector_1 but not selector_2.
Edition
The selector in the not expression must be a simple selector
Advanced Topics for Exploration
We did not cover all of "The 30 CSS Selectors you Must Memorize" by Jeffery Way as we
could have but… 127
Please support this work at
CSS name spaces.
http://syw2l.org
Vocabulary
• adjacent sibling selector • hover
• attribute selector • id selector Free
• checked • link
• class selector • not
• combinator • nth-child
• descendant combinator • pseudo class
tag selector
• direct children combinator • eBook
• general sibling combinator • this and that combinator
122 https://www.w3.org/TR/selectors-3/#useraction-pseudos
123 https://www.w3.org/TR/selectors-3/#link
124 https://www.w3.org/TR/selectors-3/#structural-pseudos
125 https://www.w3.org/TR/selectors-3/#UIstates
126 https://www.w3.org/TR/selectors-3/#negation Edition
127 https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 108
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision
universal selector
visited
•
•
Free
Exercises
Word Search
eBook
d g s t a o l u d a l s - u d s
a i e a h e u n i v e r s a l h
t p r n c i n a s s t i h n e e
n s s e e o s t t r g h o v t d
o e l e c r m h t l n v v c e
s u n g s t a b a - r r e t l t
r d d v c e l i n c i r n a i
Edition
i o i i h l c n d h b t s g
n k s i t i e h s a i u s e
u c h i n o t e c i i t t l t e
l i t l i n k c t l b o h d e
t a d e c e l d e m o d l r a s
i s l d e s i r c e o r r i e t
Please support this work at
v s d e s c e n d a n t c e n
a d j a c e n t s i b l i n g
n a l n a c c h e c k e d r c
http://syw2l.org
adjacent sibling, attribute, checked, class, descendant, direct
children, general sibling, hover, id, link, not, nth-child,
pseudo class, selector, tag, this and that, universal, visited
Free
Problems
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 109
Chapter 11 — Responsive CSS
Free
Chapter 11 — Responsive CSS
When creating a Web site, we must be sure that anybody on any device can use it efficiently and
easily. How many times have you gone to site on your phone or tablet and found a site difficult
to read or navigate, because of the screen size. This chapter will show how to use media queries
to make the same page, with the same CSS file, work for multiple devices. There techniques will
eBook
also allow for people with visual and other limitations to fully use your site.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
Edition
explain the need for different display of pages on different devices,
•
recall the four standard types of devices used in media queries,
•
create media rules for the four standard types of devices,
•
create media rules, that use the device's width, to display a page on many different
•
screens,
recall the approximate width, in pixels, of common screened devices.
•
Please support this work at
Media Types
http://syw2l.org
Web sites can be displayed on several different devices. Each unique type of device has been
128
given a media type. The 4 standard media type are:
Free
• all – all media types,
• screen – screens like the PC screen or smartphone screen,
• print – printed pages,
• speech – text reading software.
eBook
Different CSS for Different Media
We can use the media types with the @media CSS at-rule to only apply part of a style sheet to a
page, based upon the device that it is being shown on. In future sections we will add additional
rules to the @media that define specific features (sizes and orientations) of the device.
Edition
In the example CSS below we see three @media rules with braces. Inside each set of braces are
128 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 110
Chapter 11 — Responsive CSS
CSS selectors and style. You can think of this as three different sets of rules; 1) the all rule is
Free
applied to all media types; 2) the screen rule is combined with all and applied when the page
is shown in a browser; and 3) the print rule is also combined with all and applied when the
page is printed.
In the @media: print rule we see that much of the formatting is not used and that the
<nav>...</nav> ha not displayed when the page is printed.
eBook
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Rules</title>
Edition
<link href="media.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Page with media rules.</h1>
</header>
<nav>
Please support this work at
<a href="bogus1">Bogus Link 1</a>
<a href="bogus2">Bogus Link 2</a>
<a href="bogus3">Bogus Link 3</a>
<a href="bogus4">Bogus Link 4</a>
http://syw2l.org
</nav>
<p>Uronor iecamu oben kuli honef ogenatir! Amudisat regire
cenohos demihe ere ototemo? Olele use tin sapi rierusi nieyasu
pif. Busel iepisim rusap aradac ber.</p>
Free
<p>Salegu pirol teto. Huridat tona roko erimi riko ma momegi
sirato. Rase minase mopara tabis domes berehul. Lenile donil
uropes? Paleg re nunulab lilur def dopo cehit. Rav desen ritol
meva rarabie lomita equn. Hopow hon ret sokapor eberi noru.</p>
<footer>
<small>Page with media rules C) 2020 SYW2L</small>
</footer>
</body>
</html> eBook
@media all {
body {
font-family: Arial, sans-serif;
}
header {
border-bottom: 3px groove black;
} Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 111
Chapter 11 — Responsive CSS
footer {
Free
border-top: 3px groove black;
}
}
@media screen {
body {
background-color: #e0e0ff;
eBook
color: #000030;
}
nav {
float:left;
display: grid;
grid-template-rows: 1fr;
margin-right: 5px;
}
Edition
footer {
clear: left;
}
}
@media print {
nav {
Please support this work at
display: none;
}
}
http://syw2l.org
Free
eBook
Illustration 34: Page with Media Rules - Screen
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Illustration 35: Page with Media Rules -
Printed
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 112
Chapter 11 — Responsive CSS
Media Features (@media with Sizes)
Free
We can create additional rules that include ranges of screen sizes and orientations to change the
presentation. These responsive rules allow for a single HTML page to be displayed on a variety
of devices and still look great.
Because of the huge variety of devices, it is impossible to target our pages to each and every one
eBook
of them. With this in mind, we can think about screens based upon their width, and define our
CSS accordingly.
It is recommended that we design our page "Mobile First". You may find it easier to start your
CSS layout for the smallest devices. Once you are satisfied, you can add a break-point (@media
rule) for the tablet and then one for the PC screen.
Edition
So how big, in pixels, are most devices? The Twitter's Bootstrap 3 library has a list of common
129
sizes and gives a good starting place.
Device
Size
320px
iPhone with Retna display
480px
Please support this work at
extra small device, usually a smartphone
small devices, tablets
768px
992px medium devices, big tablets or small desktops
http://syw2l.org
1200px large devices, like desktops
larger than 1200px very large devices
Free
eBook
Edition
129 https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Illustration 36: Common Screen Sizes
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 113
Chapter 11 — Responsive CSS
Free
There are many different ways to add sizing to your @media rule, but the easiest is with the and
operator. The rule @media screen and (width >= 400px) { } will be applied to
screens 400 or more pixels wide. Sizing of screen units should be specified in px or em units.
Using em may work better for accessibility issues when the used has expanded the text size.
eBook 130
In the Media Queries Level 4 there are dozens of attributes you may use. These include:
height, width, aspect-ratio, resolution, and screen orientation. This
introduction is only going to show how to use width media rule, but there is extensive
documentation on the use of other rules.
Edition
The next three style sheets show the development of a Web page that will display nicely on a
phone, a tablet, and a desktop screen. All of them use the following HTML.
<!DOCTYPE html>
<html lang="en">
Please support this work at
<head>
<meta charset="utf-8">
<title>Media Rules</title>
<link href="adapt.css" rel="stylesheet" type="text/css">
</head>
<body> http://syw2l.org
<header>
Free
<h1>Page for Many Devices</h1>
<nav>
<a href="http://www.renejm.net">RENEJM</a>
<a href="http://www.basicbook.org">BASIC Book</a>
<a href="http://www.shawnee.edu">Shawnee State</a>
</nav>
</header>
eBook
<section>
<h2>Stuff</h2>
<p>Renuv enikoyi cane libeti roheri nito go naret; yese
ragop erenusi gilire ciseh sicip cesopet tol acas! Pasetes
konec nucit. Manam ba la fenefob umetel re cikuc periyu.
Redim dierac sonen tet gelir peco ecolok esac sa, he citerov
rupa etaro.</p>
<aside>
Edition
<h3>Redim dierac.</h3>
<ul>
130 https://developer.mozilla.org/en-US/docs/Web/CSS/@media
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 114
Chapter 11 — Responsive CSS
<li>Gec etomieyo vegetut.</li>
Free
<li>Sicip cesopet tol.</li>
<li>Cegir ulerena mitadad.</li>
</ul>
</aside>
<p>Asecuso aqu cegir ulerena mitadad ganacel eripey cacelef.
Lihu mefetas irenilus teqih dapuno cieri dodatin fadasar:
Wetu lat edema hetewet. Erarec gec etomieyo vegetut nesene,
eBook
dihalo tipeh zelasu pak lerefal tisu uceripon ipay gocane:
Cet men xin hesid tisigied ahaceyi: Be temeteh iyiqi cad te.
</p>
</section>
<footer>
<p id="footerfirst"><small>© 2020 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
Edition
<p id="footersecond">Responsive Style Demo</p>
</footer>
</body>
</html>
Please support this work at
The first version of the "adapt.css" file is for narrow devices like smartphones.
/* adapt.css - Sample CSS Sheet for Media – VERSION 1*/
@media screen { http://syw2l.org
/* Default CSS for the Narrow Screens */
header {
background-color: #d0d0ff;
border-bottom: 5px solid blue;
} Free
header a:hover {
background-color: white;
}
aside {
border: 3px solid green;
background-color: #f0fff0;
} eBook
footer {
border-top: 5px solid blue;
}
header h1 {
color: #000080;
} Edition
header a {
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 115
Chapter 11 — Responsive CSS
display: block;
Free
margin: 5px 10px;
background-color: #c0c0c0;
border: 3px groove #7f7f7f;
}
#footerfirst {
} display: block;
eBook
}
Edition
Please support this work at
http://syw2l.org
Free
Illustration 37: Page for
Many Devices - Phone
In the second version of the CSS we will add a media rule to display the page on a tablet. You
can see that we do not copy the previous style, but change the elements that we want to be
eBook
different.
/* adapt.css - Sample CSS Sheet for Media – VERSION 2*/
@media screen {
/* Default CSS for the Narrow Screens */
Edition
header {
background-color: #d0d0ff;
border-bottom: 5px solid blue;
}
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 116
Chapter 11 — Responsive CSS
header a:hover {
Free
background-color: white;
}
aside {
border: 3px solid green;
background-color: #f0fff0;
}
footer {
eBook
border-top: 5px solid blue;
}
header h1 {
color: #000080;
}
header a {
display: block;
Edition
margin: 5px 10px;
background-color: #c0c0c0;
border: 3px groove #7f7f7f;
}
#footerfirst {
display: block;
}
Please support this work at
}
@media screen and (width > 480px) {
/* small devices - includes touch screens on tablets */
http://syw2l.org
header a {
display: inline-block;
width: 20%;
padding: 0px 5% 0px 0px;
}
aside {
margin: 0px 0px 0px 20%; Free
}
footer {
clear: both;
}
#footerfirst {
float: left;
} eBook
#footersecond {
float: right;
}
}
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 117
Chapter 11 — Responsive CSS
Free
eBook
Edition
Illustration 38: Page for Many Devices - Tablet
In the third version of the CSS you will see that we have added a new rule for wide screens. Only
changing or overwriting the styles that are different.
Please support this work at
/* adapt.css - Sample CSS Sheet for Media – VERSION 3*/
http://syw2l.org
@media screen {
/* Default CSS for the Narrow Screens */
header {
background-color: #d0d0ff;
border-bottom: 5px solid blue;
}
header a:hover { Free
background-color: white;
}
aside {
border: 3px solid green;
background-color: #f0fff0;
}
footer { eBook
border-top: 5px solid blue;
}
header h1 {
color: #000080;
}
header a {
display: block; Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 118
Chapter 11 — Responsive CSS
margin: 5px 10px;
Free
background-color: #c0c0c0;
border: 3px groove #7f7f7f;
}
}
@media screen and (width > 480px) {
/* small devices - includes touch screens on tablets */
eBook
header a {
display: inline-block;
width: 20%;
padding: 0px 5% 0px 0px;
}
aside {
margin: 0px 0px 0px 20%;
}
Edition
footer {
clear: both;
}
#footerfirst {
} float: left;
#footersecond {
Please support this work at
float: right;
}
}
http://syw2l.org
@media screen and (width > 990px) {
/* medium, large and very large screens */
header {
display: grid;
grid-template-columns: 1fr 11em;
}
header nav { Free
display: grid;
grid-template-columns: 10em;
}
header a {
width: inherit;
}
section { eBook
clear: both;
}
aside {
float: right;
}
Edition
}
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 119
Chapter 11 — Responsive CSS
Free
eBook
Edition
Illustration 39: Page for Many Devices - Wide
Please support this work at
Advanced Topics for Exploration
http://syw2l.org
Other types of @media queries.
Vocabulary
• all • print Free
• aspect-ratio • screen
• desktop • smartphone
• display • speech
• media • tablet
width
• none • eBook
• orientation
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 120
Chapter 11 — Responsive CSS
Exercises
Word Search
a
Free o s e o i a l w i d t h
t o s c o a a n o a t s i
eBook
s r m r r - e t p s n p a
s i a o n e e l o p t e l
n e r n p s e e n e a e l
m n t o e n r n s c b c s
e t p n d a d n p t l h b
d a h e e n i a r - e r n
i t o a s p s n i r t a t
Edition
a i n e k a p p n a n h a
a o e p t p l o t t o l e
n n t p o r a t a i n d p
e n o m p t y l e o p p i
all, aspect-ratio, desktop, display, media, none, orientation,
Please support this work at
print, screen, smartphone, speech, tablet, width
Problems
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 121
Chapter 12 — Forms and Input Elements
Free
Chapter 12 — Forms and Input Elements
One of the most powerful features of HTML is the ability for users to fill in information on
forms and to have the data sent to remote servers to process. This chapter will introduce some of
the most common form elements and how to use the to create pages to collect informtion.
eBook
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
• • Recall the two modes (get and post) and their differences,
Edition
create input boxes of various types,
use drop downs and radio buttons on a page,
•
associate labels to fields,
•
submit data to a server and see the result.
•
Form Tag
Please support this work at
Have you ever filled out information on a webpage, such as your address when shopping online
or your name while signing up for an online membership? These areas are called forms, and are
simple to add to any HTML document. 131
http://syw2l.org
Forms are added inside of the <form>...</form> tag which are usually nested within the
<body>...</body> of a document. Each form tag includes an action and a method
attribute, which dictates how the form will function and where the information will be sent to.
Free
The action attribute tells the webpage where to send the form information. It will contain the
URL of a program on the web server that will process the data. These programs on the web
server are known as Common Gateway Interface scripts or CGIs for short. A CGI may be
132
written in either a compiled language (c, c++, java, etc) or in a scripting language (php,
javaScript, …).
eBook
The method attribute in a form communicates to the web browser how to send the data. This
can either be done using method="get" or method="post". The get method sends the
data to the action URL as a full package, and will appear as such in the address bar:
http://www.syw2l.org/reflect.php?username=Jim&age=53&title=Associate Professor
Edition
131 https://html.spec.whatwg.org/multipage/forms.html
132 http://en.wikipedia.org/wiki/Common_Gateway_Interface
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 122
Chapter 12 — Forms and Input Elements
Free
eBook
Illustration 40: Data Sent to a
Server
Edition
In the above example, the data following the ? is in key=value pairs, separated by an &. This
method is quick, but is also limited in the amount and tipe of data that can be sent. In contrast,
the post method sends the data to the server as a completely separate stream and can upload a
large quantity of data. The type of method that you use will entirely depend on the type of server
and the application.
Please support this work at
There are many elements that can be used inside of a form, which will be explained below. Keep
in mind as you are reading that all form data controls must include the name attribute, which
133
functions similarly to an id, and is used to identify the information being sent to the CGI.
http://syw2l.org
The Input Tag
The <input> tag is a phrasing element that is used by the user to input information, such as
their name or email address. As with any form element, there are a few attributes that need to
134
be included. An example input tag could be written like: Free
<input type="text" name="valuename" value="type something here">
The type attribute specifies what kind of data will be input into the form element, and can be
specified in a multitude of different ways. Here is a list of some of the most common types of
form inputs: eBook
• type="text" — This type specifies that this tag is a text entry field. It will display a
general box for the entry of a single line of text.
Edition
‣ may use the maxlength attribute to specify the maximum number of characters to
133 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
134 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 123
Chapter 12 — Forms and Input Elements
allow in the field (also works for input types search, tel, url, email, and
Free
password)
may use size attribute to specify how many characters long the box will be
‣
displayed as (also works for input types search, tel, url, email, and
password)
eBook 135
type="email" — This type of text field is used specifically for email addresses.
•
Using this attribute will ensure that the address is properly formatted with valid
characters, and will inform the user when it is not so that they may correct it.
type="url" — This type will ensure that a properly formatted URL is entered in the
•
input field. This field type does not validate that the URL exists just that the format is
136
proper.
Edition 137
type="tel" — This form input type is used for telephone numbers. Some browsers
•
will display numeric keypads for ease of use.
type="password" — This is a special type for passwords. Anything typed into this
•
form element will be displayed a a dot or an asterisk, ensuring privacy.
Please support this work at
type="number" — A field of this type will only allow the user to enter numbers. You
•
may specify the min, max, and step attributes to enforce limits on the numbers being
entered. 138
http://syw2l.org
‣ If you wanted the user to enter a whole number from 0 to 100 the field might look
like:
Free
<input type="number" name="score" min=0 max=100 step=1>.
• type="range" — This field will display a slide-bar that the user can interact with to
select a number. Though it looks nice, it can be inaccurate. You may use the min, max,
and step attributes to change the behavior of the slider. 139
‣ Let's say you want the user to enter a number from 0 to 1 with one decimal point, the
eBook
field might look like:
<input type="range" name="somenumber" min=0 max=1
step=.1>.
135 https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email )
Edition
136 https://html.spec.whatwg.org/multipage/input.html#url-state-(type=url )
137 https://html.spec.whatwg.org/multipage/input.html#telephone-state-(type=tel )
138 https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number )
139 https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range )
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 124
Chapter 12 — Forms and Input Elements
The step determines the interval of the available numbers. For example, a step of 5
Free
will allow the user to select only every 5th number.
type="date" — This field type can be used to enter a date. In many browsers, a data
•
selection dialog will pop up to assist in quick and accurate entry.
• type="checkbox" — This will generate a box that the user can check or not.
eBook
Checkboxes are independent and clicking on one will not usually effect another on the
page.
type="radio" — A radio similar to the checkbox, however only one option in a radio
•
can be selected at a time. Each radio button in a group will have the same name attribute
but will have a unique value that will be used by the server to see what was selected.
Radios may also have a unique id if needed for scripting or styling.
Edition
type="hidden" — A hidden field is special. It will send data to the server but will not
•
be displayed on the web browser. You need to specify a value attribute that contains the
data to be sent.
• type="submit" — Using the submit input type will generate a button that will send
Please support this work at
the completed form to the server.
type="reset" — The reset type will generate a button that will clear every field and
•
return them to their original state
http://syw2l.org
There are several other different attributes that can be applied to the <input> tag to make them
behave in special ways: 140
Free
• maxlength — This attribute can be used to specify the maximum amount of
characters allowed in an input field. For example, if you have an input box for a
telephone number, you may want to limit the number of characters to 10 in order to
prevent the user from accidentally adding too many numbers.
• sizerequired — This attribute will specify the length of an input box by how many
characters are required.
eBook
• disabled — This attribute will disable an input box, not allowing a user to interact
with it. The primary use of this attribute is to disable inputs on conditions, such as
preventing users from entering their phone number if they have previously selected that
they don't have a phone.
Edition
• readonly — This attribute will prevent a user from changing the value of an input.
140 https://html.spec.whatwg.org/multipage/input.html#common-input-element-attributes
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 125
Chapter 12 — Forms and Input Elements
The Label Tag
Free
The <label>...</label> tag is a container for <input> tags and can be used to associate
141
a prompt to the input. For example:
<label>Name:<input type="text" name="name"></label>
eBook
The <label>...</label> tag can be useful for organization and for creating CSS.
If the <input> tag is defined outside the <label>...</label>, you should include the
for attribute to associate the input element and the label's text. It is written like:
Edition
<label for="namefield">Name:</label><input type="text" id="namefield"
name="name">
Keep in mind that using the for attribute requires the id attribute to be included in the form
element.
Please support this work at
Let's suppose that we need to develop a simple registration page for our company picnic, next
week. The server developer would like us to send the data to http://www.syw2l.org/reflect.php as
http://syw2l.org
get data and has given us the following field names, types, and lengths:
Field Name Type Length or Range
Name Text 50
Title Text 50 Free
Telephone Telephone Number 15
NumberAttending Number 0-10
<!DOCTYPE html> eBook
<html lang="en">
<head>
<meta charset="utf-8">
<title>Company Picnic</title>
<style>
form {
display: grid; Edition
141 https://html.spec.whatwg.org/multipage/forms.html#the-label-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 126
Chapter 12 — Forms and Input Elements
grid-template-columns: 13em 1fr;
Free
}
</style>
</head>
<body>
<h1>Company Picnic Registration</h1>
<form method="get" action="http://www.syw2l.org/reflect.php">
<label for="formName">Your Name:</label>
eBook
<input id="formName" name="Name" type="text"
size=50 maxlength=50>
<label for="formTitle">Your Job Title:</label>
<input id="formTitle" name="Title" type="text"
size=50 maxlength=50>
<label for="formTele">Your Telephone Number:</label>
<input id="formTele" name="Telephone" type="tel"
size=15 maxlength=15>
Edition
<label for="formAttend">Number Attending:</label>
<div>
<input id="formAttend" name="NumberAttending" type="range"
min=0 max=10 step=1 value=1
oninput="formAttendShow.value = formAttend.value">
<output id="formAttendShow">1</output>
</div>
Please support this work at
<div></div>
<div id="buttons">
<input type="reset">
<input type="submit">
http://syw2l.org
</div>
</form>
</body>
Free
</html>
eBook
Illustration 41: Company Picnic - Registration Form
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 127
Chapter 12 — Forms and Input Elements
Free
eBook
Illustration 42: Company Picnic -
Registration Form Data
Edition
In the previous example a couple of tricks were one. The two buttons and the range input and
output were combined into <div>...</div>s. This was done so that they would be a single
grid item in the two column grid layout. Also you will see
oninput="formAttendShow.value = formAttend.value" on the range input. The
Please support this work at
string following oninput is actually a single JavaScript statement that takes the value of the
slider (formAttend) and assigns it to the output element (formAttendShow) so that the user can
see the range selector and see the number selected.
http://syw2l.org
Other form Elements
Free
• <select>...</select> — This form control allows the user to select a choice,
which is usually displayed as a drop-down list with zero or more options.
142 143
‣ Options within a select written with the <option>...</option> tag, like:
<option value="g">green</option>
In this example, the "g" is the value that will be sent to the server. It is possible to
group options, however it is an advanced topic that will not be covered in this
volume. 144 eBook
• <fieldset>...</fieldset> — Is used to group form elements together and
enhances the organization of your webpage. By default the field-set will be displayed
145
surrounded by a border. Optionally you can add a title using the
Edition
142 https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
143 https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element
144 https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element
145 https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 128
Chapter 12 — Forms and Input Elements 146
<legend>...</legend> tag.
Free 147
<textarea></textarea> — This tag is used to create a multi-line text entry box,
•
such as a comment section. When defining it you should include the ros and cols
attributes to define the size on the screen. For example:
<textarea name="message" rows=3 cols=60>Default
Text</textarea>
eBook
Here is an example of form and input elements being used properly in an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Edition
<title>Using the Reflect Server Script</title>
<link href="usingreflect.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<h2>Simple Form</h2>
<form action="http://www.syw2l.org/reflect.php" method="get">
Please support this work at
<label for="usernamefield">Your Name:</label>
<input type="text" id="usernamefield" name="username" size=50
maxlength=50 value="Your user name">
<br>
http://syw2l.org
<label for="agefield">Your Age:</label>
<input type="number" id="agefield" name="age" min=13
max=120 step=1>
<br>
<label for="weightfield">Your Weight (Kg):</label>
<input type="range" name="weight" id="weightfield" min=0
max=400 step=10 value=50 Free
oninput="weightfieldout.value = weightfield.value">
<output id="weightfieldout">50</output>
<br>
<label for="humanfield">Check if you are a human:</label>
eBook
<input type="checkbox" id="humanfield" name="human">
<br>
<label for="colorselect">Your favorite color:</label>
<select id="colorselect" name="color">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
<option value="p">Pink</option>
Edition
</select>
146 https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element
147 https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 129
Chapter 12 — Forms and Input Elements
<br>
Free
<fieldset>
<legend>Are you a student:</legend>
<input type="radio" name="student" id="student_k12"
value="k12">
<label for="student_k12">K-12</label>
<input type="radio" name="student" id="student_c"
value="c">
eBook
<label for="student_c">College (any level)</label>
<input type="radio" name="student" id="student_n"
value="n">
<label for="student_n">Not currently</label>
</fieldset>
<br>
<label for="commenttext">Comments:</label>
<textarea id="commenttext" name="comment" rows=5 cols=40>
Edition
</textarea>
<br>
<input type="hidden" name="author" value="J.M.Reneau">
<input type="submit">
</form>
</section>
<footer>
Please support this work at
<p><small>© 2020 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
</footer>
</body> http://syw2l.org
</html>
/* usingreflect.css - Sample CSS Sheet for formatting a Form */
label { Free
display: inline-block;
min-width: 10em;
}
fieldset {
margin-left: 10em;
display: grid; eBook
grid-template-columns: 40px 1fr;
}
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 130
Chapter 12 — Forms and Input Elements
Free
eBook
Edition
Illustration 43: Sample Form with Elements
Please support this work at
http://syw2l.org
Free
eBook
Illustration 44: Sample Form -
Edition
Data
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 131
Chapter 12 — Forms and Input Elements
Advanced Topics for Exploration
Free
Other HTML input types (datetime, hidden, …)
•
output
•
• progress
eBook
meter
•
Vocabulary
• • action • • number
checkbox
password
Edition • • radio
Common Gateway Interface (CGI)
•
date
range
•
fieldset
select
• • email • • reset
form
submit
Please support this work at
•
•
hidden
tel
•
•
• input • text
textarea
•
• label http://syw2l.org
• method • type
• name • value
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 132
Chapter 12 — Forms and Input Elements
Exercises
Word Search
i e i m n d
Free p e u t r a n g e C b l a a s l l m
a e a e i e e p h t a u x I e o t n n l p s u g
eBook
o n e t h u c e a m t o h p o m G a u e a a l t
t m t h t c t i m s t c e e x m n a b l e b i t
e w I o G r e t s i s a m e n o d t o t n p e r
e c e d e v w e e e e w n o i n n t s o t r r l
e n a i d d x x d C m f o x i t o o e d r t e
l e i e t m t e s e e s r e G x m t i l e o s
c s c d t r a a e u r n b e d a l s t r m e l G
Edition
s h a d t m c f i e l d s e t t e b e a c e c n
u e e f s t t t e l b s n f c e m l n d e e a t
b e b c s n i d m t s i o m w a I a i s I C n
m a l p k h o t h y h I i m l a i e m o d e i a
i e h l b b n e m c t e e x u y l r e o n c t e
t e l b d a o a a u s t t G p r o i m a h C
Please support this work at
e o C o p d x e l r p y f m I d d p o m i s r
l C r a G l b e l b b m p p e n f o e m y d r n
h t p w y I e d v a l u e a e t a a e e d d b
http://syw2l.org
n d t e x t a r e a c i e a v e d u a o i e g f
d i a h t e n m n i e s a a o r c f e a n n e o
b b t t p i e C r e s e t u h f i e a d p a e r
Free
i t G r e t t t r i e b y a p a e s t r u r h m
m m n u m b e r p I l m d n v c n a s b t i r m
y I u e t c e d n x t a b n e G d h i n t b o
CGI, Common Gateway Interface, action, checkbox, date, email,
fieldset, form, hidden, input, label, method, name, number,
password, radio, range, reset, select, submit, tel, text,
eBook
textarea, type, value
Problems
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 133
Bonus Chapter 1 — HTML Content Model
Free 148 149
Bonus Chapter 1 — HTML Content Model
The "Content Model" is the structure used to understand the tags in HTML. This model is used
to describe what a tag can contain and how a tag is displayed by default. An HTML tag can
belong to zero or more of the content categories, but most fit somewhere.
eBook
Edition
Please support this work at
http://syw2l.org
Illustration 45: HTML Content Model
Free
Metadata Elements
The metadata elements are not directly visible on the web browser. They tell the browser details
about how tags are to behave and specifics about how to show tags. 150
These elements belong to the metadata category:
<base> 151
<link> 152
<meta> 153 eBook
148 https://html.spec.whatwg.org/multipage/dom.html#content-models
149 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
Edition
150 https://html.spec.whatwg.org/multipage/dom.html#metadata-content
151 https://html.spec.whatwg.org/multipage/semantics.html#the-base-element
152 https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
153 https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 134
Bonus Chapter 1 — HTML Content Model
154
<noscript>
Free
<script>
155
156
<style>
157
<template>
158
<title>
eBook
Flow Content
Everything visible is flow
159
Sectioning Content
Blah… 160 161
Edition
<article>
<aside>
162
<nav>
163
164
<section>
Please support this work at
Heading Content
Blah…
165
http://syw2l.org
Headings <h1>...</h1> through <h6>… 166
Phrasing Content
Free
Phrasing content, which includes text, make up the content of paragraphs. 167
154 https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element
155 https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
eBook
156 https://html.spec.whatwg.org/multipage/semantics.html#the-style-element
157 https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
158 https://html.spec.whatwg.org/multipage/semantics.html#the-title-element
159 https://html.spec.whatwg.org/multipage/dom.html#flow-content
160 https://html.spec.whatwg.org/multipage/dom.html#sectioning-content
161 https://html.spec.whatwg.org/multipage/sections.html#the-article-element
162 https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
163 https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
Edition
164 https://html.spec.whatwg.org/multipage/sections.html#the-section-element
165 https://html.spec.whatwg.org/multipage/dom.html#heading-content
166 https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
167 https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 135
Bonus Chapter 1 — HTML Content Model
Embedded Content
Free
168
Other content
<audio>
<canvas>
<embed>
<iframe>
eBook
<img>
<math>
<object>
<svg>
<video>
Edition
Interactive Content
169
Blah…
Please support this work at
http://syw2l.org
Free
eBook
Edition
168 https://html.spec.whatwg.org/multipage/dom.html#embedded-content-2
169 https://html.spec.whatwg.org/multipage/dom.html#interactive-content
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 136
Bonus Chapter 2 — Intellectual Property
Free
Bonus Chapter 2 — Intellectual Property
Intellectual Property
Intellectual Property (IP) is something "(as an idea, invention, or process) that derives from the
eBook
work of the mind or intellect". You can think of IP as anything we create with our minds.
170
Copyright, Trademark, and Patent law protect the ownership of these things.
DISCLAIMER: The author of this is not an attorney and in no way is this chapter to be
understood as legal advice. If you have additional questions or before making a decision based
upon this brief introduction, consult an expert.
Edition
Copyright
Copyright is a legal protection "for original works of authorship fixed in a tangible medium of
171
expression". This definition covers written works, artistic works, and any recorded expression.
You have legal copyright protection the moment you have typed, written, or recorded the work.
172
Please support this work at
Patent
173
Patents protect inventions, new designs, and genetically modified plants. They typically last a
http://syw2l.org
period of 20 years, unless renewed, and protect the work you expended researching and creating
a new thing or process. You can't patent a painting and you can't copyright a new device.
Free
Licenses
When one holds a Copyright on a work or a Patent on something, sometimes we need to allow
somebody else to use the material. A license is a legal contract that allows an entity to use what
you own, within limits, for a payment of some type. When you purchase a DVD, download a
song, or install a piece of software you are agreeing to a license from the creator of the content
for the price you have paid.
Proprietary Licenses eBook
The licenses you agree to when you purchase software, buy a DVD, and even purchase a car are
Edition
170 https://www.merriam-webster.com/dictionary/intellectual%20property
171 https://www.copyright.gov/help/faq/faq-general.html#what
172 https://www.copyright.gov/help/faq/faq-general.html#mywork
173 https://www.uspto.gov/patents-getting-started/general-information-concerning-patents#heading-2
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 137
Bonus Chapter 2 — Intellectual Property
typically "proprietary licenses". These licenses are usually restrictive and do not allow you to
Free
copy, modify, decrypt, share, sell copies, or loan the Copyrighted material. Next time you load a
piece of software, and it displays the "License Agreement", read it. You have agreed to these
terms, and they are often very different from company to company.
Restrictive but Open Licenses
eBook
There is a class of licenses that many authors use that are much more open that the typical
Proprietary License. The Creative Commons has created a group of these licenses that are very
174
widely used. Restrictions may include: you may not re-sell, you may not modify, you may not
use commercially and others. Be sure you know what you can legally do, and what you can't.
Open Source Licenses 175
Edition
Copyleft describes a special type of "free" license. Many pieces of software have been
released to the world with this type of license. This license basically means that this "code" is
free and any modifications you make to it are also "free". You can change someone to write the
program but you can not later apply a Proprietary License to it. The GNU General Public
License is an example.
Please support this work at
The Open Source Initiative is a not-for-profit organization that sets the standard for what is an
176
open source license. On there web site they list dozens of open licenses from multiple entities.
An open license still has restrictions about what you can do with the code, in the future.
http://syw2l.org
Material in the Public Domain
Items with an expired and non-renewed copyright are said to be in the Public Domain (PD). They
Free
now belong to everybody. You may use, modify, copy, and even sell material that is PD. Too be a
good citizen, attribute your sources when you use anybody's material.
eBook
Edition
174 https://creativecommons.org/
175 https://www.gnu.org/copyleft/
176 https://opensource.org/
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 138
Author's Notes and Acknowledgments
Free
Author's Notes and Acknowledgments
Base HTML document modified from A Minimal HTML Document (HTML5 Edition) by Kevin
Yank. Available at http://www.sitepoint.com/a-minimal-html-document-html5-edition/ .
Gibberish used in code samples originally generated by the "Random Gibberish Generator" at
eBook
http://www.weirdhat.com/gibberish.php .
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search