Notes from Aquent Summer of Learning webcast: Making Better Forms and Buttons
Instructor: Jim Webb
Big ideas:
- HTML5 form features make life easier.
- Most browsers don't support them yet.
- So use them anyway and provide backups. Use them in ways that don't hurt older browsers and provide alternatives for older browsers.
- Fancy buttons. Hooray!
HTML5 form features make life easier
- Take the input tag, e.g.,
<input type=text>
. - Swiss-army type tag — plainest use is one-line text box. Other HTML4 options for input are:
<input type=radio>
<input type=checkbox>
<input type=file>
(upload file)<input type=submit>
(submit button)
- HTML5 has new input types. Opera is the only one that supports all:
<input type=tel>
<input type=email>
<input type=url>
<input type=search>
<input type=number>
— limit what kind of numbers, positive, negative, integers<input type=range>
— e.g., from 3 to 10<input type=color>
<input type=date>
— calendar<input type=time>
— time<input type=datetime>
— calendar time together<input type=datetime-local>
— calendar time without time zone<input type=month>
<input type=week>
- If a browser doesn't understand the type or can't do anything with it, it just provides a text box.
- Examples when browsers do understand the type:
- Android will change keyboard type based on input type.
- iPhone will change keyboard browser for email.
- Laptops don't show any difference because they don't have virtual keyboards.
- Some browsers (e.g., Chrome) will pop up warnings for fields that were entered incorrectly, e.g., email fields. You can't customize the warning easily, either the words or the look.
- Chrome makes Search fields have rounded corners when you are using a Mac. Chrome also provides an X box on Macs when text is in the search box to let you clear your entry. That's supposed to be ok — letting browser take over.
<input type="color">
pulls up a color picker. You don't get to choose what kind of color picker they get. The O/S and the browser choose. What makes sense on an iPad might not make sense on a Windows machine. The hex value is what gets sent when the form is submitted.<input type="date">
brings up a calendar of the O/S and browser's choice. You can override with JavaScript.
- What can be styled through CSS and what cannot:
- Can style: text fields, buttons
- Can't style: color pickers, date picker, popup warnings, radio buttons, checkboxes (but JavaScript alternatives exists for styling radio buttons and checkboxes and replacing them with images)
- Text types you might frrequently use that have an effect on a mobile platform:
- tel
- url
- search
- Form best practice: use labels and for, tied to id of input, e.g.:
<form action="#" method="GET">
<label for="first">First Name</label>
<input type="text" id="first" name="first">
This is better for screen readers and search engines and does neat stuff like clicking on the label to get into text box.
- Some HTML5 attributes :
required
— form can't be submitted without it.- Usage:
<input type="text" id="first" name="first" required>
- Chrome pops up a warning. Again, not easy to style or change text. Chrome doesn't provide a visual clue to show the field is required.
- Usage:
placeholder="text"
— you want something to appear in field when form appears that goes away when the user types and that reappears if the user leaves the field blank.- Usage:
<input type=text" id="first" name="first" placeholder="Enter first name here">
- You do have some control over styling. Will work for any of these, even color or date.
- Usage:
autofocus
— when user comes to this page it puts focus (cursor) on one form field.- Usage:
<input type="text" id="first" name="first" placeholder="Enter first name here" autofocus>
- Warning: if page loads slowly, you've broken behavior of arrow key because cursor is now in form field. Think carefully before using this.
- Usage:
Most browsers don't support HTML5 form features yet
- Not every browser supports them.
- To find out what is supported where, use sites like caniuse.com.
<input type=color>
— Mac Chrome supports it. On IE6 it's just a text field. Nothing breaks — if you type in a color, it works fine.<input type=date>
— get a calendar if it supports it and a text field if it doesn't.
Use the HTML5 form features anyway but provide alternatives for older browsers
- Use HTML5 form features anyway but have a JavaScript backup plan. E.g., there are JavaScript color pickers that work fine in older browsers.
- Your form page has to:
- Ask, "Does this browser support HTML5 ... ?" If that user's browser supports it, your page uses native HTML5 features.
- If it doesn't, step in with backup plan.
- JavaScript that does step 1 has already been written. The industry leader right now is Modernizr at modernizr.com. (The website is super confusing.) What Modernizr does is test browsers to find out what they support. It doesn't actually modernize anything.
- For step 2, write JavaScript or use JavaScript that other people have written. There are a few generic names for this: shim, fallback, and polyfill (named after a brand of spackle — covers over holes in old browsers). Github HTML Cross Browser Polyfills page has a huge list of polyfills. There's no one polyfill that will solve all your problems.
- Example of polyfill solution for required attribute.
- For step 1, checking the browser, download Modernizr and place it in your site, e.g., in the site's /js folder. In
<head>
, add<script src="js/modernizr.js">
</script>
. - Polyfill is HTML5Forms.js. Download it to your site, e.g., in a js/html5Forms folder. In
<head>
, add<script data-webforms2-support="color.date.placeholder.required" src="js/html5Forms/js/html5.js">
</script>
. Use the instructions to determine what you need to add in thedata-webforms2-support
parameter to specify what you want fixed — in this case, the color picker, the date picker, placeholder text, and required.
- For step 1, checking the browser, download Modernizr and place it in your site, e.g., in the site's /js folder. In
Fancy buttons
- Use CSS attributes that have become available in the last few years
- Rounded corners (
border-radius: 10px;
). Have to use browser attributes as well. - Box shadow (
box-shadow: 12px 12px 12px #000;
). Have to use browser attributes as well. - Text shadow (
text-shadow: 5px 5px 5px #000;
). Have to use browser attributes as well. - Gradients (
background: linear-gradient(135deb, #39abe1 0%, #194c63 100%);
). Have to use browser attributes as well. Best place to build your gradient is Ultimate CSS Gradient Generator. Browsers have not standardized on gradients.
- Rounded corners (
- Example:
- Styling submit button, originally
<input type="submit" id="submit" value="Place Request">
- Changes:
#submit {
padding: 20px; /* padding doesn't take effect on some browsers until background color is added */
background-color: #ffcc00;
border: 1px solid #ccc;
text-transform: uppercase;
font-weight: bold;
-webkit-border-radius: 12px; /* support older versions of Safari */
-moz-border-radius: 12px /* support older versions of Firefox */
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* horizontal vertical blur color using rgba where 0 is fully transparent and 1 is fully opaque; rbga will be gray on any background color or pattern */
}
#submit:hover {
background black;
color: #ffcc00;
}
- Styling submit button, originally