7

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.

Improve this question
1
  • It's definitely unconventional and surprising behavior for a new field to appear simply as a result of an existing field getting focus.
    – obelia
    Commented Dec 2, 2012 at 23:52

4 Answers 4

Reset to default
8

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.

Improve this answer
3

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.

Improve this answer
2

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.

Improve this answer
4
  • 2
    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
    Commented Dec 2, 2012 at 20:47
  • 1
    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
    Commented Dec 3, 2012 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
    Commented Dec 6, 2012 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
    Commented Dec 6, 2012 at 13:21
0

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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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