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

learn more… | top users | synonyms

2
votes
1answer
53 views

When should input fields be cleared in modals, if at all?

I have an invoice page with a button to make a payment. The payment button triggers a series of modals for collecting user payment info (credit card/check details, billing details, payment ...
3
votes
1answer
82 views

Help designing non-mandatory but crucial fields for user input regarding allergy

I have a field that takes user input about allergies to various food etc. This field can not be made mandatory since not everyone is allergic, and therefore should not be forced to fill this field. ...
2
votes
2answers
196 views

What are the best practices for representing a boolean field in a form?

We have an interface for creating a group. These groups can be set to private, which is represented in the database with a boolean. Private: true/false. What are the best practices for representing ...
32
votes
4answers
9k 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, ...
3
votes
4answers
448 views

Combined data and unit form field

Assume you’re helping to design the GUI of a WYSIWYG word processor. Users shall be able to change font size. There could be relative controls for larger and smaller and there could be keyword-based ...
1
vote
2answers
434 views

Single-Field Credit Card Payment. Experience or Published Data?

I'm currently attempting to employ the single-form credit card input solution similar to the one on Brad Frost's website (link below) but I'm facing some reluctance from others on this project due to ...
4
votes
4answers
621 views

Radio input appearance for mixed values

I'm looking for ideas on how to design radio buttons that have a second state that means "no change". So the user selects a few items, similar to how rectangular selection works in Windows Explorer ...
20
votes
5answers
2k views

What is the best practice for password field placeholders?

It seems like the accepted best practice for email fields is to have a label and an example email address. Assuming you want a consistent style, the label will make it clear that it's a password ...
1
vote
3answers
316 views

Which date picker is better?

In my opinion this traditional dropdown menu date picker is easier to use: than this calendar-type, which is more prevalent these days: Reason is, if I want to enter a birth date or a date that ...
2
votes
1answer
115 views

What is the best way to label placeholder call-to-actions?

I'm creating a search input where the user can search for: restaurants, dishes, and cuisines. I was wondering when it comes to placeholder text what is the most proper way to label this ...
0
votes
1answer
64 views

Autofocus on mobile

The user is on a form only page. Does it makes sense to auto-focus the first field so that the keyboard automatically opens up. On the desktop it makes 100% sense, but I am not sure if I need to do ...
2
votes
2answers
251 views

Best way to ask the user how much something cost, approximately?

TL; DR; version: Users are given the possibility to write stories about certain activities they took part in. The price of these activities can vary, so it would be a good idea to give them the option ...
8
votes
4answers
309 views

Canadian Postal Code Input field

The Canadian postal codes is formed from 6 letters and 6 numbers, interposed. Example: M1K 3H7 The Canadian postal code is quite tricky for a user to enter into an input form field, especially on ...
4
votes
3answers
497 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 ...
6
votes
1answer
109 views

Make predictions on network configuration data based on IP

I am currently designing an interface for a network device, which needs to be configured by network admins. They are able to change the network settings (IP, subnet, gateway, dns), which got me ...
89
votes
12answers
23k views

Removing placeholder text on focus

Chrome, Safari, and Firefox 15+ remove placeholder text after pressing first key in the text input. Opera, IE, and Firefox 14 and below remove placeholder text immediately after focusing the text ...
2
votes
1answer
135 views

CMS: Best way to arrange a large number of fields? [closed]

I'm redesigning a CMS and I wanted to gather some opinions on what makes the best user experience for my particular dilemma. Here it is: The CMS controls a marketing-focused website for large ...
4
votes
5answers
305 views

Best way to enter/display relative time in a text box

In a reporting client I'm working on now, there is a need to filter data by different conditions, among which are conditions based on date/time. Decided, that user first selects a predicate from a ...
2
votes
3answers
66 views

Is there any conventions for using alternate fonts in user input fields?

My company is proceeding with a branding initiative which involves a branded font. The desire of the external agency is to apply the branded font to all input controls on the page, including text ...
1
vote
2answers
106 views

Should I limit inputable characters in an internationalized multiplatform app?

Suppose I am releasing a mobile app and website and make it available to English-speaking and non-English speaking users. We already support UTF8 encoding throughout our technical stack. However, is ...
1
vote
3answers
44 views

Why not allow numeric fields to do arithmetic computation?

Is there some reason to disallow arithmetic operation in numeric and other similar inputs? Or is it just lazyness of implementation. Some examples: I can not write an order for 6 bolts for 17 ...
1
vote
2answers
161 views

How to design a threshold input?

So I've got this fun little component I'm trying to put together. In this application users can set up a quality range which will be used to categorize objects based on where they fall on that range. ...
7
votes
3answers
424 views

“Floating labels” vs “Fixed small labels” on the the web?

On devices with small screens floating labels can improve readability, since the size of the placeholder's text tends to be considerably bigger than the one in the small labels and the latter just ...
4
votes
3answers
245 views

Should dropdown background color be same as other (text) inputs on a form?

Today I noticed one really annoying thing in a new layout from a designer. In the new design, all dropdowns had much darker background than other text inputs. For one, the contrast was quite poor, ...
0
votes
1answer
109 views

User-friendly date interval/duration input

I'm building a configuration page for a web application and some of the parameters are durations. Most of these durations are in days but there are some that might be specified in weeks, hours, or ...
3
votes
4answers
551 views

What's the best label for an 'occurrences' field?

I have a field where the user needs to enter the number of times they want to send out a document but need a better label. Firstly, they select the frequency (weekly, monthly, yearly) and then there ...
-1
votes
1answer
81 views

What is the best way to implement tags? [closed]

I am developing a piece of software in java. In one of the inputs, the user should be able to add some tags, just like the ones of this page. I'd like to find out the best way to do this. Are there ...
1
vote
2answers
56 views

Warning and Critical numerical ranges

We have a system where users should be alerted when different metrics goes outside of specified boundaries. The user should be able to configure these boundaries for each metric. There is a warning ...
2
votes
1answer
72 views

Should number input fields also include dividers { . - }?

When we sign in to our online bank we often use our social security number which from the government has a dash in it. As in YYMMDD-XXXX (for Swedish). And when we want to transfer money from our ...
45
votes
4answers
6k 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 ...
3
votes
2answers
165 views

How to define the number of people assigned to an activity in a friendly way (with regular updates)?

I work on a gaming web app. The user (player) has to assign people to different kind of activities on multiple views. Each view has 1 to 5 activities and a max amount of people. The user can assign 0 ...
0
votes
2answers
258 views

When is it appropriate to use a NumberPicker view in a touchscreen device app

In what kind of scenario should I actually use a NumberPicker in my mobile phone app user interface? By NumberPicker I mean a view on which the user can swipe to change the number, and the numbers ...
1
vote
1answer
154 views

Are users more likely to capitalize their names in name input fields?

I have a registration form where users are required to provide their first and last name. I've been contemplating implementing some sort of auto-capitalization callback but after reading this post I ...
1
vote
3answers
302 views

Use the same search box to search different types of data

I'm trying to figure out an elegant solution to this problem, but haven't had any great ideas. (This question is similar but doesn't really answer my issue) We allow our users to search different ...
8
votes
3answers
1k views

Display input text that exceed input width

I'm having some issues when the user types extensive text in a small input field. I need some good way to display data that will be cut off. I tried to use a Bootstrap based Tooltip or Popover on ...
1
vote
2answers
87 views

How to deal with whitespace left by fixed field width?

I am creating an infopath 2010 form, which will be accessed through a browser. Unfortunately, the browser based infopath field widths don't change based on the width of their contents. So, if you ...
0
votes
1answer
70 views

Consistency on tables with readonly / disabled fields (including inputs, dropdowns and buttons)

In a table (datatable) I have editable rows as you can see in the mockup. Under some conditions rows' input, dropdown and button must be readonly or disabled (unchangeable). The important note here ...
8
votes
3answers
828 views

Alignment of input fields in a form with plain text

I have a details page containing a list of information and input fields at the same time. Sections are alternating between information and input fields. I am debating between the alignment of data. ...
22
votes
5answers
3k views

Is it standard practice to indicate on the form that Caps Lock is on?

In forms where certain input fields have case sensitive input data, is it an accepted or standard practice to indicate somewhere on the form that caps lock is on? I am thinking that this concept ...
2
votes
2answers
525 views

Is it acceptable to have an editable field visible on hover?

I have a chart that is mostly used for viewing, but can be edited. It is a bar chart of percentages (beneath the bars) that can be edited. Unfortunately, if I display the fields the table becomes more ...
2
votes
1answer
331 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. ...
49
votes
11answers
9k views

“Typocaptcha” - an alternative to CAPTCHA?

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 ...
0
votes
1answer
43 views

Enhancing web addresses as displayed in a browser location input

Web addresses (URL, URI, IRI …) are composed of hierarchical data of several kinds. They are mostly treated as plain text, but browsers have started to highlight certain parts (the domains) and hide ...
0
votes
5answers
108 views

What is this type of interaction/component called?

When a user fills out some input fields and adds it as an entry to an existing list. Usually there's a way to edit/delete these entries as well.
1
vote
2answers
69 views

How to lay out content when the workflow for creating and consuming them is different?

I'm doing a site that makes people write "cards" quickly. Each card contains of a title and a body. However, the designed workflow is that the user: Writes the body, listing out the detailed events ...
2
votes
1answer
129 views

Is it necessary to show a label/icon next to language picker inputs? If so, is there an universal way (icon/word/etc) to express “Language”?

An example of a classic language picker (label + dropdown): Is it really necessary to show a label or icon next to the input? If so, why? and what would be the best choice? Are labels(like the ...
2
votes
4answers
142 views

Field label alignment and the problem of internationalization

The i18n problem When designing for an internationalized app there are some feasibility issues that come up against UX concerns. Here's the one that's on my mind. To account for variable text ...
10
votes
6answers
1k views

Convey to user that they can input absolute numbers or percentages

I have a quoting form in which I want users to have the ability to add a discount. The discounts can be added as percentage or absolute values. My current design is a text field and a dropdown for ...
2
votes
1answer
93 views

Separate console input field?

When creating a console like window, what are the advantages of: having user input in the same control as the output having separate controls for input and output windows? As I see it having ...
2
votes
3answers
169 views

How to increase visibility of required fields without interfering with error visibility

Context This is a heavily used internal application. Users are on the phone with clients during interaction with the UI. There is a small set of required fields indicated by an asterisk. Since the ...