Inline Input Adder

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user interface keeps simple for the users who don’t need additional input fields.
In the example video, user can add more more mail attachments one at a time by clicking an “Attach another file” link. The new input fields are exposed instantly below other fields.

Gmail: Attaching a file to an email is not a primary use case, and thus input fields for that are hidden by default. If the user wants to attach a file, input fields for that are only one click away.

What problem does the pattern solve?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

When to use it?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

How to use it?

  • Show only the minimum number of input fields needed to complete the form.
  • Show a link or a button for adding inputs at the top or/and the bottom of each input field group where additional inputs are available.
  • Link/button texts should start with “Add”-word.
  • Add new form fields below (or in some cases above or to the right) existing inputs on the fly – don’t refresh the whole page.
  • Allow user to delete additional inputs.
  • Consider using transition effects to help the user to understand what happened.

Why to use it?

Minimizing the number of input fields keeps the form more simple and clear.

Accessibility

Sources

The pattern is inspired by ‘Inline Additions’ from Luke Wroblewski’s book ‘Web Form Design: Filling in the Blanks’ .

Useful links

Example images (2 examples)

Comments

  • happy wheels (www) ⋅ Nov. 9, 2016 09:29

    I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article.

  • video player download (www) ⋅ Nov. 9, 2016 12:03

    very nice..and very useful to me..

  • free xbox live codes (www) ⋅ Nov. 9, 2016 12:39

    Now you can get xbox live gold membership free of cost you just have to follow very few step,So go and get it .

  • hack wireless (www) ⋅ Nov. 10, 2016 14:13

    have a look at this

  • hoteldekho (www) ⋅ Nov. 11, 2016 11:55

    Get best deals on Hotel Booking - Book budget hotels, cheap hotels, 5 star hotels in India at hoteldekho.

  • update apps (www) ⋅ Nov. 14, 2016 08:48

    now you can update all your by just one click

  • short jokes (www) ⋅ Nov. 14, 2016 08:52

    good

  • Register (www) ⋅ Nov. 15, 2016 12:25

    Thanks for posting this information as it is very helpful for the computer side students you can also visit our website for getting discount on domain provider

  • naturalproductsinfo (www) ⋅ Nov. 16, 2016 11:46

    this information you shared really helpful for everyone

  • fitnessguidefg (www) ⋅ Nov. 16, 2016 12:28

    Thanks for great info I was looking for this information

  • guideonhcgdrops (www) ⋅ Nov. 16, 2016 15:06

    The article you have shared here strikingly sublime. I truly like and regarded your work A promise of appreciation

  • viagra (www) ⋅ Nov. 16, 2016 15:29

    I am so pleased to get this post article and nice information

  • GenericBrandTab (www) ⋅ Nov. 16, 2016 15:46

    very cool and interesting web

  • Forskolin (www) ⋅ Nov. 17, 2016 13:40

    looking for this information

  • Forskolin Weight Loss (www) ⋅ Nov. 17, 2016 14:06

    Thanks a lot very much for the high quality and results-oriented help.

  • Forskolin Pills (www) ⋅ Nov. 17, 2016 14:25

    Thanks for sharing this information. I really like your blog post very much

  • frok (www) ⋅ Nov. 17, 2016 15:02

    Thanks a lot very much for the high quality and results-oriented help.

  • Diet Pills (www) ⋅ Nov. 17, 2016 15:56

    Diet Pills For Women That Work http://www.authoritydietproducts.com/diet-pills-for-women.html

  • Aahna Desai (www) ⋅ Nov. 18, 2016 07:54

    Welcome to my world of paleasure excitement and entertainment

  • Janvi (www) ⋅ Nov. 18, 2016 07:54

    hi gentaman I am offering in hot girl service in bangalore city.

  • priya (www) ⋅ Nov. 18, 2016 07:55

    hi my self priya ,I am most popular model in bangalore city

  • Laila (www) ⋅ Nov. 18, 2016 07:55

    do you want to make your life with full of happiness and stimulation then you must visit bangalolre city.

  • Laila (www) ⋅ Nov. 18, 2016 07:55

    do you want to make your life with full of happiness and stimulation then you must visit bangalolre city.

  • Razer Black friday sale (www) ⋅ Nov. 18, 2016 11:42

    Inline input Adder... Thanks to the blogger for posting this information as you help us for how ,when . why. It is used it is very important for the iT students keep posting more about this I am happy to see this

  • Roshani (www) ⋅ Nov. 18, 2016 22:20

    Hi there i am Roshani Khanna, its my first occasion to commenting anywhere, when i read this piece of content i thought i could also make comment due to this sensible paragraph.

  • Jimmi (www) ⋅ Nov. 18, 2016 22:20

    Your post is very interesting for see, I am personally very fond with your handwriting on this page.

  • getbodyinshape (www) ⋅ Nov. 19, 2016 16:10

    Wow. cool post. I’d like to write like this too –

  • pune escorts (www) ⋅ Nov. 21, 2016 08:05

    http://www.vpuneescorts.com/
    http://www.riyacallgirl.com/

  • pune escorts (www) ⋅ Nov. 21, 2016 08:08

    http://www.riyacallgirl.com/

  • pune escorts service (www) ⋅ Nov. 21, 2016 08:09

    http://www.riyacallgirl.com/

  • pune escorts service (www) ⋅ Nov. 21, 2016 08:09

    http://sofi.in/

  • pune escorts service (www) ⋅ Nov. 21, 2016 08:09

    http://www.nehapuneescorts.com/

  • pune escorts agency (www) ⋅ Nov. 21, 2016 08:09

    http://www.sizzlingescortsagency.co.in/

  • pune escorts agency (www) ⋅ Nov. 21, 2016 08:10

    http://payalrastogi.in/

  • Bangalore Escorts Agency (www) ⋅ Nov. 21, 2016 11:05

    Hello guys if you are want to stand a night with Independent Bangalore escorts service then we are fulfill your requirement our young and virgin Bangalore escorts model.

  • Bangalore Escorts Service (www) ⋅ Nov. 21, 2016 11:06

    Most Beauty, stunning and food looking Miss Bangalore Escorts Girls Diya Gupta, My Bangalore Escorts Service is 100% satisfaction service for you.

  • Bangalore Female Escorts (www) ⋅ Nov. 21, 2016 11:07

    Hi friends now you can online order for fix your dating with Live Bangalore escorts services girl agency, it’s a great offer for everyone fulfillment your physical satisfaction.
    http://liveescorts.co.in/

  • Escorts in Bangalore (www) ⋅ Nov. 21, 2016 11:07

    Direct hit a call and connected with Independent Bangalore escorts service girls and discuss your dating and relationship programs, follow live movement escorts in Bangalore.

  • Independent Bangalore Escorts (www) ⋅ Nov. 21, 2016 11:08

    Dear guys if you are lost your girl friend and life partner don't worry we are offering Bangalore escorts service with hot and celebrities only for you, Bangalore escorts agency 24 hours available for your personal dating.

  • screen recorder softwares (www) ⋅ Nov. 21, 2016 11:42

    very nice article ..have a look at my blog by clicking above link

  • aanrechtblad (www) ⋅ Nov. 21, 2016 18:45

    Really your blog is very interesting.... it contains great and unique information. I enjoyed to visiting your blog. It's just amazing.... Thanks very much

  • knock knock jokes (www) ⋅ Nov. 22, 2016 13:21

    have a look at my blog

  • Bihar Intermediate Result 2017 (www) ⋅ Nov. 26, 2016 13:20

    You have done a great job. I’ll certainly digg it and individually recommend to my friends. I am sure they will be benefited from this site.

  • UP Intermediate Result 2017 (www) ⋅ Nov. 26, 2016 13:20

    You have got the most effective web pages. Thanks a bunch! Its a astonishing website!

  • JAC Intermediate Result 2017 (www) ⋅ Nov. 26, 2016 13:21

    Great website! It looks really good! Maintain the great work!

  • download bit torrent (www) ⋅ Nov. 28, 2016 11:29

    supeer

  • Assignment Help & Homework UK (www) ⋅ Nov. 28, 2016 13:03

    Aiding students regarding assignment help. Assisting them in letting them know what an assignment is, why it is important and how to go about it.

  • Kerala SSLC Result (www) ⋅ Nov. 29, 2016 14:01

    I have been checking out some of your posts and i can state pretty nice stuff. I will definitely bookmark your blog.

  • Karnataka SSLC Result (www) ⋅ Nov. 29, 2016 14:02

    Appreciate it! This a fantastic internet site.

  • Tamilnadu SSLC Result (www) ⋅ Nov. 29, 2016 14:02

    Great work! This is the type of info that should be shared around the web.

  • SSLC Result (www) ⋅ Nov. 29, 2016 14:02

    Extremely individual pleasant and whole lots to see! Thanks for sharing.

  • PUC Result (www) ⋅ Nov. 29, 2016 14:02

    Pretty nice post.

  • Online platform for startups (www) ⋅ Dec. 2, 2016 13:57

    I love the quality of writing with the writer as an applause body.