Wondering if I can nest input types

Question

I'm making a website for my business and in this form I would like for them to choose what's wrong with their device. If their problem is not on the list I would like for them to type it into a <textarea>. I was wondering if I could make that text area one of my radio button options. So far I have this...

<fieldset>
  <legend> What's wrong with your device </legend>

  <label> <input type = "radio" name = "problem">
    					Cracked Screen </label>

  <label> <input type = "radio" name = "problem">
    					Broken Camera </label>

  <label> <input type = "radio" name = "problem">				
    			<textarea rows = "4" cols = "15" name = "problem" 
                         placeholder = "other problems"></textarea>              
                         </label>


</fieldset>

This seems like it would work but I'm worried that it will just render the text area as its own input under the same label. Any advice?

Also I was wondering how to make my radio buttons able to be unclicked. You can only activate them but you cannot deactivate them. Can that only be done with JavaScript?

Possible duplicate of How do you overcome the html form nesting limitation? — Dev_meno
– Dev_meno, Commented Sep 15, 2017 at 23:08

Brian Stephens · Accepted Answer · 2017-09-15 18:56:01Z

2

HTML input is an "empty" element - it does not have an end tag, and cannot contain any children.

You can certainly make it look like your textarea is part of the radio button control, as you did, but it will not behave like it without some Javascript.

2nd question: the user does not usually have a way to uncheck a radio button. You can do it programmatically (e.g., from a button click), or have another "none" option for them to click.

answered Sep 15, 2017 at 18:56

Brian Stephens

5,28121 silver badges27 bronze badges

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

Comments

Bob Meijwaard · Accepted Answer · 2017-09-17 11:42:11Z

0

You cannot nest inputs. Probably best to do is add JavaScript that displays an input text field when the other option is chosen.

answered Sep 17, 2017 at 11:42

Bob Meijwaard

40810 silver badges20 bronze badges

Comments

krishna raikar · Accepted Answer · 2017-09-17 13:19:36Z

0

Nesting elements not possible

Follow this to achieve what you want.

initially hide textarea element. Toggle textarea visibility based on radio button of your choice.

<fieldset> 
    <legend> What's wrong with your device </legend> 
    <label> <input type = "radio" name = "problem"/>Cracked Screen </label>
     <label> <input type = "radio" name = "problem"/>Broken Camera </label>
     <label> <input type = "radio" name = "problem" class="t_txt"/>  </label>   
    <textarea class="p_txt" style="display:none" rows = "4" cols = "15" name = "problem" placeholder = "other problems"></textarea>

</fieldset>

Jquery

$("input:radio.t_txt").click(function(){
$("textarea.p_txt").toggle();
});

edited Sep 17, 2017 at 13:19

answered Sep 17, 2017 at 13:10

krishna raikar

2,66511 silver badges23 bronze badges

Collectives™ on Stack Overflow

Wondering if I can nest input types

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related