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?](https://stackoverflow.com/questions/597596/how-do-you-overcome-the-html-form-nesting-limitation) — Dev_meno, Sep 15 '17 at 23:08

score 2 · Answer 1 · answered Sep 15 '17 at 18:56

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.

score 0 · Answer 2 · answered Sep 17 '17 at 11:42

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 '17 at 11:42

Bob Meijwaard

388
9
20

krishnar · Answer 3 · 2017-09-17T13:19:36.213

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();
});

Wondering if I can nest input types

3 Answers3