Jquery mobile form. Support for HTML5 mobile forms and HTML input types

In this article, we'll take a look at some of the new form enhancements in HTML5 and analyze how they help improve user interface on mobile. In particular, we'll see how forms can be extended with the additional input types offered by HTML5, and show what you can expect from various mobile browsers.

HTML5 Input Types

HTML5 has a bunch of new input types for forms. These types of inputs allow for greater control and verification of input data. Some of them are especially useful for mobile users who often have difficulties with HTML work Input. Full list The input data types are given below:

• color — color selection
• date — date selection
• datetime - select date and time
• email — email mask validation
• number - enter number
• range — range slider
• search - search field
• tel — phone mask validation
• time - timing
• url - URL validation

Of course this list not complete. This does not include types that are accepted by the standard, but their essence is not yet clear. We will consider the most popular and relevant of the above types in this article with examples.

1. Input type color

If this type is supported input signal, then the user's browser will call the built-in color-picker on the client device. The selected color will be presented in the corresponding hexadecimal value RGB.

Example of work:

The style of the popup will depend on your browser. Click the button to see how it works.

Choose your color:

Unfortunately, support of this type mobile browsers leaves much to be desired. Of all the existing ones, the correct mapping can only be found in Opera Mobile And Chrome Android. For all other browsers, an empty text field will be shown. This is worth keeping in mind. Alternatively, you can sketch out the palette in JS or use plugins.

2. Input type date

If supported by the browser, it provides convenient block to select a date.

Example of work:

Date selection:

Note that the input type is Date as well as the options datetime type and datetime-local offer useful attributes, values ​​such as min and max , that can limit and validate user input. We will demonstrate this below in the text.

The HTML Input Date type is supported by almost all browsers. The exceptions are Opera Mini and the default Android browser.

3. Input type datetime and datetime-local

This Input type allows the user to specify a date and time in convenient format. If supported, it will be displayed as a native date/time widget of the device. The difference between these input types is that the first is tied to world time, and the second does not contain any time zone information.

Example of work:

Select date and time:

Not supported in IE Mobile and Opera Mini. On other popular browsers (mobile), the type works more or less correctly, but cases of bugs and glitches are not uncommon. Keep this in mind too, and don't forget about JavaScript fallbacks.

4. Input type email

This type requires no representation. Many people already use it and it is supported by almost all browsers.

Example of work:

Enter your e-mail address:

Before sending, the browser checks the correctness of the filled field and informs the user if the input format is invalid. The calculation is based on the following expression (text)@(domain)

5. Input type number and tel

This is another type that doesn't require much discussion. However, in a mobile environment it is very useful tool. Use it in cases where the user is presented with a set of only numbers. In this situation, he will be offered user-friendly interface numeric keypad.

Example of work:

Select value:

The default range in most browsers is between 0 and 100. That is, the leftmost position of the slider is 0, and the farthest position is 100. You can change the range using the min and max attributes. We can also set the step value through the attribute step. So, to specify a range from 5 to 50, in increments of 5, we would use:

Support from everyone popular browsers, except Opera Mini.

7. Form validation

It is very convenient to set special HTML attribute Input to check the input data. For example, we want to create a field that must be filled in:

People who use your mobile app or website, pursue a specific goal. Typically, what stands between the user and his goal is form. In fact, forms are considered the final step in the process of achieving user goals. This is why it is so important that the user fills out the form as quickly as possible and without any obstacles.

Follow these seven rules to create simple, clear forms:

Rule #1: Forms must be compatible with the way the user enters their data

Make sure that form fields are not obscured by interface elements (such as the keyboard). As the user fills out the form fields, automatically move the fields up.

Rule #2: Minimize the number of input fields and the user's need to type

The longer and more complex the form looks, the less likely it is that users will want to fill out empty seats, especially on small screens. Reducing the number of input fields will make your form less busy, especially when you prompt the user a large number of information.

Make the form as simple and short as possible

But reducing the number of fields is not enough. You should also pay attention to the effort the user expends when entering data. Printing requires a high degree of interaction; there is a high probability of errors, even when entering from a full-size keyboard (especially on a touch screen).

Therefore, try to minimize the need for typing and user error.

Smart defaults

Smart defaults help users fill out all form fields faster and more accurately. For example, you can preselect a user's country of residence based on their geolocation data.

Automatic detection location will save the user time searching for a hotel room

Radio buttons for similar but mutually exclusive choices

When the user is faced with choosing from a list of options, consider using a horizontal list of tags. This allows for more efficient use available space screen.

Sliders for min/max price or budget range

Consider using sliders for fields that contain prices or budget. This way the user can move the slider to the minimum/maximum value. The slider is easy to move horizontally, and you can easily customize this action using visual cues. But remember that the numbers should not be hidden when interacting with the slider (especially when using your thumbs).

AirBnB slider to select price

Rule No. 3: Form headings must be either above the fields themselves or floating

Headings tell the user the main purpose of the field, and clear text is one of the main ways to make the UI more accessible.

Why you should never use text headings inside a field

In-field headers (or placeholders) are text that sits inside a form field that disappears as soon as the user starts entering their data.

Headings inside the field
While in-box headings look good from an aesthetic point of view, this benefit is often overrated. The main mistake is losing context. After the user clicks on the field, the inscription disappears. And, accordingly, he cannot verify that he wrote exactly what is needed.

The text inside the field is not the most best replacement visual header

Also, some users who see that something is already written in a field may think that the field is already pre-filled and they do not need to enter anything else and may ignore filling.

Why left-aligning field headers is bad for mobile devices

The main thing to consider when using left-aligned headings on a mobile device is the screen size and aspect ratio. If the title on the left is opposite the field, then with a vertical screen orientation, you will have very little space left for the field itself. This creates some difficulty in use because there is not enough space left to display what the user types. Not being able to see the text entered creates a problem for users because it prevents them from quickly noticing an input error before submitting the form.

It is very difficult to notice an error if the data is not completely visible

Top Header or Responsive Header

Form titles should be at the top of form fields so that users can see what they are filling out and how. The main advantage of placing form headers above the form is that you can stretch the form across the full width of the screen and make it large enough for data entry (for example, with a font size of 16 pixels). Additional benefit It will be possible to write clear and understandable headings (not limited to 1-2 words).

The main disadvantage of placing headers above the fields is that the entire form takes up more vertical space, which means the user needs to scroll the screen. However, this is not a very serious problem - today, everyone is used to scrolling.

Alternatively, you can use responsive headers to ensure that users have filled out the field correctly. The placeholder text is displayed by default, but after tapping on the field and entering text, the placeholder text moves to the top of the field, as shown below.

Rule #4: Form field validation should happen in real time

In an ideal world, users would fill out the form necessary information and will successfully complete this task. IN real world, users often make mistakes. At the same time, users do not like the fact that after the entire process of filling out the fields, they reach the “send” button and discover that they have made a mistake. It is correct to inform the user about success/error in the field immediately after filling it. The validation message immediately informs the user that the information entered is correct. This approach allows users to fix mistakes faster and without having to wait for errors to be displayed after clicking the submit button.

If you expect specific answers to questions, you need to immediately show what needs to be entered and in what form.

String validation may also be a solution. In the example below, you can see good example, how you can correct a potential error.

Rule #5: Display the keyboard layout according to the input data

Users prefer the corresponding keyboard layout in the application. For example, when the user is asked to enter a credit card number, show only digit entry to encourage the user to enter numbers rather than symbols. This will increase the filling speed and reduce the amount possible errors input.

You need to make sure that this opportunity implemented on the entire application, and not on its individual parts.

Rule #6: Provide useful information in context

Sometimes, there is a need to provide relevant and useful information to simplify the process for the user to complete the form. But such accompanying text should only be used where it is really needed:

• When planning dates, users appreciate context such as a built-in calendar for determining the days of the week. This reduces the need to exit the app to view the calendar, reducing the risk of the user being distracted from their primary task.

• People may be concerned about the security of their data, so you need to show them that their data will not be shared with third parties.

As a rule of good manners, you should not stretch your explanation to 100 characters.

Rule #7: Use a flexible format

Some tasks require the user to accurate information. But, at the same time, requiring the user to provide information in a specific form may go against the principles of good usability. If you ask the user to enter digital information (such as a phone number) into a form, be flexible and create screens that can support different formats input and display information in the most user-friendly form to prevent errors.

Don't use a fixed data entry format

Conclusion

The user may have all sorts of doubts when filling out the form, so you should try to make the process as simple as possible. All the tips described in this article can significantly improve the usability of forms.

This article is an announcement of new functionality.
It is not recommended to use the contents of this article to learn new functionality.
Full description new functionality will be provided in the documentation for the corresponding version.
Full list of changes in new version is provided in the v8Update.htm file.

Implemented in version 8.3.11.2867.

We continue to develop the mobile platform, adding functionality that is already available in the platform for personal computers. In addition, we are developing specific platform capabilities that are relevant only for mobile devices. We will now tell you about some of the most important improvements.

Scheduler

The object model of the “mobile” scheduler has not changed, but the way the user interacts with the scheduler has changed, since the methods for entering information on mobile devices differ from those used on desktop computers.

For example, quick editing element is performed by a single click on the element. Long press calls context menu, and to the appearance of markers that allow you to stretch the element. Dragging is done by long pressing and then moving your finger.

Scrolling the entire planner is done by scrolling with one finger, zooming with two fingers, and so on.

A feature of the current implementation of the “mobile” scheduler is that it does not yet support printing.

Formatted document

Another “new” object that we have added to the mobile platform is FormattedDocument. From the user's point of view, a “mobile” formatted document differs only in that its editing panel is built into the control itself, and is a logical part virtual keyboard. You, as developers, are not required to separate addition to the configuration. The editing panel has a different appearance depending on the type of mobile device (phone or tablet).

Preview of the “mobile” form in the configurator

In the configurator, when developing a form, we added the ability to see how your form will look on a mobile device.

In the command panel you can select an interface option Mobile device, and see what the form will look like in standard orientation.

Here you can rotate your mobile device.

In addition, we have given you the opportunity to choose from large number common devices.

In addition, you can view mobile forms in three different scales:

• Pixel to pixel- when a mobile device screen pixel corresponds to a window screen pixel preview;
• Actual size - when the size of the mobile device on the screen corresponds to the geometric dimensions of the device;
• By window size- when the display scale is selected in such a way that the “mobile” display area fits into the preview window without scrolling.

Batch processing of spreadsheet documents

We have added a number of new objects to the mobile platform that allow you to create packages of displayed documents. This functionality is similar to that found in the PC platform. Thus, you can now, for example, send several documents for printing at once.

Development of deliverable notifications

We have implemented support for the Windows push notification service (WNS, Windows Notification Services). Now you can use the functionality of delivered notifications when running a mobile application on platforms of the Windows family.

We have also reworked the error handling system for sending delivered notifications. In situations where an error was previously thrown as an exception, it is now thrown as a value that you can handle in the built-in language.

Hardware acceleration in the Android operating system

On operating versions Android systems 4.4.2 and higher the mobile platform now uses hardware acceleration. This allowed us to increase the interface rendering speed by 1.5 – 3 times.

Ask any adult what item they cannot leave home without, and they will answer you: keys, wallet, mobile. With the growth of mobile device manufacturers and the release of new and improved models, it is simply impossible not to succumb to this growing trend.

Data from 2014 shows that in the US alone, 90% of adults have a mobile phone, of which 58% are smartphone owners. 42% of Americans own tablets. In a report, eMarketer predicted that by the end of 2014, people will be using about 1.75 billion smartphones worldwide.

These figures only confirm that mobile devices today have turned from luxury items into our everyday necessity. If in the past, phones were only a communication tool, now we rely on them when we work, relax, or go shopping.

Optimizing forms for mobile devices

The rise of smartphones doesn't just make shopping easier for consumers. This is a welcome addition to the already growing online shopping industry. Over time, not only online, but also offline businesses began to understand the importance mobile phones, along with other promotion channels, in obtaining customers.

Forms feedback play a huge role in online shopping, they are also a core element in the mobile platform. We usually encounter them when we make a purchase and the site asks us to provide specific information such as name, address, telephone number and information about credit card. However, many buyers find filling out forms a tedious task, which can ruin their interest. Additionally, online shoppers typically face challenges such as lack of time or poor internet connection, which can negatively impact your mobile site's conversion rate.

Listed below are 10 ways to speed up your customers' mobile transaction performance and also make their online shopping experience enjoyable.

1. Include only the most important details in your form.

If you don't have the patience to fill out tons of forms on a web page while you're shopping online, then your customers probably feel the same way. There is a difference between filling out a Full-On form and filling out a simple form to purchase something from an online store. Compared to the latter, the first version of the form can be quite annoying, and you risk losing the client when he gets tired of filling out the form, especially if he sees that he needs to provide three different phone numbers.

Make online mobile shopping convenient by providing your customers with a simple yet complete order form. Only ask users for valid important information, such as full name, address Email, phone number, shipping information and credit card information. You can also include a drop-down list of states or countries you ship to, or better yet, have your mobile app prompt for geolocation from customers. This way, you can get their address quickly and accurately.

2. Use height alignment for labels and input fields.

Smartphones have a limited viewing area compared to PCs, so it is important that you design a shape that maximizes this area. One way to do this is to use vertical alignment for your form fields. You see, when for a form it is used horizontal alignment, there is a possibility that not all information will fit on the smartphone screen, and a label or input field may be lost. Such order forms can look cumbersome to buyers, which can reduce their interest.

On the other hand, if labels and input fields are positioned vertically, it will be easier for your customers to immediately see the information they are asking for, including what they need to fill out. This will help them be confident in the security of the transaction. This layout will also prevent shoppers from missing any input fields, or worse, filling out the form again.

Plus, it will minimize the visual clutter of your shapes. “What is this” and “More details” buttons can be placed on the mobile version of your website. If these buttons need to be placed on a form, then position them so that customers are not distracted from making a purchase.

3. Use drop-down menus and drop-down lists

Another limitation caused by the limited viewing area on a mobile device is the endless scrolling we have to do to view an entire page or fill out a form. Although scrolling the screen is quite common, smartphone users would prefer to have by quick means shopping for goods online.

Using pull-down menus and drop-down lists can help you reduce the time your customers spend filling out forms. Instead of forcing buyers to choose from huge amount options, you can group individual products into categories. Pull-down menus are also useful for linking descriptions of your key products that you want to put on one page. Just remember not to start describing them while the menu is expanding.

4. Use adequate selection lists

When drop-down lists or pull-down menus don't fit your mobile site forms, you have two great options for mobile forms: predictive search input fields and private drop-down lists.

Predictive search input fields allow your customers to search for the product or service they need by keywords, and also displays a list of all similar results. This type of form is ideal in cases where the search is expected to take a long time, or when there are a number of products that do not fall into separate categories. Closed dropdown lists, on the other hand, work well for lists of specific menu items located in in a certain order, for example in alphabetical or chronological order.

5. Easy input data entry

You've probably come across input fields on forms on both web and mobile sites. Sometimes they are divided into 2-3 parts, such as name, address, telephone number. And although this works on sites, on their mobile versions This use of forms is not always appropriate.

Most often, splitting the input data requires mobile shoppers, fill out all three (or two) input fields in order to simply respond to one label. If you're going to overdo it in the same form, your customers may lose interest in the process. In addition, the separation of input data may be perceived ambiguously by clients, or even confuse them. When designing forms for mobile platforms, use more simple fields input instead of separating them. For example, instead of having two separate fields for first and last name, use one. This will help your customers complete the form faster.

6. Format your form buttons

The “Confirm” button is last step in online shopping, as well as the most important button on the form. If so, then you should arrange it in such a way that your customers remain involved in the process of filling out the form.

Make the “Confirm” button attractive by setting its width to 1/3 of your form, or by painting it a bright color. And instead of simply using the words “Confirm” or “Submit,” use more eloquent calls to action, such as “Register now” or “Submit your application.”

However, avoid using too much bright colors, or making buttons that move too much because it distracts your customers from clicking. You can barely use noticeable change colors or hovering when a button is pressed so your customers know they are done with the transaction.

7. Set zoom using the viewport meta tag

Browsing on a mobile device may either suit customers or they may have to keep zooming in on the page, but if they do this accidentally, they may get lost on the page. You will be able to control this using the viewport meta tag in your forms. This will allow your customers to avoid accidentally scaling the page, or worse, losing sight of the form altogether.

8. Provide the ability to save data

Shopping using mobile phones can be challenging task for some clients, because there is a risk of clicking the “Back” button or accidentally reloading the page, and if all the filled-in information disappears, then your buyer will most likely refuse the transaction. You can avoid this possibility by providing your clients with an “Open in new tab” option when they click on any link outside the form.

Additionally, in cases where users can no longer return to previous pages, make a window with a warning and buttons like “Agree”, “OK” or “Cancel”. By doing this, you can alert your customers whether their data has been saved on the site or in the browser, and thus help them decide to proceed to checkout.

9. Help clients track their progress

Not all buyers are interested in filling out feedback forms. In this case, it will be useful for you to come up with a way to show clients that they are almost at the very end of filling it out. You can do this by placing a loading bar at the top of the form, or by using a simple timeline and percentages to show what step they are at. Remember to limit the number of these steps to save your clients time.

10. Make the form load quickly

Another factor that you should not forget about is the loading speed of your mobile form. If the page takes a while to load, your customer may be off the hook. The very fact that your users have reached the point of filling out the form shows that they are ready to place an order. Don't disappoint them with poorly loading pages. The loading speed of your forms also depends on the number of elements you put on the page, so be careful when using huge images.

And as always, test your forms on all systems and devices

Nowadays, the variety of mobile devices and their interfaces requires us to design forms for each of them. So, make sure you test your forms against different types mobile devices, taking into account the differences operating systems, sizes and browsers. With testing, you can not only improve your form, but also make sure that it works on all available devices.