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

  • Obat Kaligata (www) ⋅ Jan. 31, 2017 08:50

    this website very nice!! hehe :D

  • Biaya Operasi Amandel (www) ⋅ Jan. 31, 2017 08:55

    padahal hatiku sering degdegan...iiihh hehe

  • Call girls in gurgaon (www) ⋅ Jan. 31, 2017 16:52

    Hi Guys Looking Me For Call Girls In Gurgaon,I Am Females Escorts Provider In All Location To Gurgaon,In Or Out Calls Facility Available www.escortcallgirlgurgaon.com
    <a href="http://www.escortcallgirlgurgaon.com"> Call Girls In Gurgaon</a>

  • nikky (www) ⋅ Feb. 3, 2017 08:02

    kseeb board will release the <a href="http://sslcresult2017.in/karnataka-10th-results/">karnataka sslc result 2017</a> soon.

  • mrsdirAY55 (www) ⋅ Feb. 4, 2017 11:37

    Thanks

  • john ⋅ Feb. 7, 2017 09:08

    <a href='http://www.freshersliveupdates.com/2017/01/it-jobs-for-freshers-in-chennai.html'>it jobs for freshers in chennai</a>
    it jobs for freshers in chennai http://www.freshersliveupdates.com/2017/01/it-jobs-for-freshers-in-chennai.html
    <a href='http://www.freshersliveupdates.com/2017/01/it-jobs-for-freshers-in-chennai.html'>it jobs for freshers</a>
    it jobs for freshers http://www.freshersliveupdates.com/2017/01/it-jobs-for-freshers-in-chennai.html
    <a href='http://www.freshersliveupdates.com/2017/01/amazon-walk-in-10th-12th-any-graduate.html'>jobs in amazon</a>
    jobs in amazon http://www.freshersliveupdates.com/2017/01/amazon-walk-in-10th-12th-any-graduate.html
    <a href='http://www.freshersliveupdates.com/2017/01/latest-govt-jobs-in-railway.html'> latest govt jobs in railway</a>
    latest govt jobs in railway http://www.freshersliveupdates.com/2017/01/latest-govt-jobs-in-railway.html
    <a href='http://www.jobsatcoimbatore.in/2017/01/coimbatore-jobs-for-freshers.html'>Coimbatore jobs for freshers </a>
    Coimbatore jobs for freshers http://www.jobsatcoimbatore.in/2017/01/coimbatore-jobs-for-freshers.html
    <a href='http://www.jobsatcoimbatore.in/2017/01/coimbatore-it-jobs-for-freshers-mount.html'>it jobs for freshers in Coimbatore </a>
    it jobs for freshers in Coimbatore http://www.jobsatcoimbatore.in/2017/01/coimbatore-it-jobs-for-freshers-mount.html
    <a href='http://www.jobsatcoimbatore.in/2017/01/part-time-jobs-in-coimbatore.html'>Part time jobs in Coimbatore</a>
    Part time jobs in Coimbatore http://www.jobsatcoimbatore.in/2017/01/part-time-jobs-in-coimbatore.html
    <a href='http://www.jobsatcoimbatore.in/2017/01/bpo-jobs-in-coimbatore.html'> Bpo jobs in Coimbatore </a>
    Bpo jobs in Coimbatore http://www.jobsatcoimbatore.in/2017/01/bpo-jobs-in-coimbatore.html
    <a href='http://www.freshersliveupdates.com'> freshers jobs </a>
    Freshers jobs http://www.freshersliveupdates.com
    <a href='http://www.freshersliveupdates.com'> jobs for freshers </a>
    Jobs for freshers http://www.freshersliveupdates.com
    <a href='http://www.freshersliveupdates.com/'>fresherslive update</a>
    fresherslive update http://www.freshersliveupdates.com/
    <a href='http://www.jobsatcoimbatore.in/'>coimbatore jobs</a>
    coimbatore jobs http://www.jobsatcoimbatore.in/
    <a href='http://www.sexvideosfreedownload.in/'>sexvideos freedownload</a>
    sexvideos freedownload http://www.sexvideosfreedownload.in
    <a href='http://www.jobsatcoimbatore.in/'>jobsat coimbatore</a>
    jobsat coimbatore http://www.jobsatcoimbatore.in/

    <a href='http://www.jobsatcoimbatore.in/2017/01/coimbatore-jobs-for-freshers.html'>Coimbatore jobs for freshers </a>
    Coimbatore jobs for freshers http://www.jobsatcoimbatore.in/2017/01/coimbatore-jobs-for-freshers.html

  • Assignment Help Australia (www) ⋅ Feb. 7, 2017 15:20

    keep it up

  • save electricity (www) ⋅ Feb. 8, 2017 16:17

    Thanks a lot for sharing us about this update. Hope you will not get tired on making posts as informative as this.

  • playstore for pc (www) ⋅ Feb. 9, 2017 07:51

    <a href="http://www.playstore-app.org/">playstore for pc</a>s
    This may be a good place to introduce yourself and your site or include some credits.

  • neha (www) ⋅ Feb. 9, 2017 09:35

    I think this is an informative post and it is very useful and knowledgeable. thanks for this article sharing.
    http://1escortshub.com/

  • SusanM Gardner (www) ⋅ Feb. 10, 2017 10:28

    our site or include some credits.

  • bejeweled (www) ⋅ Feb. 10, 2017 10:29

    thanks for this article sharing.

  • reviews of phen375 (www) ⋅ Feb. 10, 2017 13:02

    I genuinely respect that you made this article and shared some superior to anything standard information on this specific subject.

  • uidai status (www) ⋅ Feb. 12, 2017 16:07

    aadhar card status enquiry phone number
    aadhar card update status
    aadhar card status by name
    aadhar card correction
    aadhar card application
    aadhar card check
    aadhar card address change

  • FACEBOOK (www) ⋅ Feb. 13, 2017 09:58

    I think this is an interesting publish and it is very useful and experienced. thanks for this content discussing.

  • Fallout Shelter Hack (www) ⋅ Feb. 13, 2017 14:30

    I truly regard that you made this post and distributed some greater than anything conventional information on this particular topic.

  • Male Extra (www) ⋅ Feb. 13, 2017 15:13

    I have not any term to appreciate this informative article.....Really i am satisfied from this informative article....the individual who make this informative article it was a great individual..thanks for distributed this with us.

  • kuldeep (www) ⋅ Feb. 13, 2017 15:55

    easy process to use shareit app.

  • Obat Borok (www) ⋅ Feb. 14, 2017 02:52

    hjhmmmmm..Boy… I don’t know about this move. I’m not a Reds fan so I may be way off, but I’ve never gotten a sense that Price is really the right person for that job. I know that he hasn’t always had much to work with, so maybe I’m not being fair, but have things improved at all during his tenure?....

  • Obat Ruam Pada Leher Dan Wajah (www) ⋅ Feb. 14, 2017 04:26

    This site very amazing !! yeaah !!wkwkwkwk :D

  • Obat Penghilang Eksim Kering (www) ⋅ Feb. 14, 2017 05:45

    bondan prakoso... yeaah !!

  • Obat Penghilang Benjolan Di Ketiak (www) ⋅ Feb. 14, 2017 09:39

    akulah arjuna yang mencari cintaaaaa.....

  • a10 (www) ⋅ Feb. 14, 2017 11:39

    I really like your article. It’s evident that you have a lot knowledge on this topic.

  • color switch (www) ⋅ Feb. 14, 2017 11:39

    Your points are well made and relatable. Thanks for writing engaging and interesting material.

  • animal jam (www) ⋅ Feb. 14, 2017 11:40

    I recently came across your blog and have been reading along. I thought I would leave my first comment.

  • ssc govt (www) ⋅ Feb. 15, 2017 16:31

    <p>some of my work is here <a title="SSC Notification" href="http://sscgovt.in/ssc">SSC NOTIFICATION</a> <a title="SSC CGL 2017" href="http://sscgovt.in/ssc-cgl/">SSC CGL 2017 </a><a title="SSC CHSL 2017" href="http://sscgovt.in/ssc-chsl/">SSC CHSL 2017</a> <a title="SSC JE " href="http://sscgovt.in/ssc-je-junior-engineer/">SSC JE</a> <a title="SSC Stenographer" href="http://sscgovt.in/ssc-stenographer/">Stenographer</a> <a title="SSC" href="http://sscgovt.in/">SSC</a></p>

  • Obat Sakit Pinggang Dan Lutut (www) ⋅ Feb. 16, 2017 05:00

    Visits on Thursday morning, listened permissions and share insights on health, may be useful, Thank you very much ... :D

  • Obat Penghilang Sakit Maag Ringan (www) ⋅ Feb. 16, 2017 06:46

    View her website is very nice and looks attractive, successful always !!

  • Obat Penghilang Perlemakan Hati (www) ⋅ Feb. 16, 2017 09:18

    I am very pleased to be able to visit this website, amazing !! ... Thank you ...

  • bottle flip (www) ⋅ Feb. 16, 2017 09:23

    Thank you so much admin, while giving us the opportunity to take their link on this forum

  • Obat BAB Keras Dan Berdarah (www) ⋅ Feb. 17, 2017 04:43

    Visits on Friday, permission to visit and do not forget to share the information on this website, Thank ...

  • Obat Penghilang Penyakit Kulit Herpes (www) ⋅ Feb. 17, 2017 09:11

    A visit to the site is very broaden all, Thank you very much, Good luck always !! ....

  • Obat Penghilang Gatal di Bawah Payudara (www) ⋅ Feb. 17, 2017 10:18

    I am very happy to be able to visit this website, Thank you very much ... Unbelievable !!

  • ssc govt (www) ⋅ Feb. 17, 2017 11:00

    sdfgdghdth

  • ssc govt (www) ⋅ Feb. 17, 2017 11:00

    fguyhityik

  • ssc govt (www) ⋅ Feb. 17, 2017 11:01

    rsdyrt5uutyui

  • ssc govt (www) ⋅ Feb. 17, 2017 11:01

    csdfghrtujtj

  • ssc govt (www) ⋅ Feb. 17, 2017 11:01

    rgyrt6ujjtyiky

  • Shweta Mahajan (www) ⋅ Feb. 17, 2017 12:14

    Hello Dear,

    Great Information, i like this blog post very much and waiting for the next, I am Shweta mahajan, a twenty years sensual model from delhi, i am hot deva with the sensual curves and of sexy figure. for more info visit our website https://www.shwetamahajan.com/.

    <a href="https://www.shwetamahajan.com/">Delhi Escorts</a>
    <a href="http://www.preetkaur.com/">Escorts Delhi</a>
    <a href="http://www.dilkaur.com/">Escorts in Delhi</a>
    <a href="http://www.royalangels.in">Independent Delhi Escorts</a>
    <a href="http://www.geetagrewal.com/">Escorts Agency Delhi</a>
    <a href="http://www.shilpichawla.com/">Female Escorts Delhi</a>
    <a href="http://www.shiplichawla.com/">Escorts Service Delhi</a>

    Regards
    Shweta Mahajan

  • shweta mahajan (www) ⋅ Feb. 17, 2017 18:36

    Nice to be here and to reach here where i always wants to gather this interesting stuff. I found so relevant structure for me. <strong><a href="https://www.shwetamahajan.com">Delhi Escorts</a></strong>
    <strong><a href="http://www.royalangels.in">Delhi Escorts</a></strong>

  • Obat Gatal Di Wajah (www) ⋅ Feb. 18, 2017 05:02

    Visits on Saturday, permission to visit and do not forget to share the information on this website, Thank you...

  • Mumbai Escorts (www) ⋅ Feb. 18, 2017 07:38

    Thanks for sharing us about this update and I like this post.
    Thanks for share.

  • Obat Penghilang Biduran (www) ⋅ Feb. 18, 2017 09:27

    A visit to the site is very broaden all, Thank you very much, Good luck always !! ....

  • Obat Penghilang Biduran (www) ⋅ Feb. 18, 2017 09:28

    I am very happy to be able to visit this website, Thank you very much ... Unbelievable !!

  • Obat Gastroenteritis (www) ⋅ Feb. 18, 2017 09:28

    Visits on Saturday, permission to visit and do not forget to share the information on this website, Thank you...

  • nikky (www) ⋅ today 08:21

    Students can check <a href="http://pucresult-nic.in/">puc result 2017</a> at official website.

  • phen q (www) ⋅ today 11:00

    It was excellent weblog and thanks for sharing

  • Gasanbieter Vergleich (www) ⋅ today 13:16


    I truly appreciate this post. I’ve been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thank you again! - See more at: MrX4D <a href="https://www.strom-gas24.de/gasanbieter-vergleich/">Gasanbieter Vergleich</a>

  • Hardeepkaur (www) ⋅ today 13:52

    Hardeep kaur Chandigarh’s high profile model. Twenty three years sensual model. Who is very beautiful. And I am also famous as a Chandigarh Escort also.I read your post and really its very nice. I am waiting for another one. For more information visit my site
    http://www.hardeepkaur.in/
    http://www.diljeetkaur.com/
    http://www.diljot.in/

  • Delhi Escorts (www) ⋅ today 14:01

    Amazing post.love it . Hii ,,,,,,,,,,, I am from Delhi Escorts Club. The most of the independent Delhi escorts that you get in Delhi are known for their charm, loveliness, gesture, and sexy activities. In the event that you book the escorts from some time recently, it won't make any trouble in the accessibility.
    <a href="http://www.delhiescorts.club/">Delhi Escorts</a>
    <a href="http://www.delhicallgirls.club/">Delhi call girls club</a>
    <a href="https://www.yalghis.in/">Yalghis</a>