Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Designing forms

From: Mobile Web Design & Development Fundamentals

Video: Designing forms

Designing forms to work well on mobile is also something you're going to have to pay close attention to. Now, forms on mobile devices are naturally constrained by several things. There is the width of the screen, there is the device's input capabilities, and so on. There is, however, a nice basic checklist that you can follow to make sure that your mobile web forms work pretty well. First, minimize the number of screens that the user has to pass through, because this increases the amount of time the user has to spend focusing on input and responding to responses.

Designing forms

Designing forms to work well on mobile is also something you're going to have to pay close attention to. Now, forms on mobile devices are naturally constrained by several things. There is the width of the screen, there is the device's input capabilities, and so on. There is, however, a nice basic checklist that you can follow to make sure that your mobile web forms work pretty well. First, minimize the number of screens that the user has to pass through, because this increases the amount of time the user has to spend focusing on input and responding to responses.

Also, each form has to go through an individual HTTP request and so on. So if you can minimize the number of screens, that helps a lot. Also, try to use native web form controls instead of customs ones when possible. A good example of this is using the select list. Most mobile web browsers provide a native implementation of the select list that is well suited to the form factor and the native experience on that device. So when you have a chance, try to use the native form controls, because in many cases, especially in the future, mobile web browsers will provide platform-native and optimized ones for form entry.

Use top-aligned form labels instead of labels that are left or right of input fields, and we'll take a look at an example of that and why you should do it. Give the user the option to display password characters as they enter them. I don't know about you, but whenever I am using level device I usually have it right in front of my face, and it's not very often that I've got somebody over my shoulder jumping around trying to see my password. So if you have a form on your web site that requires the user to enter a password, consider giving them the option to enter that password as fully visible characters.

Then finally, use the new HTML5 form input types, and we'll go through a quick review of those as we get to them. First, let's look at using top-aligned form field labels. Usually you'll see a form on a web page screen that looks something like this, where you have the label next to the edit field where the user is going to enter data. The problem with this approach is that on some form factors, when the user puts the focus in the edit field, the user experience zooms in, so the user can focus on the form field.

You can see that the problem here is that when that happens the label gets cut off, and you're like, "Okay, now which field was I entering data in?" So this can cause confusion. However, if you use top-aligned form fields, that won't happen. You can see here that in this case the form fields are underneath the labels that they go with. This has several advantages. First, you don't need any fancy CSS or tables to lay the form out. It's just optimized for the vertical scrolling experience.

The labels also stay visible when the form is zoomed in, and they work well when using left-to-right or right-to-left text. In some languages, the text goes from right to left and when using this kind of form label layout, it works well, regardless of the direction of the language text. Localization is also easier. If the field names grow when translated-- so for example, if I were to translate those labels into German, then they triple in size-- they don't cause the form to reflow, or at least it will reflow vertically.

Top-aligned labels lend themselves to vertical scrolling. The user can just use their thumb and scroll through the contents. Let's look at handling password entry. Giving user the option to show characters when entering passwords results in a better experience. So again, let's imagine that we have our form on our web page. You can see that in this case entering a password where you get all dots is not a very good experience, because as I'm typing on a small keyboard, I might more easily make a mistake. If I make a mistake, it's hard for me to see what the password is.

Now, some platforms do this automatically for you. They show you each character as you type it in. Again, this is better, but it's not the best experience, because I might miss it, or I can't see the whole password, and if I am moving around while I am doing this, it's not entirely obvious that I'll be able to see the character before it disappears behind the dot. So give the user an experience of something like this, where they have a check box they can check off, and if they choose to, they can show the characters, but if they're in an environment where they're surrounded by people, or it's not private, then they can choose to uncheck that box and enter the characters normally in a normal password-entry format.

Finally, let's use the new HTML5 form input types. Now I've got another title here on lynda.com that focuses exclusively on web forms and it covers these new form input types, called HTML5 Web Forms In-Depth, but I am going to quickly review them here for use in the mobile context. HTML file defines more than a dozen new input types, and you can use them right now, because they will fall back to plain text fields in older browsers. There are two types of form enhancements. There are input types, which give a hint to the browser to display a more appropriate user interface for certain kinds of fields, and there's input attributes, which provide enhanced interactivity or other functionality on the form field, for example, giving the form field the autofocus, or making it required, or so on.

Now, I am going to focus here on the input types because that's what's most germane to the mobile context. And there are input types for email, URL, number range, and so forth, and we'll see examples of these in just a moment. So let's go ahead and jump over to the code and take a look at some of the concepts we've discussed here. So here we are in the code, and what I am going to do in this example is take a form that's using form labels that are on the left side of input fields and adapt it to use top-aligned labels, and I am going to do that in a way where each one of the form factors gets the form laid out appropriately.

So let's take a look at the code. Right here, you can see I have this style sheet defined for a label, and you can see here that I'm setting a width and a text align, and you've probably seen something like this in forms that you've used. So here are these two form inputs right here, text and password, and I've got a username and password label next to each. So let's see how that looks in the browser. You can see that the labels are right-aligned so that the colons line up with each other and the form input fields are next to each other right here on the labels.

So if I resize the window, you'll see that what happens, however, is that in the case where we want the labels to be top-aligned, there is this width over here that maybe looks okay in the desktop case, but in the mobile case it doesn't look so good. So what we are going to do is fix that, and I'm going to go back into the code. So what I am going to do is go over to my snippets file and under the Mobile Forms section I am going to copy these lines right here. Now we haven't covered media queries in depth yet-- that's going to come later in the chapter--but this is a little trick that you can use to make the labels line up on the top of input fields when they're in the mobile form factor and behave otherwise when they're on the desktop.

So I am going to copy that code, and I want to come over here and then down below my original label style sheet, I am going to paste that in. So just in a nutshell, what this is doing is saying, "Hey, on screens where the max width is 480 pixels, display the label as a block element instead of an in-line block element and have the width to set to auto instead of whatever the width was set up here." So if you've got form fields that are laid out right-aligned using a fixed width like this, this is a neat little trick that you can use.

So I am going to save that. Let's go back to the browsers. In this case, we are going to look at them in the mobile browsers to see how they look both before and after. So I am going to go back to the desktop. And before I show you the example, what I am first going to do is show it to you in Android and in Windows Phone, and you can see that before I refresh the page the layout here is not really optimal for a mobile. What we really want is to have these labels on top of the form fields. So what I am going to do then is copy the file that I just edited over to the web server.

So I am going to copy this into my server, and I am going to replace it. Okay, now I am going to refresh, so I will click in here, hit Return And you can see that in this case now we've got form labels that are left-aligned with the screen and above the input, and I will do the same thing over here on Windows Phone, and you can see that the same thing happened. I now have a top-aligned label on top of the input field. And let's go back to the desktop browser.

And if I refresh, the behavior is still the same in the desktop where we have the left-aligned label, but in the mobile browsers it looks correct. Now, let's take a look at the new input types on Safari for mobile. So here we are on the Mac, and I've got my iPhone Simulator running, which you should have if you have the Xcode development environment installed. And I am going show the HTML5 form input types on Mobile Safari, because Mobile Safari has really good support for the new input types in HTML5.

So this is the document that I am going to be working on, and you can see I haven't put them in yet. The URL that I am looking at is the mobileforms_start example, which is in your exercise files on the local web server, and I've copied it in here, and it's also in your Exercise Files folder. So following the workflow from before, I'll edit the file in the exercise files and then copy it over to the web server. So I am going to start by opening up the mobileforms_start in my Xcode editor, and here we are. And I'll scroll down and you can see that this form right here, this is where we are going to put the new HTML5 input types, and to do that, I am actually going to open up my snippet file.

So here in the examples folder, I am going to open this with Xcode. Here's my snippets. I am going to scroll down to the Mobile Forms section, and I am going to copy this code right here. And I am going to go over to the mobileform_start page, and I am just going to paste this in. I'll paste that in right there. So let's take a look at what it is that I've pasted in. Let me save this first. All right! So I've pasted in some form fields. Here are the input types, and here are the labels that go with them.

So I have placed it in a set of four fields. There is a number field, an email field, a URL, and a telephone field. And you're probably used to seeing input type=text in normal web forms, but HTML5 introduces a number of new input types, a few of which I'm demonstrating here, because they're supported well in Safari. So for example, this type=email tells the browser that an email address is expected in this field and URL and so on. Some of these input types come with additional attributes.

For example, in the case of number, there is min and there is and there is step. So to see how these work, let's go ahead and save this, and we'll go back out to the finder. And what I am going to do is copy the file that I just edited, which is the mobileforms_start, and I'm going to copy that. And I am going to go over here, and I am going to go ahead and paste it. And I'll replace the existing one.

So now when I refresh, you can see now that the input fields have been placed into the form. So let's take a look at what happens when I place the focus in each one of these. For the numeric input fields you'll notice that when I give it the focus, instead of giving me the normal text-based soft keyboard, the keyboard has now been changed to optimize numerical input. So I'll click on Done. Now let's click on email. Notice here that in the case of the email input field, I am getting a keyboard that's optimized for email input.

You can see down here there is an @ sign and so forth for entering email addresses. If I click in the URL field, you'll see that the keyboard has changed to be optimized for URL inputs. It's a subtle change, but you'll see that the @ sign is now s slash. There's a .com down here. If click and hold on that, I get the other kind of top-level domains. Let's try the tell input field. In this case when I place the focus inside the tell input field, the keyboard changes to be optimized for entering phone numbers. So using the new HTML5 input fields, your mobile web forms can be optimized on certain mobile devices that understand this input types and really make the task of entering certain types of data easier for the user.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24414 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.