Something like these:

form field group arrangement

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.

  • Since I can't see the complete form I'm a bit confused of what the names and dates are for? Can you elaborate? Sep 3 '13 at 7:56

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.

  • 1
    That would be the placeholder attribute...
    – Lg102
    Sep 3 '13 at 6:03
  • The placeholder attribute is a very neat solution, but we don't have sufficient support yet. The pattern is still pretty good though.
    – puppybeard
    Sep 3 '13 at 15:17

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.

  • Can you explain why this would be of benefit? You may well be right and this is an ideal solution, but we really need more information from you on this one. One-line answers don't really convey any reasoning or descriptions.
    – JonW
    Dec 3 '12 at 9:10
  • Updated my answer.
    – kontur
    Dec 3 '12 at 9:38

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:

UI screenshot

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.

enter image description here

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.


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: enter image description here


agreed with most of the answers. i would suggest keep it simple and be consistent whatever option you choose. i can think of couple more options for this type of data. you can have Plus button at top or bottom row but make it obvious.

Option 1 enter image description here

Option 2 enter image description here

Option 3: this option is different where you can make added entries to read only mode. User would be able to edit or delete entry by enabling row for editing. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.