Input from a User – Mobile Forms

Unlike working with Navigation in the mobile environment, forms input will be more about styling and proper use of HTML tags/attributes. Because of the size of the screen, we need to find good ways that we can overcome the small space. This means providing an easy and clear way for users to enter information into a form, as well as keeping the form as short as we can.

Using Labels

Labels serve multiple purposes for web designers. First we can use them to describe our form elements. This is what we often use them for, especially when used on desktop designs, as it allows for people with visual impairment to see and use the web form. However, they also give a means to increase the click-able area of the element, so to give that form element focus. Labels on text input boxes put the cursor in the box. While clicking on a label for a radio or checkbox allows you to change the setting of the input/input set.

Positioning Form Elements

Often forms have a couple of columns of inputs, and/or their labels go next to the elements. However, we want to offer as much usable room as we can, and reduce the chances of selecting the wrong form element. A simple solution is to vertically stack form elements, so the label is above (for text/select/password/text area) fields, and only next to the element for small choices, like radio buttons and check boxes. Assuming we have the HTML below:

My Special Form
Your Name:  Choices:

ShowHide
 First  Second
Comment:  Send Info

Then, our CSS would need to start to allow our label’s with a class of full, to be block level elements.

form {
    width: 350px;
    border: inset 2px #ccc;
    padding: 5px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
select, input[type="text"], textarea, label.full {
    width: 100%;
    margin: 0;
}
label.full, button, div.row {
    margin-top: 10px;
    display: block;
}

Select vs. Radio Buttons

Most mobile browsers have a separate popup menu for select fields. This requires the user to move away from there they are to make a selection. Therefore, if you are offering only 2 to 4 choices, maybe 5, you should try to use a radio button – as it will be easier for your end-user to use. Keep in mind that labels will often dictate how many elements you can put on a row.

Borders

One common theme you will probably notice is that most form elements are actually flat in a mobile web form. This is because developers want to avoid wasting the space used by the inset tag, and would rather reset the border to be a single pixel, to give more space to the user to see their input.

input, select, textarea {
  border: 1px solid #333;
}

Padding

To make text easier to read, designers will often add extra padding to an element. This makes the “tappable” area larger, and moves the text away from the border, so it is still easy to read.

input, select, textarea {
  padding: 5px;
  /* need to use border-box for the box-sizing to make it fit */
  /* with the new padding into the same space */
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
}

You will probably want to have the box-sizing set to make sure your element align properly.

Sizing

Some people like to increase the font size of form elements, so they are easier to read and check for errors. This becomes dependent upon what you want to do, your users, and the site you are working on. You don’t want to be too different from the rest of your site however.

Or view directly on YouTube

Input from a User – Mobile Forms was originally found on Access 2 Learn