Notes from Aquent Summer of Learning webcast: Making Better Forms and Buttons
Instructor: Jim Webb
- 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.,
- Swiss-army type tag — plainest use is one-line text box. Other HTML4 options for input are:
<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=number>— limit what kind of numbers, positive, negative, integers
<input type=range>— e.g., from 3 to 10
<input type=date>— calendar
<input type=time>— time
<input type=datetime>— calendar time together
<input type=datetime-local>— calendar time without time zone
- 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.
- What can be styled through CSS and what cannot:
- Can style: text fields, buttons
- Text types you might frrequently use that have an effect on a mobile platform:
- 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.
<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.
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.
<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.
autofocus— when user comes to this page it puts focus (cursor) on one form field.
<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.
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
- 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.
- For step 1, checking the browser, download Modernizr and place it in your site, e.g., in the site's /js folder. In
- Polyfill is HTML5Forms.js. Download it to your site, e.g., in a js/html5Forms folder. In
<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 the
data-webforms2-supportparameter to specify what you want fixed — in this case, the color picker, the date picker, placeholder text, and required.
- 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 (
- Styling submit button, originally
<input type="submit" id="submit" value="Place Request">
padding: 20px; /* padding doesn't take effect on some browsers until background color is added */
border: 1px solid #ccc;
-webkit-border-radius: 12px; /* support older versions of Safari */
-moz-border-radius: 12px /* support older versions of Firefox */
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 */
- Styling submit button, originally