|
Size: 1687
Comment:
|
Size: 3011
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 6: | Line 6: |
| Forms as a way to collect information in an ordered manner pre-date computing by at least a century. Many standards were developed in the paper form era, and have translated to computerized database forms, and then to web forms. The ubiquity of the web -- to software developers if not all users -- means forms for all computing types have settled on these standard input methods. WEBFORM SUMMARY: text – a simple text box that allows input of a single line of text (an alternative, password, is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *) checkbox – a check box radio – a radio button file – a file select control for uploading a file reset – a reset button that, when activated, tells the browser to restore the values to their initial values. submit – a button that tells the browser to take action on the form (typically to send it to a server) textarea – much like the text input field except a textarea allows for multiple rows of data to be shown and entered select – a drop-down list that displays a list of items a user can select from |
This pattern covers the form methods similar to the text and textarea web form fields. |
| Line 23: | Line 10: |
| One line | Text - Text fields are single-line entry methods. For mobile, these should usually be restricted to only accepting as much input as can be seen in the form, though exceptions may be made, such as for URL entry. |
| Line 25: | Line 12: |
| Multiple-line | Textarea - Textarea field are multi-line entry methods, with a fixed display heights. They are often configured to accept an arbitrary (though not infinite) amount of text, and are provided with a vertical scrolling mechanism to display text which does not fit in the field. Convertible - In certain cases, such as the numeric entry field for the '''[[Dialer]]''', mobile devices may display an entry field that appears to be a Text field, but is in fact a Textarea. This variation is used due to the limited space on mobile devices -- the field is only as large as is needed at any one time, and expands to additional lines as more text is entered. |
| Line 29: | Line 18: |
| immediate entry | Text '''Input Areas''' may only be used while in focus. Focus may be granted by scrolling with '''[[Directional Entry]]''' keys or by direct selection with a pen or finger. Scroll and select devices may require explicit selection of the field by selecting the OK/Enter button. This allows the form to be scrolled through quickly, and only when a field needs to be entered will full focus be granted. |
| Line 31: | Line 20: |
| cursor and focus... | While a field is in focus, pressing the OK/Enter key (when available) will perform different functions depending on the context of use. Web forms will work as they usually do for the desktop web. For fields in mobile applications, OK/Enter will generally commit the field, and transfer focus to the next field in the form -- in a mode ready for entry -- or next item in the list. If no other item is available, the entire form will often be submitted instead. |
| Line 33: | Line 22: |
| enter is a linefeed on multi-line, submits forms or exits the field on single line | Whenever content is known to the system, it should be pre-populated so the user does not have to enter it. Pre-populated content is interacted with just as user-entered text, and may be edited, added-to or removed. When large amounts are pre-populated, a '''[[Clear Entry]]''' item should be provided. |
| Line 37: | Line 26: |
| Focus of a field must always be very clearly delineated, with border, background or other effects. Cursors should be cursor and focus... See the '''[[Focus & Cursors]]''' pattern for additional details. |
|
| Line 40: | Line 33: |
hints in the field must be differentiated from actual content, such as by being gray and italics... hints in the field are not pre-populated, and disappear when focus is granted. when all content is removed (or none entered) and focus is removed, the hint appears again... |
Problem
A method must be provided for users to enter text and other character-based information without restriction.
Solution
This pattern covers the form methods similar to the text and textarea web form fields.
Variations
Text - Text fields are single-line entry methods. For mobile, these should usually be restricted to only accepting as much input as can be seen in the form, though exceptions may be made, such as for URL entry.
Textarea - Textarea field are multi-line entry methods, with a fixed display heights. They are often configured to accept an arbitrary (though not infinite) amount of text, and are provided with a vertical scrolling mechanism to display text which does not fit in the field.
Convertible - In certain cases, such as the numeric entry field for the Dialer, mobile devices may display an entry field that appears to be a Text field, but is in fact a Textarea. This variation is used due to the limited space on mobile devices -- the field is only as large as is needed at any one time, and expands to additional lines as more text is entered.
Interaction Details
Text Input Areas may only be used while in focus. Focus may be granted by scrolling with Directional Entry keys or by direct selection with a pen or finger. Scroll and select devices may require explicit selection of the field by selecting the OK/Enter button. This allows the form to be scrolled through quickly, and only when a field needs to be entered will full focus be granted.
While a field is in focus, pressing the OK/Enter key (when available) will perform different functions depending on the context of use. Web forms will work as they usually do for the desktop web. For fields in mobile applications, OK/Enter will generally commit the field, and transfer focus to the next field in the form -- in a mode ready for entry -- or next item in the list. If no other item is available, the entire form will often be submitted instead.
Whenever content is known to the system, it should be pre-populated so the user does not have to enter it. Pre-populated content is interacted with just as user-entered text, and may be edited, added-to or removed. When large amounts are pre-populated, a Clear Entry item should be provided.
Presentation Details
Focus of a field must always be very clearly delineated, with border, background or other effects. Cursors should be
cursor and focus... See the Focus & Cursors pattern for additional details.
notes about input method and reference
field hints in the field, adjacent to the field, pros and cons of each
hints in the field must be differentiated from actual content, such as by being gray and italics...
hints in the field are not pre-populated, and disappear when focus is granted. when all content is removed (or none entered) and focus is removed, the hint appears again...
Antipatterns