Best way to show a form field group with multiple values?

Question

Something like these:

http://imageshack.us/photo/my-images/221/screenshotgh.png/

The button below adds a new group where the user can fill each of the fields. I think that isn't best way to show because the list could be one-to-infinite and the usability is lost.

Answer 1

I'd try to avoid making a form with so many unlabelled fields, as a general rule.

However, if you have to use this, I'd suggest that you have the default text of each input in each new row be descriptive of the input type.

So instead of 6 empty input fields, have 6 input fields where the value is there, but is grey, not black, to show it is default text.

Input one would have the value "First Name", user two, "Last Name", and so on. You should then use a javascript which clears the default text when the input field gains focus, and replaces it when the element loses focus, if the element has had no text added.

Answer 2

You can repeat the lables-row every n rows.

So in your table head you have a row like "Firstname | Last name | ... " and you repeat this row of labels every, let's say, 25 rows. The user adds new rows, and after adding the 25th row a row of labels (with different visual look) is inserted that repeates the column's content label, thus ensuring that for another screen length of new rows inserted the label for each column is visible.

Answer 3

I think puppybeard's answer is good, however the illustration in Mike's answer could be improved upon by leveraging the law of proximity/similarity by placing all of the add/delete actions into the far-right column:

How it would function is clicking the plus button enables the row and adds a new "add row" below. You could even experiment with not having any editable text box containing a default value, because the "new row" with it's disabled elements with default values would always be directly under new rows.

Depending on your use case and how many rows you think you might have, you might need to take additional steps to help identify the fields, but for up to maybe 10 rows I think this solution would work well.

Answer 4

It seems like there are two actions (reviewing and adding) users could be doing on this (I could be wrong, so feel free to correct me).

For reviewing existing data, along the lines of kontur's answer, I've used persistent headers with success in long tables (see the first example here http://css-tricks.com/examples/PersistantHeaders/).

For adding new rows, I think puppybeard's answer works the best.

So you could end up with something like this:

Answer 5

So long as you put labels for the fields above the respective columns I'm not seeing a big problem. It wouldn't even be a problem if they have so many rows that the column headers scroll off the page as by then they'd have plenty of very recent experience with the form and examples filled out for reference that they'd know what goes into a new row.

If however they are loading the form and it already has many many rows already pre-loaded then you've got a bit of a problem. You might want to enclose the grid of fields into a div with overflow set to scrolling, just so the column headers stay in view. And then put a stretchy handle on the div to resize the div if they want to see more than the default number of rows.