HTML and CSS Reference
In-Depth Information
HTML5 Forms and Inputs
Forms were most likely the first time you realized that your web content could become
interactive
. You could not
only interact with your users but also tailor your site and content based on their input. This is essentially the whole
foundation of dynamic content. Allow for interaction, optimize the feedback, and represent the information specifically
to the user who interacted with the ad. With that said, I can't get away with speaking about dynamic ads without
mentioning the updates to the forms and inputs in HTML5. Forms and input tags have long been associated with user
input on the Web. One of the most exciting new features with HTML5 forms is the ability to use client-side validation.
Here's the previous approach with HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form>
<input name="email" oninput=validate(this);>
</form>
</body>
</html>
function validate (input) {
...tons of validation code and regex magic
}
And here's the new approach with HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form>
<input type=email
required
>
</form>
</body>
</html>
That's it! Did you notice it in bold? Just be sure to include the attribute
required
in your input element, and your
browser will handle the input validation. To newcomers, this may seem logical and nothing amazing, but in reality,
previous to this you would need to include some long JavaScript validation/regex function to check the string value to
ensure it's well-formed for the server to handle. Now, the browser handles that all for you. Think about it! Every developer
wants to ensure they have proper validation on their inputs, so if every developer is doing this, let the browser handle it
natively. Why repeat yourself for every project that requires it? This, again, is what HTML5 strives to accomplish.
