Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Input area

    This article needs a technical review. How you can help.

    Draft
    This page is not complete.

    An input area is a data entry field. There are many variations on what an input area can look like; they can be as simple as a text entry field, and as complex as a multi-part entry field with text entry, value selectors, and buttons.

    Characteristics

    Details coming soon.

    Visuals

    Here you can see an assortment of input areas, suggesting a number of ways they can look.

    Generic inputs

    These are simple text entry boxes.

    Generic input: empty

    Here's a simple input box with no text in it; all you see inside is the placeholder text.

    Generic input: filled

    Here, the generic input has some text entered into it. Note the presence of the "clear" button at the right end of the input field.

    Inputs at the top of the view

    These inputs are located at the top of the view (either at the very top of the screen, or immediately under a header).

    Top: empty

    Here is a text entry field at the top of a page; this should be used under a header.

    Top: active

    This text entry field from the top of a view is active; it has an active "Cancel" button next to it, and the "clear" button in the input field is visible.

    This style of input should be used without a header.

    Note: This needs further explaining; how is this different from the "empty" form in terms of header usage?

    Inputs at the bottom of the view

    These input areas are located at the bottom of the view.

    Empty text input box

    This input area at the bottom of a view includes a "Send" button (it's from an SMS app). Note that the "Send" button is disabled since the input is empty.

    Filled text input box

    Now the bottom input box has some text in it, and the "Send" button is enabled.

    Multi-line text input box

    As the amount of text entered by the user grows, the input area at the bottom of a view expands upward to make room for more content, as seen here.

    		  

    Simple fieldsets

    These fieldsets include a combination of a value selector and a text input box. In this example, the value selector button is used to open a selector to choose the type of contact in a contacts app (work, home, etc), and the text input box is used to enter the corresponding email address.

    Empty

    Here, the text input box is empty, showing only the placeholder text.

    With text entered

    Here, the user has entered an email address. There is a delete button next to the field, in this case, to allow deleting this email address from the contact record.

     

    With the value selector button pressed

    Here, the user has pressed the value selector button; when they let go of the screen, the value selector will open to let them choose the contact type.

    Disabled, with undo button

    Here, the input area is disabled, but has an undo button.

    Note: Need to explain the use case for this.

    Complex fieldsets

    More complex fieldsets may include multiple text input fields, value selector buttons, and regular buttons.

    With content entered

    Here, we have an input area for which multiple text input values are associated with the "Home" category: a phone number, and a name. A button is included to add an address for this category.

     

    Disabled, with undo button

    In this example, the input area is disabled, and has an undo button.

    Note: Need to explain the use case for this.

     

    Interaction

    Here, you can see a series of interactions used to create a new calendar entry.

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: chrisdavidmills, Sheppy
     Last updated by: chrisdavidmills,