Input for Multiple Links

Question

We would like users to specify certain pages an action can occur on. There are two conventional ways:

1. textarea with some delimiter (whitespace, commas) between the urls. This is OK since usually the users are webmasters and proficient enough with computers.

2. Separate Inputs: Plus button allows to add another input, Remove button is shown on every input on hover, clicking on the last and empty input creates another one. This is complicated and makes the user click or press tab to move between inputs.

Those are the general solutions I'm aware of. Any better ones?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Using a free-form textarea input is risky because it requires either the user to follow the rules of delimiting data or having a versatile processing script capable of discerning URLs regardless of how they have been entered.

The multiple text inputs aren't a great idea either if their number is fixed. You should do something similar to what Google Docs Forms do:

You start with only 1 option but as you click on the last field a new line is added. A simpler implementation of this approach would be having just one text input and adding the content above it like in the mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

How about a mix of both your suggestions?

starting off with a single blank textarea input (or with a grayed out example URL)

User types URL, and upon tab or enter, that input becomes an entry (below the text area)

Once list entries exist, the trashcan icon appears on hover

In this setup, the user just types and tabs/returns (natural form filling actions) and only clicks when deleting.