Skip to main content

Home/ HTML5 development/ Group items tagged code

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

: The Input (Form Input) element - HTML | MDN - 0 views

developer.mozilla.org/...input

HTML5 form input attributes

shared by Vernon Fowler on 06 Mar 18 - No Cached
  • A single-line text field for entering search strings.
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      On mobile devices with on-screen keyboards, the search input type sets the submit button text to "Search". On desktop devices, this should also enable submitting the form by pressing the Enter key?
  • Possible values are: off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry. on: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter. name: Full name. honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle"). given-name: First name. additional-name: Middle name. family-name: Last name.
  • inputmode
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      Currently not supported in any browser. https://caniuse.com/#feat=input-inputmode
  • ...4 more annotations...
  • This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
  • minlength HTML5 If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter.
  • maxlength If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter.
  • autocorrect A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are: on Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
Vernon Fowler

Microdata - Dive Into HTML5 - 0 views

diveintohtml5.info/extensibility.html

HTML5 microdata

shared by Vernon Fowler on 27 Oct 12 - No Cached
  • a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
  • “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
  • So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
  • ...7 more annotations...
  • This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
  • There are two major classes of applications that consume HTML, and by extension, HTML5 microdata: Web browsers Search engines
  • Google supports microdata as part of their Rich Snippets program.
  • a handy tool to see how Google “sees” your microdata properties
  • Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
  • To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
  • itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
Vernon Fowler

HTML5 forms input types | HTML5 Doctor - 0 views

html5doctor.com/html5-forms-input-types

html HTML5 forms input data types browser mobile

shared by Vernon Fowler on 05 Mar 13 - No Cached
  • Once more, the iPhone recognises type="tel", only this time it goes one step further and completely changes the keyboard to the standard phone keyboard, as shown on the left in Figure 6. In addition to the iPhone, some Android devices (such as HTC Desire, shown on the right in Figure 6) also display a numeric keyboard for type="tel". That’s pretty handy, don’t you think? Nice, big keys for entering a phone number help you to get that big, nasty form completed quickly.
  • In contrast to Opera’s implementation, the iPhone (Figure 8) and some Android devices (such as HTC Desire, shown on the right in Figure 6-13) simply render the field as a standard text box but optimize the keyboard for easy input.
  • Chris’ technique may soon become absolete though with the introduction of the inputmode attribute. The attribute, recently added to the specification will allow users to specify the type of input mechanism that is most useful for users. When implemented, you will be able to choose between numeric, latin, email, or kana input modes.
  • ...3 more annotations...
  • To make the iPhone render with the standard telephone keypad as we saw for type="text" Chris Coyier, of CSS Tricks devised a little hoax you can use. Rather than using type=”number”, use a standard type="text" input and add a pattern attribute that accepts only numbers, as shown below. This solution isn’t ideal but if you think it could be useful, Chris has put a short video together showing it in action. <input type="text" pattern="[0-9]*" name="shoe-size">
  • There are dedicated keys for the @ and . characters to help you complete the field more efficiently. As we discussed with type="search", there is no downside to using type="email" right now. If a browser doesn’t support it, it will degrade to type="text". And in some browsers, users will get a helping hand.
  • The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL. Like type="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk). Use the url input type like so: <input type="url" name="url" required>
Vernon Fowler

HTML Standard - 0 views

html.spec.whatwg.org/...interaction.html

shared by Vernon Fowler on 19 Sep 19 - No Cached
  • The value of input elements whose type attributes are in the Text, Search, URL, or E-mail states and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled).The value of textarea elements that do not have a readonly attribute and that are not disabled.
    • Vernon Fowler
      Vernon Fowler on 19 Sep 19
       
      Note the input types that we can set spellcheck="false" include: email url search text
  • Otherwise, if there is an ancestor element with a spellcheck content attribute that is not in the default state, then: if the nearest such ancestor's spellcheck content attribute is in the true state, then checking is enabled; otherwise, checking is disabled.
  • User agents should take into account the other semantics given in the document when suggesting spelling and grammar corrections. User agents may use the language of the element to determine what spelling and grammar rules to use, or may use the user's preferred language settings. UAs should use input element attributes such as pattern to ensure that the resulting value is valid, where possible.
Vernon Fowler

The hgroup element | HTML5 Doctor - 0 views

html5doctor.com/the-hgroup-element

headings HTML5 header html document outline hgroup markup semantic semanticweb

shared by Vernon Fowler on 18 Feb 13 - No Cached
  • An article with a title and metadata
  • An article with a title and subtitle
  • An article with a title, subtitle and metadata
  • ...4 more annotations...
  • If you have a title with subtitle(s) and other metadata associated with the section or article, place both the <hgroup> and the metadata within a single <header> element.
  • If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive <h1>–<h6>), group them in an <hgroup>.
  • When grouping headings in an <hgroup> element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline.
  • It can only contain a group of <h1>–<h6> element(s), and it should be used for subtitles, alternative titles, and tag lines.
Vernon Fowler

The main element | HTML5 Doctor - 0 views

html5doctor.com/the-main-element

html html5 main

shared by Vernon Fowler on 19 Jan 14 - No Cached
  • One important facet of <main> is that it can only be used once per page.
  • Another stipulation of <main> is that it can’t be used as a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
  • Of course, if you use the html5shiv, <main> is now baked in directly.
Vernon Fowler

The section element | HTML5 Doctor - 1 views

html5doctor.com/the-section-element

section html5 html element markup outline document structure

shared by Vernon Fowler on 23 Jan 14 - No Cached
  • A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
  • The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
  • Don’t use it just as hook for styling or scripting; that’s a div
  • ...2 more annotations...
  • Don’t use it unless there is naturally a heading at the start of the section
  • As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.
    • Vernon Fowler
      Vernon Fowler on 13 Jan 15
       
      Use rather than for blog post and for comment content types.
Vernon Fowler

HTML5 Form Validation - Showing All Error Messages - 0 views

www.tjvantoll.com/...ion-showing-all-error-messages

forms usability errors validation HTML5

shared by Vernon Fowler on 10 Apr 18 - No Cached
  • an :invalid pseduoselector that can be used to select all elements with validation errors
  • only give an error for the first field
  • showing the users only the first error message is bad
  • ...2 more annotations...
  • Browsers that support HTML5 form validation have one thing in common; if a <form> is submitted and has errors on multiple fields, the browser will only display the first error to the user.
  • instead of listening for submit on the <form>, I instead listen for a click on the <input type="submit">. Since the user is also able to submit the form pressing enter in text inputs, I attach a keypress listener to them to ensure the same logic runs.
Vernon Fowler

- HTML: Hypertext Markup Language | MDN - 0 views

developer.mozilla.org/...number

forms HTML5

shared by Vernon Fowler on 02 Oct 19 - No Cached
  • A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
  • <input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
  • inputs of type number support these attributes
  • Vernon Fowler on 02 Oct 19
     
    " elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip."
Vernon Fowler

Document Outlines | HTML5 Doctor - 0 views

html5doctor.com/outlines

semantic structure headings html5

shared by Vernon Fowler on 10 Dec 12 - No Cached
  • The sectioning elements act quite literally as their name suggests: they define sections of the parent element. These sections can be thought of as child nodes whose headings fall under their parent heading, regardless of their rank.
  • Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.
  • For accessibility reasons, we recommend each sectioning element have a heading, even <aside> and <nav>, as shown below. If you don’t want these headings to be visible, you can always hide them with CSS.
  • ...2 more annotations...
  • It’s best if you use logical heading levels — <h1>–<h6> — at least until the new outlines are more widely supported.
  • Unfortunately, there is little support for the new outlining algorithms right now. Search engines may be experimenting with it in their crawling algorithms as you read this, but as far as we know, headings are treated just as they were before. You won’t be penalised for using them, even if you use multiple <h1>s (which have always been okay as far as the spec is concerned). Check out our HTML5 and Search Engine Optimisation article for more on search engines and HTML5.
Vernon Fowler

Bruce Lawson's personal site  : The best of s - 0 views

www.brucelawson.co.uk/...best-of-time

time html5 webdesign NED12 markup

shared by Vernon Fowler on 21 Aug 12 - No Cached
  • Update 10 August 2012: in response to a query, I checked again and pubdate is gone from both the WHATWG and W3C specs.
  • Previously, you could only mark up precise dates. So, 13 November 1905 could be expressed in HTML <time datetime="1905-11-13"> but November 1905 couldn’t be. This is a problem for historians where sometimes the precise date isn’t known.
  • Neither can you indicate date ranges. To mark up From “21/02/2012 to 25/02/2012″, use two separate <time> elements.
  • ...3 more annotations...
  • So <time datetime="P4D"> is a duration of 4 days
  • <time datetime="1905"> means the year 1905
  • <time datetime="1905-11"> means November 1905
Vernon Fowler

aFarkas/html5shiv · GitHub - 0 views

github.com/html5shiv

html5 shiv ie browser javascript

shared by Vernon Fowler on 19 Jan 14 - No Cached
  • Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets. <!--[if lt IE 9]> <script src="components/html5shiv/html5shiv.js"></script> <![endif]--> Manual installation Download and extract the latest zip package from this repositiory and copy the two files dist/html5shiv.js and dist/html5shiv-printshiv.js into your project. Then include one of them into your <head> as above.
Vernon Fowler

Designing a blog with html5 | HTML5 Doctor - 0 views

html5doctor.com/designing-a-blog-with-html5

html5 markup semantic DIG252 blog

shared by Vernon Fowler on 22 Jun 14 - No Cached
  • use the header, footer, main and nav elements to mark up the broad structure of the page. Doing this will make your site more accessible to real people who use some assistive technologies
Vernon Fowler

HTML5 Forms: Search Type Demo | Wufoo - 0 views

www.wufoo.com/...5-search.html

HTML5 form input attributes search

shared by Vernon Fowler on 06 Mar 18 - No Cached
  • The results and autosave attributes shown above are not standard. In WebKit and Blink browsers you can add the non-standard results attribute to get a looking glass icon to click to see the latest searches, and autosave to keep them across page loads.
  • When a value is present, a gray x control shows up on the right of the input in IE, Chrome, Safari and Opera (but not Firefox or Chrome on Android) which can be clicked to clear the value.
Vernon Fowler

HTML5 sectioning elements, headings, and document outlines | 456 Berea Street - 0 views

www.456bereastreet.com/...headings_and_document_outlines

NED12 webdesign html5

shared by Vernon Fowler on 21 Nov 12 - No Cached
  • To prevent the footer’s heading from becoming the page heading we can wrap the footer element’s contents in a section element:
  • This really feels like a hack, but it does move the footer heading to its expected position in the document outline.
  • Since there is no heading in the nav element, it becomes “Untitled NAV”.
Vernon Fowler

Extending HTML5 - Microdata | HTML5 Doctor - 0 views

html5doctor.com/microdata

webdesign microdata NED12 web design HTML5

shared by Vernon Fowler on 17 Nov 12 - No Cached
  • One element can also have multiple properties (multiple itemprop="" names separated by spaces) with the same value: <p itemscope><span itemprop="guitar vocals">Chris Askew</span>  is so dreamy.</p>
  • One element can also have multiple properties (multiple itemprop="" names separated by spaces) with the same value: <p itemscope><span itemprop="guitar vocals">Chris Askew</span>  is so dreamy.</p>
  • One element can also have multiple properties (multiple itemprop="" names separated by spaces) with the same value: <p itemscope><span itemprop="guitar vocals">Chris Askew</span>  is so dreamy.</p>
Vernon Fowler

The article element | HTML5 Doctor - 0 views

html5doctor.com/the-article-element

article element html doctor html5

shared by Vernon Fowler on 05 Sep 12 - No Cached
  • A weblog-style <article> A published date leads us to add a <header>, and there’s also content that would be suitable in a <footer> elements. <article>  <header>    <h1>Apple</h1>    <p>Published: <time pubdate="pubdate">2009-10-09</time></p>  </header>  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>  ...  <footer>    <p><small>Creative Commons Attribution-ShareAlike License</small></p>  </footer></article>
Vernon Fowler

The abbr element | HTML5 Doctor - 0 views

html5doctor.com/the-abbr-element

html html5

shared by Vernon Fowler on 10 Feb 14 - No Cached
  • To get <abbr> working in IE6 and IE7, you need to create the element with JavaScript:
    • Vernon Fowler
      Vernon Fowler on 10 Feb 14
       
      Check you HTML5shim or Modernizr script - either probably already caters for this element.
  • If you’re ever tempted to use an <acronym>, just use <abbr> instead!
Vernon Fowler

What's New in HTML 5.2? - 0 views

bitsofco.de/whats-new-in-html-5-2

html forms dialogue headings HTML5 markup web

shared by Vernon Fowler on 02 Jan 19 - No Cached
  • Headings in a <legend> In forms, the <legend> element represents a caption for the form fields within a <fieldset>. Before HTML 5.2, the content of a legend had to be plain text. Now, we can include heading elements.
Vernon Fowler

Code Guide by @mdo - 0 views

codeguide.co

html css code guide HTML5

shared by Vernon Fowler on 04 Sep 20 - No Cached
  • Compared to <link>s, @import is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach
  • Compile your CSS with a preprocessor like Sass or Less into a single file
  • Place media queries as close to their relevant rule sets whenever possible.
  • ...3 more annotations...
  • Limit shorthand declaration usage to instances where you must explicitly set all available values.
  • Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.
  • For a complete list of properties and their order, please see
1 - 20 of 35 Next ›
Showing 20▼ items per page