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

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 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 different type 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 what your form will look like on 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 versions operating system Android 4.4.2 and higher mobile platform now uses hardware acceleration. This allowed us to increase the interface rendering speed by 1.5 – 3 times.

According to your request mobile site form found 2833 results

• Developing good navigation for a website is one of the key factors good development of the project and the fact that visitors begin to explore the site in order to check all the nooks and crannies (bookmarks, images, text, etc.) for information. Watch and get inspired for your own great projects.

  Compliance: 7

• When designing mobile applications, a developer faces various pitfalls that can ruin all efforts. IN this lesson We will describe the 6 most insidious and common mistakes when working on versions for mobile devices.

  Compliance: 7

• In this lesson we will figure out how to create an original message form in the form of a typewriter. All the main functions of this unit, which has gone out of use, will be carefully restored with using CSS and jQuery.

  Compliance: 7

• Here you will find out the whole truth about the sites ecommerce: According to recent research in this area, at least 59.8% of potential buyers refuse to pay for something they have added to their cart (MarketingSherpa 59.8%, SeeWhy 83% and MarketLive 62.14%). Main question: Why do customers abandon purchases so often? The fact is that there are some fundamental mistakes that e-commerce website developers make very often. Whether there is a general principles that make it difficult for users to buy our products? And is there any meaningful way to improve the sales performance of what we sell?

  Compliance: 7

• The nicest new feature in HTML5 is the ability to add default text to form fields. The placeholder attribute allows you to display in form fields specific text while they are empty or not in focus (when the field is in focus, it is cleared). This is a stylish feature, but still it is not supported by all browsers. In this tutorial, I'll show you how to use Modernizr to determine if it's supported by a given browser, and if not, populate form fields with default text dynamically using jQuery.

  Compliance: 7

• Modular grid can provide significant assistance when creating a website. It provides both the visual structure for site elements and the environment for content. She happens to be in a simple way create a balanced and uniform website.

  Compliance: 7

• When developing a project interface, you always want it to be simple and understandable for the user. No matter what your site offers, you need to find a balance between simplicity and functionality. It is very important to ensure that the user can easily find and understand any functions of your project, ideally without loading other pages.

  Compliance: 7

• Imagine the emotional turmoil of a user who needs to add just a couple of characters to submit a form with a large number of manually filled fields, and suddenly all the data is lost. Terrible. Unless, of course, there is a way to recover the data to avoid the fate of Sisyphus.

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. The complete list of input data types is 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:

UX designer from IBM Zoltan Collin.

To bookmarks

Zoltan Collin

Dropdown list forms seem obvious design solution: They're easy and cheap to create, they don't take up too much space, they automatically confirm the information you enter, they're supported by all browsers and platforms, and users are already used to them.

Designers most often use drop-down lists inappropriately, but in the opinion of the director of Google product Luke Wroblewski, this pattern should only be used as a last resort.

Let's look at some restrictions:

• The dropdown options are invisible until the user clicks or taps the form. In addition, at first glance it is impossible to predict how many lines will be in the list - two or fifty.
• Selecting an option from a drop-down list is a multi-step process, especially on mobile devices: the user first needs to tap the form and open the options, scroll down and find the one they want, select it and close the list.
• Dropdown lists make designers lazy because it's so easy to add all possible options to one list without any prioritization. Because of this, the dropdown list is very similar to another template - the "hamburger" menu.
• Scrolling through long lists like selecting a country is a nightmare. Especially on mobile devices, where keyboard search is usually not available.
• On some devices, the field to display options is very small, so swiping can be a nightmare.

Quantity visible options list on iOS may seem extremely insignificant

The good news is that there is a large number of alternative elements for data entry, which in many cases will work better than drop-down lists.

Estimate the number of options

You should not use drop-down lists for decisions where you need to choose one of two options. Try a checkbox or radio button instead.

For small amount For mutually exclusive options, a form in the form of radio buttons or Segmented Control buttons is suitable. The user will immediately see all available options, and will not have to expand the list.

Example of using Segmented Control buttons

The number of visible options depends on the screen width and text length. However, you should not use more than five options

Use an input form with a filtered dropdown list for a large number of exactly certain options, when the user knows exactly what he needs to find.

Instead of scrolling through the entire list, users can enter the first letters and select filtered options

For large and diverse lists, it is better to use existing user data to ensure that popular answer options are included in the list. In this case, 90% of users will be able to immediately select the required option, and the remaining 10% will click on the “Other” option, which will be clarified in the next question.

And although “Other” is not the most elegant solution,prioritization can improve the UX for most users.

Rate your preferred input form

One of the benefits of a dropdown list is that users don't have to type as much. However, if you need to type a little, and the data is requested quite often (for example, personal information), then it is more convenient to enter them rather than select from a list.

On mobile devices, the easiest way to enter your birth year is to use the numeric keypad rather than the drop-down list

Generally speaking, the numeric keypad is the most effective method enter a numeric value.

​Even if the list values ​​are sorted in order, it may be easier for users to type them in by hand instead of scrolling through them.

If it is important for you to confirm the data that a person enters, use an input form with a filtered drop-down list.

For example, when the user needs to specify a state, filter the list available options maybe just one letter

This is especially important if the sorting order of the list elements is not completely clear.

For example, users do not understand by what principle currencies are sorted. Make it so they can search by both its name and abbreviation

The same applies to the list of countries.

For integer numbers - such as the number of passengers or items in a cart - it is best to use a stepper. It will allow users to increase or decrease the value with one click.

For fractional numbers or variables located on a scale, it is best to use a slider.

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 cluttered, especially when you're asking the user for a lot 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 a field, and clear text is one of the main ways to make a 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 must occur 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 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 needs to enter a number credit card, only show number input so that the user enters numbers and not 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.