Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Responsive Web Design with HTML5 and CSS3, Second Edition

You're reading from   Responsive Web Design with HTML5 and CSS3, Second Edition Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users

Arrow left icon
Product type Paperback
Published in Aug 2015
Publisher Packt
ISBN-13 9781784398934
Length 312 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Ben Frain Ben Frain
Author Profile Icon Ben Frain
Ben Frain
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. The Essentials of Responsive Web Design FREE CHAPTER 2. Media Queries – Supporting Differing Viewports 3. Fluid Layouts and Responsive Images 4. HTML5 for Responsive Web Designs 5. CSS3 – Selectors, Typography, Color Modes, and New Features 6. Stunning Aesthetics with CSS3 7. Using SVGs for Resolution Independence 8. Transitions, Transformations, and Animations 9. Conquer Forms with HTML5 and CSS3 10. Approaching a Responsive Web Design Index

HTML5 input types


HTML5 adds a number of extra input types, which amongst other things, enable us to limit the data that users input without the need for extraneous JavaScript code. The most comforting thing about these new input types is that by default, where browsers don't support the feature, they degrade to a standard text input box. Furthermore, there are great polyfills available to bring older browsers up to speed, which we will look at shortly. In the meantime, let's look at these new HTML5 input types and the benefits they provide.

email

You can set an input to the email type like this:

type="email"

Supporting browsers will expect a user input that matches the syntax of an e-mail address. In the following code example type="email" is used alongside required and placeholder:

<div>
  <label for="email">Your Email address</label>
  <input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required>
</div>

When used in conjunction with...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime