HTML5, webdev

HTML5 Fields – What Can You Do With It?

HTML5 is the newest specification for HTML, the language that web browsers read to display web pages. HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms. Here is a list of the major browsers that support these days the new features:

Another place to see which browser support what type of field is

As a web developer these improvementscan save you lots of time and effort (psss… no java script is needed to validate your fields) in order to see them live I’ve created this ‘playground for HTML5 fields’ so it will be easy to ‘play’ and see what each field is giving you. Here is a basic set to kick things:

    <input type="text" required />

    <input type="email" value="" />

    <input type="date" 

    <input type="range" min="0" max="50" value="10" />

    <input type="search" results="10" placeholder="Search..." />

    <input type="tel" placeholder="(555) 555-5555" 
     pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

    <input type="color" placeholder="e.g. #bbbbbb" />

    <label>Number Range</label>
    <input type="number" step="1" min="-5" max="10" value="0" />
<button value="Go">Go</button>

Good luck and try the JSFiddle link if you wish to fork it and see what are the fields are doing in each case.