Questions tagged [input-fields]

Input fields are several different controls such as textboxes, dropdown lists and radio buttons who reside in a (web) form.

45
votes
4answers
25k views

Character limits on fields - pros and cons and best practices?

Some of our form fields have character limits. We're debating whether we should reflect the current size of data entry, or to simply hard-limit and inhibit data entry beyond that size. In HTML, ...
33
votes
4answers
5k views

Auto Advance to Next Field

When is it appropriate to 'auto advance' from one text field to the next, as in phone numbers and SSN?
37
votes
10answers
30k views

Mark or don't mark required fields if all are required?

If all fields in a form are required should they be marked somehow (eg. with an asterisk)? I see this done a lot and find it redundant? There could be a difference in big forms and small forms, but ...
24
votes
6answers
3k views

Combining all the address fields into one?

Both customers and companies want a quick and easy checkout experience. From what I've seen, a big UX bottleneck at checkout is the billing and/or shipping address(es) because there are so many input ...
3
votes
2answers
130 views

How to set a quantity by entering an exact number, or a difference (add/substract amount)?

I have to design a form with one field being a quantity that represents the number of available items of a given product. I want to allow the user to modify this quantity in 2 different ways, in the ...
37
votes
4answers
3k views

Where should the GUI light source come from?

I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top ...
34
votes
4answers
46k views

What should the character limit(s) for first/last name inputs be? [closed]

We want to create input fields for a user's first and last names. What should the minimum and maximum limits be, if any, and why?
31
votes
8answers
8k views

Is there a recommended size for search boxes?

Do users change their search patterns if the search is shorter? Do users search less if the search box is too large? The only article I'd found is a 2009 Smashing Magazine article: The [Nielsen] ...
9
votes
5answers
2k views

How to improve usability of a form with lots of fields

I'm tasked with re-designing a HTML browser-based form which is completed by technicians as they complete various parts of a task. At various stages of the task they return to this form and fill in ...
9
votes
3answers
1k views

What is the rationale for the design of search input fields?

Having read through a whole bunch of literature on search behaviour and looking at different design patterns, I am interested in the large variation of search input field on the web. Specifically, I ...
22
votes
2answers
2k views

Input Field Widths

In a form with several input fields, is it better to define the same width for all fields (in order to maintain alignment), or to have different sizes for fields that are intended for less data? For ...
14
votes
1answer
1k views

Time (duration) entry in webapp - pros/cons of various designs

In designing a way to enter time durations in a website, there are various proposals below. What are the pros/cons from a UX standpoint for both mouse & touch uses. Yellow boxes show input ...
6
votes
1answer
955 views

Accessibility of in-field labels and help text labels in input forms

Many newer UI interfaces have a preference for input field labels or help texts to be contained within the UI component itself instead of implementing them as separate labels. I was wondering if ...
12
votes
4answers
22k views

For required fields, should we add the red asterisk before or after the field label?

Should we add red asterisk before or after the label of required fields, i.e., to the left or the right of the field name? My boss prefers to add the asterisk before the labels, but I like to add them ...
9
votes
1answer
2k views

Why do so many forms use input masks in for input fields?

To be honest, I find input masks annoying. Different masks on different sites sometimes work differently, such that their behavior unpredictable and it actually makes me take more time to type out ...
6
votes
3answers
629 views

Should I vary input field lengths in a single page checkout form?

I am currently designing a single page checkout form. I would appreciate some feedback on the lengths of my input fields. In the Billing and Shipping sections I have staggered the length of the ...
3
votes
3answers
268 views

A required field that isn't really required?

...the email field in my clients data entry system is required but users of the system are allowed to enter na@na.com if the customer refuses or doesn't have an email address. Is this best practice? ...
96
votes
12answers
31k views

Removing placeholder text on focus

Chrome, Safari, and Firefox 15+ remove the placeholder text after the users first key press in the text input field. Opera, IE, and Firefox 14 and below remove placeholder text immediately after ...
32
votes
6answers
8k views

When and why should date pickers be used?

The above screenshot is from an airline's website. Date pickers are somewhat common on websites - they're especially common for circumstances when you're booking events. Most often when they appear, ...
55
votes
11answers
10k views

“Typocaptcha” - an alternative to CAPTCHA? [closed]

We all hate CAPTCHAs, but to some applications they're a necessary evil. Today I wondered if there's a better alternative we just haven't thought of yet. I considered the dilemma: how do you create ...
41
votes
3answers
4k views

What do you call this input element where a focus will automatically be transferred to next text field after being filled?

I have seen this input element often when inputting a serial number or similar code. Each text field accepts N characters, after which focus is automatically transferred to the next field. Pressing ...
38
votes
7answers
124k views

How to avoid 12:00 AM midnight/noon confusion in a time input field?

I recently specified the wrong deadline for an assignment, for a "dropbox" in the D2L course management application. I was trying to choose 12:00 noon, and the time entry field showed 12:00 right ...
58
votes
4answers
25k views

Why aren't HTML5 typed number inputs right aligned, and should they be?

As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned. I saw that ...
44
votes
6answers
3k views

When the username is an email address should the field be called 'username' or 'email'?

When the username for a service is an email address should the field be called 'username' or 'email'?
15
votes
6answers
2k views

Case-study for hiding the optional fields?

I am currently designing a web form for the Online Travel Insurance System and I am thinking of hiding the optional fields since there were so many of them. Like the image below. I put a Show More ...
18
votes
6answers
43k views

Using asterisk (*) vs required [duplicate]

For a long time, the norm was to put a red asterisk "*" after the field label if the field was required. Now I am observing a shift into replacing the asterisk symbol with the word "(required)" after ...
17
votes
5answers
2k views

Should input fields be cleared out when the user selects them?

I have a few input fields in my form with some default values (numbers). Please note, they are not just placeholders, i.e. they can be used as is, if they are not changed. I was wondering if I should ...
7
votes
1answer
2k views

Placeholder : field label or sample data?

I am designing a generic form. Every input has a label positioned right above it. My question is about using input fields placeholder : Should they be a reminder of the label (Ex : Label : Username ...
6
votes
4answers
2k views

'Same as billing address' checkbox - Ticked or unticked by default?

I'm working on a subscription user journey. Most of the subscriptions are for digital products. However, a few of them may have a print included in the package and we would need a delivery in this ...
14
votes
6answers
3k views

What is the best way to show conditional fields?

We are creating a desktop app where (business) users can enter contracts. The issue is that the contract form contains a very large number of fields, with some of them being conditional. An example ...
10
votes
2answers
581 views

What's the official name of concept of input boxes with tags?

I'm looking for an implementation and the (official) name of this kind of control where it's a inputbox where we can add multiple tags into it. By example, it is used in JIRA like this capture (and ...
10
votes
5answers
2k views

What is the term for a numeric input field of a specific format?

There are new HTML5 input types being defined for commonly used numeric input types such as date, time, telephone number, etc. These terms refer to a specific input format based on the type of numeric ...
6
votes
3answers
1k views

What's the best way to show form labels that are longer than the corresponding fields (which require a short input)?

I'm having trouble with labeling of short input fields. Some labels have standard 280px width approximately, but others are quite small in order to offer clues on the expected input (characters). I'...
4
votes
1answer
2k views

How to design a form that mostly is read-only, but sometimes editable?

Often in database-centric application I need to design a view for records e.g. something like: Name: __________ Phone Nr: _________ Website: ______ Email: __________@________ Location: ____________ ...
3
votes
2answers
2k views

dynamic form design

I have a multistep form setup in my rails app.. In one of my steps the user can enter a friends name, birthday, gender, and the persons interests. They can enter as many friends as they like (each ...
1
vote
4answers
952 views

What is the best UI for overwriting previously saved values?

I am working on designing a standard for how overwrites should be handled on our software. I have come up with a couple different options for when a user needs to make changes to values that they ...
15
votes
6answers
2k views

How to convey a true/false value to a user?

I'm developing an application where users will be allowed to create custom fields that are part of a record, in addition to the fields that are provided by default. Users will be able to choose names ...
9
votes
4answers
1k views

Is it good practice to only accept numeric keystrokes in number-only fields?

I have a form that only takes in numbers as it represents a dollar amount. Currently, the form only accepts numerical keystrokes. Is this good practise?
6
votes
1answer
636 views

Many-to-Many associations - Edit in place or on new screen?

I am trying to design an interface to do two things: Create Items and Objects Create links between Items and Objects (in a many-to-many association) An Item is a simple attribute that must be ...
5
votes
1answer
153 views

Should I clear form data after a new form is selected?

In my web app we have an area where you can choose the type of "query" you want (left block) and then you see the selected form with the fields in the right As you can see, 'Risk' field may appear a ...
4
votes
3answers
431 views

How should I implement Language selection in a CMS?

One of my client must be able to post News to both french and english language on his website. I would like to know how I should design the CMS to be the most convenient for the admin as possible. ...
4
votes
3answers
1k views

Locking input form fields, does it make sense?

In certain views of our web-application, all information is usually presented as input fields as they can be modified. Now, because of our rights and roles system, for some people, several input ...
3
votes
2answers
2k views

An alternative to Indeterminate checkboxes?

How best to display incomplete or indeterminate state? Microsoft UI pattern has an display icon for this - a dark box within the checkbox instead of a check. http://msdn.microsoft.com/en-us/library/...
3
votes
3answers
2k views

Web-Based SQL Query Builder

I've built a simple web-based query builder using a series of dropdown lists such that the only typed input is the final value field. In the example above simply adding the filters consecutively ...
2
votes
2answers
1k views

Allowing the user to add input fields

I have a form where the user can input as many usernames as they'd like. I've decided to show the form with 3 inputs initially, to encourage the user to input more than one username. When the user ...
2
votes
2answers
200 views

Integer input field: special case for unbounded / unlimited

I am developing a form where the user needs to enter the maximum number of allowed things. Zero is a legitimate value meaning that none are allowed. I need to find a special value to indicate that ...
2
votes
1answer
218 views

Do email placeholders affect anything, and which kind should I use?

I'm going to have a small box on my website where visitors can input their email address to subscribe to my website newsletter. It looks like this, and will have a light text placeholder in the box ...
16
votes
6answers
2k views

Is it acceptable to make a text field look like a write in line?

My designer would like to implement a text field that drops down on hover against a white background, and only have a bottom border to define the field. Also, the designer would like to see a flashing ...
6
votes
2answers
2k views

Inline validation icon usability

I have been looking at the styling for validation of input forms of Bootstrap, and wondered if there was a specific reason for where the icons used for inline input validation is positioned. I ...
5
votes
4answers
973 views

Inputs, does removing borders except the bottom one have any benefit?

Until material design, form fields always have a border all around. For me, it's a cultural habit. Users use these borders to identify the field in the page. Google itself, on Gmail, Google Search... ...