Ezell's Html5 Semantics And Forms

Front 1

box model

Back 1

content > padding >border > margin

Front 2

Difference between XHTML and HTML

Back 2

XHTML is case sensitive and HTML is not
meaning all tags must be lowercase and closing tags are required

Front 3

According W3C's note titled "XHTML Media Types" a webserver may serve XHTML with one of what three content type?

Back 3

1. text/html
2. application/xhtml+xml
3. application/xml or text/xml

Front 4

Describe what happens when a document is served as "text/html"?

Back 4

A browser receiving an XHTML document with this content type treats the document as HTML.

Front 5

What is the most reliable way to serve XHTML web pages?

Back 5

"text/html"

Front 6

How do css browsers use doctype?

Back 6

CSS browsers use <!DOCTYPE> to determine how closely they will follow the CSS standard when they render the document.

Front 7

What are the two basic modes for the browser?

Back 7

There are two basic modes: quirks and standards. In quirks mode, browsers do not follow the CSS standard, which makes this mode undesirable for styling with CSS. In standards mode, they follow the CSS specification.

Front 8

How does internet explorer in strict mode violate a part of the CSS spec?

Back 8

It does not align images in table cells to the baseline. It does this to remove the baseline space below images so that sliced images in tables work as expected.

Front 9

How do the other browsers (excluding internet explorer) aligning images in table cells so that sliced images in tables work as expected.

Back 9

The other major browsers have a third mode called almost-standards mode that emulates strict mode in internet explorer which handles the issue by removing the base line space in table cells where images are applied.

Front 10

How do you link a stlylesheet to the document

Back 10

<link rel="stylesheet" type="text/css" />

Front 11

How do you apply a style sheet to all devices?

Back 11

media="all"

Front 12

How do you apply a stylesheet only when printing

Back 12

media="print"

Front 13

What does media="print" allow to you do?

Back 13

This allows you to hide navigational bars, remove backgrounds, reset inverse color schemes (like white text on a black background) to normal black text on a
white background, and so forth.

Front 14

media="handheld"

Back 14

You can use media="handheld" to apply a stylesheet to handheld devices only.

Front 15

when you want to be able to give the user a choice in style sheet

Back 15

<link rel="alternate stylesheet" />

Front 16

You want one set of styles to be applied to Internet Explorer and another set to be applied to other browsers.

Back 16

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" media="all" type="text/css" />
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="ie.css" media="all" type="text/css" />
<![endif]-->

Front 17

What are the limitations to conditional stylesheets?

Back 17

Conditional style sheets apply only to internet explorer.

Front 18

What are the four major structural block elements in HTML and the 9 structural elements that support them

Back 18

1. <ol>
2. <ul>
3. <dl>
4. <table>
the supporting elements are
1. <li>
2. <dt>
3. <dd>
4. <caption>
5. <thead>
6. <tfoot>
7. <tbody>
8. <colgroup>
9. <col>

Front 19

<dl>

Back 19

<dl> creates a definition list of one or more terms (<dt>) and definitions (<dd>). Structurally, a definition list implies all its terms are synonyms and all its definitions are alternate definitions of its terms.
The HTML specification also shows that a definition list can have a broader application, such as listing
speakers and their dialog. In generic terms, a definition list is an associative entity that associates keys with
values.

Front 20

<table>

Back 20

<table> creates a tabular data structure in rows (<tr>) and cells (<th> and <td>). It may optionally
contain groups of rows: one table header (<thead>), one table footer (<tfoot>), and one or more table
body groups (<tbody>). It may optionally contain one or more column groups (<colgroup>) containing
one or more columns (<col>). Column groups and columns are the only structural blocks that are
relational instead of hierarchical. In other words, each <col> element forms a relationship with cells in a
column without actually being their parent. A table may optionally contain a <caption>.

Front 21

<article>

Back 21

<article> represents a self-contained composition in a page that is, in principle, independently distributive or reusable, e.g., via syndication. This could be a forum post, a magazine or newspaper article, a blog entry, etc. When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Front 22

<section>

Back 22

<section> represents a generic section of a document and acts as a thematic grouping of content,
typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed
dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, news items, and contact information. Developers may use <article> instead of the section
element when it would make sense to syndicate the contents of the element.

Front 23

<nav>

Back 23

<nav> defines a section of a page that links to other pages or to parts within the page—basically a section
with navigation links.

Front 24

<blockquote>

Back 24

<blockquote> creates a blockquote. Semantically, a blockquote contains a quote from an external source that relates to the topic of its siblings.

Front 25

<dt>

Back 25

<dt> creates a definition term. Semantically, a definition term is a term that is being defined directly in the document by one or more definitions. The Structural Block Elements design pattern includes <dt> because it is a part of the <dl> structure. When you use <dl> as an associative entity, <dt> changes its semantic meaning to being a key that is associated
with one or more values. Like a term, a key can be looked up to find its associated items.

Front 26

<address>

Back 26

<address> creates a contact record for the document itself. It is not for identifying other types of addresses, such as your favorite restaurants. The HTML specification allows an address to contain any type of content such as a street address, e-mail address, phone number, etc.

Front 27

<caption>

Back 27

<caption> creates a table caption. Semantically, it labels a table. <caption> is referred to in the Structural Block Elements design pattern because it is a part of the <table> structure.

Front 28

Describe what happens when a document is served as "application/xhtml+xml"?

Back 28

This is the way XHTML should be served except that internet explorer 7 and earlier versions refuse to display pages served this way.

Front 29

What semantic inline elements specify importance?

Back 29

1. <span>
2. <em>
3. <strong>

Front 30

What semantic inline elements do phrases typically contain?

Back 30

1. <a>
2. <cite>
3. <code>
4. <kbd>
5. <samp>
6. <var>

Front 31

What semantic inline elements do word line typically contain?

Back 31

1. <abbr>
2. <dfn>

Front 32

What semantic inline elements does character element line typically contain?

Back 32

1. <sub>
2. <sup>

Front 33

Describe what happens when a document is served as "application/xml" or "text/xml"?

Back 33

Unfortunately, Internet Explorer 7 and earlier versions recognize such a document as generic XML, which means they ignore all XHTML semantics. This means links and forms do not work, and it takes much longer to render the document.

Front 34

What are the new HTML5 input types for forms

Back 34

1. color
2. date
3. datetime
4. datetime-local
5. email
6. month
7. number
8. range
9. search
10. tel
11. time
12. url
13. week

Front 35

How can you style input elements with the invalid pseudo-class?

Back 35

input:invalid {border:2px solid red;}
input:valid { border: 2px solid green; }

Front 36

What's the problem with styling input elements with the invalid pseudo-class?

Back 36

A required input is invalid on page load because it is blank therefore the styles will be set and this is off putting to the user, also An input type=email will be
invalid the moment the user starts typing, until the first character after “@” is entered, because until that time it’s not a valid email address.

Front 37

What solution did patrick lauke come up with for solving the problem with styling input elements with the invalid pseudo-class? Why is this still a partial solution?

Back 37

using a combination of :focus, to mitigate the problem
and only show the styling when the user is interacting with that particular form field:

input:focus:invalid {border:2px solid red;}
input:focus:valid {border: 2px solid green;}

This works, but only for the currently focused input. We want the invalid fields to be styled differently only after users have entered some content.

Front 38

How does the Gecko rendering engine solve the problem with styling input elements with the invalid pseudo-class?

Back 38

Mozilla uses an alternative pseudoclass
called –moz-ui-invalid along with :in-range, :out-of-range and :indeterminate

Front 39

How does the Webkit rendering engine solve the problem with styling input elements with the invalid pseudo-class?

Back 39

webkit uses validation message bubbles

• ::-webkit-validation-bubble{}
• ::-webkit-validation-bubble-top-outer-arrow{}
• ::-webkit-validation-bubble-top-inner-arrow{}
• ::-webkit-validation-bubble-message{}

Front 40

What can HTML5 authors use to do custom Validation of Forms?

Back 40

the spec provides a full DOM API, new HTML attributes, and CSS hooks authors can use to customize the experience.

Front 41

What is constraint Validation?

Back 41

The core of constraint validation is an algorithm browsers run when a form is submitted to determine its validity.

Front 42

what properties / methods does the Constraint Validation API add to DOM nodes?

Back 42

The constraint validation API adds the following properties / method to DOM nodes:

1. willValidate
2. validity
3. validationMessage

methods

1. checkValidity
2. setCustomValidity

Front 43

Describe the willValidate property and show an example

Back 43

The willValidate property indicates whether the node is a candidate for constraint validation. For submittable elements this will be set to true unless for some reason the node is barred from constraint validation, such as possessing the disabled attribute.

<div id="one"></div>
<input type="text" id="two" />
<input type="text" id="three" disabled />
<script>
document.getElementById('one').willValidate; //undefined
document.getElementById('two').willValidate; //true
document.getElementById('three').willValidate; //false
</script>

Front 44

Describe the validity property.

Back 44

The validity property of a DOM node returns a ValidityState object containing a number of boolean properties related to the validity of the data in the node.

Front 45

What are the validityState properties of the validity property?

Back 45

1. customError
2. patternMismatch
3. rangeOverflow
4. rangeUnderflow
5. stepMismatch
6. tooLong
7. typeMismatch
8. valueMissing
9. valid

Front 46

Describe the customError validityState property and show an example.

Back 46

customError: true if a custom validity message has been set per a call to setCustomValidity().

<input id="foo" />
<input id="bar" />
<script>
document.getElementById('foo').validity.customError; //false
document.getElementById('bar').setCustomValidity('Invalid');
document.getElementById('bar').validity.customError; //true
</script>

Front 47

Describe the patternMismatch validityState property and show an example.

Back 47

patternMismatch: true if the node's value does not match its pattern attribute.

<input id="foo" pattern="[0-9]{4}" value="1234" />
<input id="bar" pattern="[0-9]{4}" value="ABCD" />
<script>
document.getElementById('foo').validity.patternMismatch; //false
document.getElementById('bar').validity.patternMismatch; //true
</script>

Front 48

Describe the rangeOverflow validityState property and show an example.

Back 48

rangeOverflow: true if the node's value is greater than its max attribute.
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>

Front 49

Describe the rangeUnderflow validityState property and show an example.

Back 49

rangeUnderflow: true if the node's value is less than its min attribute.
<input id="foo" type="number" min="2" value="3" />
<input id="bar" type="number" min="2" value="1" />
<script>
document.getElementById('foo').validity.rangeUnderflow; //false
document.getElementById('bar').validity.rangeUnderflow; //true
</script>

Front 50

Describe the stepMismatch validityState property and show an example.

Back 50

stepMismatch: true if the node's value is invalid per its step attribute.
<input id="foo" type="number" step="2" value="4" />
<input id="bar" type="number" step="2" value="3" />
<script>
document.getElementById('foo').validity.stepMismatch; //false
document.getElementById('bar').validity.stepMismatch; //true
</script>

Front 51

Describe the typeMismatch validityState property and show an example.

Back 51

typeMismatch: true if an input node's value is invalid per its type attribute.

<input id="foo" type="url" value="http://foo.com" />
<input id="bar" type="url" value="foo" />

<input id="foo2" type="email" value="[e-mail]" />
<input id="bar2" type="email" value="bar" />

<script>
document.getElementById('foo').validity.typeMismatch; //false
document.getElementById('bar').validity.typeMismatch; //true

document.getElementById('foo2').validity.typeMismatch; //false
document.getElementById('bar2').validity.typeMismatch; //true
</script>

Front 52

Describe the valueMissing validityState property and show an example.

Back 52

valueMissing: true if the node has a required attribute but has no value.
<input id="foo" type="text" required value="foo" />
<input id="bar" type="text" required value="" />
<script>
document.getElementById('foo').validity.valueMissing; //false
document.getElementById('bar').validity.valueMissing; //true
</script>

Front 53

Describe the valid validityState property and show an example.

Back 53

valid: true if all of the validity conditions listed above are false.
<input id="valid-1" type="text" required value="foo" />
<input id="valid-2" type="text" required value="" />
<script>
document.getElementById('valid-1').validity.valid; //true
document.getElementById('valid-2').validity.valid; //false
</script>

Front 54

Describe the checkValidity method.

Back 54

The checkValidity method on a form element node (e.g. input, select, textarea) returns true if the element contains valid data.

On form nodes it returns true if all of the form's children contain valid data.

<form id="form-1">
<input id="input-1" type="text" required />
</form>
<form id="form-2">
<input id="input-2" type="text" />
</form>
<script>
document.getElementById('form-1').checkValidity(); //false
document.getElementById('input-1').checkValidity(); //false

document.getElementById('form-2').checkValidity(); //true
document.getElementById('input-2').checkValidity(); //true
</script>

Front 55

What happens everytime every time a form element's validity is checked via checkValidity and fails?

Back 55

an invalid event is fired for that node.

Front 56

How you set an eventListener for the invalid event?

Back 56

document.getElementById('input-1').addEventListener('invalid', function() {
//...
}, false);

Front 57

Is there a valid event for a dom node?

Back 57

no

Front 58

Describe the setCustomValidity method

Back 58

The setCustomValidity method changes the validationMessage property as well as allows you to add custom validation rules.

Front 59

What happens when you pass an empty string to the setCustomValidity method?

Back 59

Because it is setting the validationMessage passing in an empty string marks the field as valid and passing any other string marks the field as invalid.

Front 60

What are the HTML attributes for the Constaint Validation API?

Back 60

or constraint validation there are two additional relevant attributes - novalidate and formnovalidate.

Front 61

Describe the novalidate HTML attribute.

Back 61

The boolean novalidate attribute can be applied to form nodes. When present this attribute indicates that the form's data should not be validated when it is submitted.

<form novalidate>
<input type="text" required />
<input type="submit" value="Submit" />
</form>

Front 62

Will a form that has a novalidate attribute submit even though it contains an empty required input.

Back 62

yes

Front 63

Describe the formnovalidate attribute with example

Back 63

The boolean formnovalidate attribute can be applied to button and input nodes to prevent form validation. For example:

<form>
<input type="text" required />
<input type="submit" value="Validate" />
<input type="submit" value="Do NOT Validate" formnovalidate />
</form>

Front 64

Will a form that has a formnovalidate attribute submit even though it contains an empty required input.

Back 64

yes

Front 65

What is the limitation to setCustomValidity?

Back 65

For simply setting the validationMessage of a field setCustomValidity works, but as forms get more complex a number of limitations of the setCustomValidity method become apparent.

Problem #1: Handling multiple errors on one field
Problem #2: Knowing when to check the validity of a field
Problem #3: Knowing when a user attempts to submit a form

Front 66

describe Problem #1: Handling multiple errors on one field limitation of setCustomValidity

Back 66

Calling setCustomValidity on a node simply overrides its validationMessage. Therefore, if you call setCustomValidity on the same node twice the second call will simply overwrite the first. There is no mechanism to handle for an array of error messages or a way of displaying multiple error messages to the user.

Front 67

What is one way of handling the issue of multiple errors in one field?

Back 67

One way of handling this is to append additional messages to the node's validationMessage as such.

var foo = document.getElementById('foo');
foo.setCustomValidity(foo.validationMessage + ' An error occurred');

only problem is you can not pass in formatting characters so the formatting will not be as good

Front 68

describe Problem #2: Knowing when to check the validity of a field

Back 68

There is no means of telling when a field validity might have changed other than the change event but constraint attributes don't trigger change events such as pattern, required, min, max, or step. Or scripts that automatically fill in input.

Front 69

Describe Problem #3: Knowing when a user attempts to submit a form

Back 69

The submit event is not fired until after the browser has determined a form contains valid data given all of its specified constraints. Therefore, there is no way of knowing when a user attempts to submit a form and it is prevented by the browser.

Front 70

What is a workaround for Knowing when a user attempts to submit a form

Back 70

One way to accomplish this is by adding the novalidate attribute to the form and use its submit event. Because of the novalidate attribute the form submission will not be prevented regardless of the validity of the data. Therefore, the client script will have to explicitly check whether the form contains valid data in a submit event and prevent submission accordingly.

Front 71

What is a major disadvantage adding the novalidate attribute to the form and use its submit event to know when user attempts to submit a form.

Back 71

The major disadvantage of this approach is that adding the novalidate attribute to a form prevents the browser from displaying the inline validation bubble to the user. Therefore, if you use this technique you must implement your own means of presenting error messages to the user.
We need a forminvalid event that would be fired whenever a form submission was prevented due to invalid data.

Front 72

What is the issue with safari and Constrain Validation API.

Back 72

Even though Safari supports the constraint validation API, as of this writing (version 6), Safari will not prevent submission of a form with constraint validation issues. To the user Safari will behave no differently than a browser that doesn't support constraint validation at all.

Front 73

what is a work around for the Safari browser issue with the Constain Validation API? and what is the danger?

Back 73

The easiest way around this is to use the same approach as the workaround described above, give all forms the novalidate attribute and manually prevent form submissions using preventDefault.

Note: There are several documented bugs where the checkValidity method returns false positives. False positives are especially dangerous with the above workaround because the user will be stuck on a form with valid data, so use caution.

Front 74

What is the issue with declarative error messages and the Constrain Validation API?

Back 74

While you have the ability to change a field's error message by setting its validationMessage through setCustomValidity, it can be a nuisance to continuously setup the JavaScript boilerplate to make this happen, especially on large forms.

Front 75

How has Mozilla helped with declarative error messages?

Back 75

To help make this process easier, Firefox introduced a custom x-moz-errormessage attribute that can be used to automatically set a field's validationMessage.

<form>
<input type="text" required x-moz-errormessage="Fill this out." />
<input type="submit" value="Submit" />
</form>Try It
When the above form is submitted in Firefox the user will see the custom message instead of the browser's default.

Front 76

What is the issue with Mozilla help with declarative error messages?

Back 76

This feature was proposed to the W3C but was rejected. Therefore, at the moment Firefox is the only browser where you can declaratively specify error messages.

Front 77

What is the issue the title attribute and the Constrain Validation API?

Back 77

While it doesn't change the validationMessage, in the case of a patternMismatch browsers do display the contents of the title attribute in the inline bubble if it's provided. (Note: Chrome will actually display the title attribute when provided for any type of error, not just patternMismatches.)

Front 78

How do you deal with unsupported browsers when you want to use the Constraint Validation API's ?

Back 78

Option 1 - Rely on Server Side Validation Alone
Option 2 - Polyfill

Front 79

What is a polyfill?

Back 79

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

Front 80

What are webshims?

Back 80

Webshims is collection of polyfills including one for HTML5 forms and the constraint validation API.

Front 81

Show an example of working with a webshim.

Back 81

To show how to use Webshims let's return to our original example of a form with a single required text input.

<form>
<input type="text" required value="" />
<input type="submit" value="Submit" />
</form>
To make this work consistently across all browsers you need to include Webshims and its dependencies then call $.webshims.polyfill('forms').

<!-- Webshims' dependencies -->
<script src="js/jquery-1.8.2.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>

<!-- Webshims base -->
<script src="js-webshim/minified/polyfiller.js"></script>

<script>jQuery.webshims.polyfill('forms');</script>

<form>
<input type="text" required value="" />
<input type="submit" value="Submit" />
</form>Try It

Front 82

what is H5F?

Back 82

H5F is a lightweight, dependency free polyfill that implements the full constraint validation API as well as a number of the new attributes.

Front 83

Show an example of using H5F.

Back 83

To see how to use H5F let's add it to our basic example of a form with a single required text input.

<script src="H5F.js"></script>

<form>
<input type="text" required value="" />
<input type="submit" value="Submit" />
</form>
<script>
H5F.setup(document.getElementsByTagName('form'));
</script>