Cyberdesign Works

Added over 3 years ago

Web Development Blog - Ipad html forms

First of all let me preface this discussion, we are going to be looking at iPad only features. Desktop compatibility won't be in scope for today. This discussion is aimed and iPad website and iPad application developers using HTML. This article discusses web site design and development for Apple’s Safari web browser. Safari runs on the webkit engine, as does Chrome. Don't get caught out though as Safari iPad has several differences to the webkit implementations of Mac, PC and Chrome.

Ok, so let’s start with the basics.

Start by constraining your scale to exactly 1.0, this stops the iPad zoom feature and lets you design and size your form so that it works well when zoomed to 100%. We will remove this restriction later once the form is finished. Here's the code

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />

Make sure you have this code in the <head> of your HTML document. I've also snuck in a tag that makes the iPhone web app full screen when you add it to the home screen. It also makes it run in its own process so it doesn't mess with whatever tabs you have open in Safari. This is useful because it allows us to test the form on the iPhone too.

So from here we’ll be following the standard HTML form conventions using <form> <input> etc.

Email fields

When you have a field that is for the user input of email, use this code (below) which will make the iPad email style keyboard display (the one with the @ sign)

<input type="email">

Select boxes

Select boxes on the iPad offer limited styling capabilities. In my opinion your best bet is to remove the border and set the background to transparent. Then add a background image of a select box. The list itself cannot be styled to my knowledge. The iPad select box selector popup does make selecting items very easy. Just order your select items in some sort of logical format (alphabetical is usually the go) and it will work like a charm.

Box Shadow on focus

Sorry guys, iPad doesn't support this. Check out my stack overflow post for any updates

iPad submit button

<input type="submit">

If you remove the border, set the background to a solid colour, the iPad will still show a button with a gradient. In my last assignment, that button actually fit in quite well so I left it there. But to work around this I suggest a 1px transparent background image. Such a pain, I know.

iPad screen size

When developing forms, you should consider that the iPad can be oriented both horizontal (1024x768) and vertical (768x1024). To take full advantage of this I would suggest using % widths and padding as the iPad supports these like a charm.

Input placeholders

iPad doesn't support placeholders, not sure why at this stage. Just use a jQuery placeholder, assuming you already have jQuery. You can find it on the jQuery site here

Fancier placeholders

If you want a bit of flair in your placeholders, you might like to try this awesome trick that they use on the Apple checkout system. http://fuelyourcoding.com/scripts/infield/

Basically when you click on the field, the placeholder will fade and when you start typing the placeholder will disappear. It's perfect for label-less fields.

Label click to focus

Unfortunately Safari doesn't support clicking on a field label to bring focus to that field. This is so stupid as even older versions of IE have support for this. No matter, luckily with jQuery you can do this in three lines of code:

$(function(){
    $('label').bind('click', function(){ $(input, this).click(); return false; });
  });

Replacement of a check box or a radio box to make a prettier version - almost no Javascript required

CSS 2.1 selectors supported this but most of the older browsers never supported it. The iPad however does support it, in combination with the code above for label click to focus. It basically it works like this:

1. Setup the HTML as follows:

<label for="checkbox-1">  
  <input type="checkbox" id="checkbox-1">
  <span></span>
</label>

Now the trick is to make the span an inline-block (fully supported by Safari, yes!) and give it the width and height of the image you want to use. Apply that image as the background image for the span and hide the checkbox.

Your CSS will look like this:

label input[type=checkbox], label input[type=radio]{   display: none;} label span{   display: inline-block;  
   background: transparent url(../images/checkbox.png) no-repeat 0 0;  }

So all of that is pretty standard. You've got those attribute selectors in CSS that are also fully supported in Safari, ahh the joys of excluding IE. Now to put your CSS to the real test. This is a CSS 2 selector that took a while to be well support, again Safari /webkit offers good support for this.

label input[type=checkbox]:checked + span, label input[type=radio]:checked + span {
   background: transparent url(../images/checkbox-on.png) no-repeat 0 0;  
}

There are two fancy selectors we are using here. The first is the "+" selector, it basically means select any "span" tag that follows directly after a checkbox or radio box. We've then added the :checked selector which filters our selection to only those checkboxes/radio buttons that are checked. This system works really well for a few reasons:

1. Clicking a label with the "for=''checkbox_id" will search for the input with the matching id. If that input is a checkbox or a radio button it will select that (i.e. :checked) 2. You can modify the styling based on whether an element is checked or not

As mentioned previously, you need a bit of Javascript to make this work on the iPad (boo!). Fortunately it is the same 3 lines of code that I posted above.

That's all for now. Good luck from the web developer's Sydney team of Cyberdesign Works.

Tags: Html 5, Ipad, Web Design, Web Developer, Web Developers Sydney, Web Development