Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'd like to hear opinions and pros/cons for the following approach to handling HTML forms http://jsfiddle.net/FsY7y/6/ (this is a simple demo). As user focuses on a field, a new field is added in case user wants to add another item.

There are many possible use cases for this. A good example is adding new ingredients for a recipe. You can have anywhere from 2 to 20 ingredients for a recipe.

One downsize to this approach is that it's impossible to reach the Save button by tabbing through the form.

share|improve this question
It's definitely unconventional and surprising behavior for a new field to appear simply as a result of an existing field getting focus. –  obelia Dec 2 '12 at 23:52

5 Answers 5

up vote 9 down vote accepted

It's an interesting approach that I could see some application for, however not in its current form.

Change the way that it works so that it only creates a new field when some content is entered into the field and not when the field is selected. That way it is still possible to tab through to the Save button.

share|improve this answer

This is a form from HELL. Everyone hates to fill out forms, and if these extra inputs keep appearing it will scare users, especially the ones that are not very web knowledgeable.

Like you said, when user uses tab it creates a filed every time, so its impossible to use without a mouse. Also try this scenario, user types the name out, tabs for next field and starts to write their surname and realize that they are in the wrong field. They will be confused, meaning more time is spent trying to find out what went wrong rather than finishing the form and providing the information that you need. Also if they delete the text in the second field the input field doesn't disappear, confused again...

I would recommend to stay away from this approach, use buttons like "Add a name" if you want to allow users to input more information.

share|improve this answer
I disagree that everybody hates to fill out forms. People hate to fill forms when they are forced to (e.g. ordering from online store) but forms are used in many other ways. Think web application where user creates his/her own library of favorite movies or recipes. I slightly edited the original question and included more suitable use case example. –  finspin Dec 2 '12 at 20:47
Filling out form even in apps like favourite music or recipes is no fun at all, in my point of view. I'd rather see the recipe/music that I like and add it to my favourite list by clicking on a button. –  Igor-G Dec 3 '12 at 10:19
I've just discovered that Vimeo does something similar on its 'Invite Your Friends' page (vimeo.com/tools/invite when logged in). It inserts a new row automatically after tabbing away from the email field, making it possible to escape using the keyboard. –  Matt Obee Dec 6 '12 at 12:39
didn't understand how to escape this, so when I tab new filed is created, also if I press SHIFT+TAB it should take me back to previous field and it doesn't. –  Igor-G Dec 6 '12 at 13:21

Even though I read your description before trying out the demo, I was still a bit surprised when the new field appeared because it's something so unusual. Surprising your users can be good because it keeps them engaged, but it can also have a negative impact if start to feel lost and confused as a result. I think many users would feel lost and confused by the current implementation.

Considering your example of entering lines in a recipe, I wondered why not use a single <textarea> instead? You could still have the benefit of making it appear dynamic by making it initially take up a two-line space. When the user presses Enter at the end of the first line, the <textarea> could automatically expand to have another line. (I don't mean just to contain another line, which in an innate function of the textarea; instead the outside boundary of the whole area could expand so that the user can still see all the text, as in your current implementation.) Implementing it this way has two advantages:

  • There's always a blank line appearing below the current text to indicate that the user can enter more.

  • The user can tab to the Save button (or to the next field in the form) when they're done.

share|improve this answer

My concern with this approach is that:

  • the form is adding fields without the user asking it to (i.e. the user is not in control)
  • the form is never "finished" (there will always be one empty field)

Having said that, this approach might be ideal for a data-entry heavy application, perhaps where users can be introduced to the behaviour. It would certainly save having to click an "add another" button for each instance.

All in all, I think it depends on the context of use and if you were going to implement it, it would definitely be important to test with users.

share|improve this answer

If doing this, consider having a progress bar (e.g "almost there, step 3 of 5") so users know how far they've come and have yet to go.

Also, if a long form consider "save for later" so all info is not lost. Perhaps the user could elect to have a link sent to their email (if they click the link it opens to the form page populated with what they've already entered).

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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