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

  • Explainer Video Production Company US (www) ⋅ April 21, 2016 10:33

    Actually, you are right and share with us a great information that needs to know everyone as I. Today I was sent a project about explainer video production company US, at what time I had to face problem as you have discus, but after watching this video easily my filed was delivered by mail.

  • itunes code (www) ⋅ May 13, 2016 12:40

    Hi! i have seen this video and it is actually interesting for me.One more thing that i liked this liked that you had given good examples.

  • write my assignment for me (www) ⋅ June 6, 2016 12:32

    it appears you really need to actualize XOR AND with discrete segments (resistors, diodes, transistors)? I would very suggest purchasing bundles instead of building them yourself. You can get a few doors on one little double inline bundle that fits pleasantly on your breadboard or whatever.

  • whatsapp hack (www) ⋅ June 7, 2016 10:29

    the way by which you express your thoughts and solve the answer of typicall question simply is the greatest that way is really appreciatable.thanx for clear our all doubts.

  • a10 (www) ⋅ June 24, 2016 10:53

    I like your all post. You have done really good work.

  • roblox (www) ⋅ June 24, 2016 10:54

    I appreciate your working style at the end just my request is please share with us some more great post...

  • color switch (www) ⋅ June 24, 2016 10:54

    I think your post is very interesting and mostly i keep looking for like this type of websites where i learn or get new concept.

  • mortal kombat x (www) ⋅ June 24, 2016 10:54

    I am happy to visit on your site. Thanks to share it.

  • Michael Perter (www) ⋅ June 24, 2016 14:44

    That's an enjoyable excellent! Well how do you texture about city illuminations? They're justly engineering, colorful and good-looking in an artificial and synthetic way. Like man-made stars. Just try and straight how you feel everywhere them.

  • free itunes codes (www) ⋅ July 5, 2016 10:25

    I assure this may be beneficial for most of the people.

  • E Liquids Canada (www) ⋅ July 11, 2016 16:51

    Coding is not an easy work for any developer, it needs lot of skills and experience to solve the bug and query. The above video is really give interesting knowledge about the inline input adder which is great for young and growing developers.

  • thesis writing help (www) ⋅ July 12, 2016 10:21

    Our professional essay writer service meets all standards of business ethics.

  • assignment help service (www) ⋅ July 18, 2016 14:48

    This is especially nice one and gives in-depth information. Thanks for this nice article.

  • abcya (www) ⋅ yesterday 07:21

    abcya => http://abcdeya.com
    slither.io => http://sli-therio.com
    wings.io => http://wingsiomods.com
    happy wheels => http://happywheels8.com/
    pokemon go => http://pokemongo-apk.com
    games for kids => http://games-forkids.com/