Create input as child of input

Question

Is it possible to create a button that is the child of an text?

<input type="text">
    <input type="button" />
</input>

The reason I ask is I would like to make a combo box. See this fiddle. Doing this in jquery, the button does not appear. Doing it in regular html, the 2nd input is not a child of the first (in Chrome at least).

I could put a text and button in a span, but I prefer to create the text box like in the example so later the value can be retrieved like: $("#test).val();

PS I know other combo box plugins exist. I would like to roll my own for learning purposes.

That is an invalid html. You cannot have something like that. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Nov 29, 2012 at 15:47

Rory McCrossan · Accepted Answer · 2012-11-29 15:47:18Z

10

This is not possible as input is an inline element - it cannot have children.

answered Nov 29, 2012 at 15:47

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Teun Pronk · Accepted Answer · 2012-11-29 15:51:05Z

4

This will result in invalid HTML, so its not possible to do this. What you can do is create a div, which is a block element and fill it with a text box + button Inline elements.

With some styling in your CSS you can make your div look like a textbox and your textbox like a div, without borders and bevels. Resulting in something that looks like the thing you are trying to achieve here.

To get rid of the textbox look on your input use #YourTextBox {border: none;}

answered Nov 29, 2012 at 15:51

Teun Pronk

1,39714 silver badges25 bronze badges

Comments

robocat · Accepted Answer · 2016-06-07 02:36:47Z

3

The correct answer is that the input tag is a void element that cannot have any children. Inline elements such as span can have children.

Void elements only have a start tag; end tags must not be specified for void elements.

i.e. in HTML5 there can never be a closing tag for an i.e. don't use </input>. HTML5 is not XML and it strongly discourages self-closing tags (/>) i.e. <input /> is not strictly correct HTML5 (although it will work for compatibility purposes). The list of void element tags defined in HTML5 are: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

answered Jun 7, 2016 at 2:36

robocat

5,45250 silver badges66 bronze badges

Comments

Kerem · Accepted Answer · 2012-11-29 16:35:12Z

0

This would not be a valid approach to nest HTML elements in that way. If you take a look at what jQuery plugins do, they usually wrap your <select> element with divs and other stuff. IMHO, you can solve the problem by following a similar approach.

answered Nov 29, 2012 at 16:35

Kerem

3171 silver badge14 bronze badges

Comments

Green · Accepted Answer · 2020-11-12 18:41:14Z

0

Inputs can't have children because they do not end. Here's some info: https://www.w3schools.com/tags/tag_input.asp

edited Nov 12, 2020 at 18:41

answered Oct 28, 2020 at 17:32

Green

5422 gold badges12 silver badges34 bronze badges

Collectives™ on Stack Overflow

Create input as child of input

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related