How to handle multiple inputs of the same type in a html form?

Question

Let's say I've got a form in which you can describe a family:

<input type="text" name="mother">
<input type="text" name="father">
<input type="text" name="child">

But I want people to be able to add an infinite number of children to the form. So I can use Javascript to simply continue adding new inputs for more children, but I wonder how I should name these. Do I simply do child1, child2, child3, etc.? And on the backend I simply loop over all the children?

And what if all children also need an "age" input field. Do I simply continue adding fields such as child1_age, child2_age, child3_age?

I guess this would work, but I have the feeling that there's a smarter way of this. Does anybody know of a better way to handle this? All tips are welcome!

Brett DeWoody · Accepted Answer · 2015-04-22 19:31:18Z

5

HTML forms can use arrays as input names. For example:

<input type="text" name="child[]">

answered Apr 22, 2015 at 19:31

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:14:21Z

1

Have a look at this discussion. Introduce the id attribute and keep the name attribute constant.

HTML input - name vs. id

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Apr 22, 2015 at 19:34

Diversity

1,90013 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to handle multiple inputs of the same type in a html form?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related