Skip to main content

Posts

HTML5 Features - Email Inputs

7. Email Inputs If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox. <!DOCTYPE html >       < html   lang = "en" >    < head >         < meta   charset = "utf-8" >         < title > untitled </ title >    </ head >    < body >         < form   action = ""   method = "get" >             < label   for = "email" > Email: </ label >             < input   id = "email"   name = "email"   type = "email"   />                < button   type = "submit" >  Submit Form  </ button >   

HTML5 Features - Make your Content Editable

6. Make your Content Editable The new browsers have a nifty new attribute that can be applied to elements, called contenteditable . As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage. <!DOCTYPE html >       < html   lang = "en" >    < head >         < meta   charset = "utf-8" >         < title > untitled </ title >    </ head >    < body >         < h2 >  To-Do List  </ h2 >          < ul   contenteditable = "true" >             < li >  Break mechanical cab driver.  </ li >             < li >  Drive to abandoned factory            < li >  Watch video of self  </ li >          </ ul >    </ body >    </ html

HTML5 Features - To Quote or Not to Quote.

5. To Quote or Not to Quote. That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself. < p   class = myClass   id = someId >  Start the reactor.   Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.