How to create nested radio and input fields and a span field

Question

Hi I was trying to create the following form in my html

The following is my html:

<td>
                        <div class="input-group" ng-cloak>
                            <table class="row col-md-4">
                                <tr>
                                    <td align="left">
                                        <span class="input-group-addon">

                                        Select either one of the option</span>
                                    </td>
                                    <td align="right">
                                        <tr><input type="radio" value="A"></tr>
                                        <tr><input type="radio" value="B"></tr>
                                        <tr><input type="radio" value="C"></tr>
                                    </td>
                                </tr>

                            </table>

                            </div>

But as you know from this point I don't know how to continue. When I add multiple tr inside the second td, I thought it will work, but didn't. How can I make the form look in that way? Thanks in advance guys.

Answer 1

You would want to use <fieldset> , <legend> , and <label> along with your input elements rather than using a table layout for this.

<legend> would be the element with the text "Select either one..."

<label> would surround your <input>

I will work up an example for you in a moment.

 body { margin: 2em; font-size: 1.3rem; } * { box-sizing: border-box; } .form-row { margin: 2ex 0; white-space: nowrap; } .form-row label { display: inline-block; width: 10em; } [type="text"] { width: calc(100% - 10em); border: 1px solid gray; padding: .5ex .25em; font-size: 1.3rem; } fieldset { position: relative; margin: 0; padding; 0; border: 1px solid black; } legend { position: absolute; left: 0; top: 0; display: block; width: 10em; height: 100%; border-right: 1px solid black; text-align: center; } legend span { position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 100%; } fieldset label { position: relative; display: block; margin: 1ex .2em 1ex 10.2em; padding: 1ex 0; border: 1px solid gray; border-radius: 8px; } fieldset label::before { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 100%; border-radius: 8px 0 0 8px; border-right: 1px solid gray; background-color: #e9e9e9; z-index: -1; } [type="radio"] { margin: 0 25px 0 15px; } 

 <form action=""> <fieldset> <legend><span>Select either one of the options</span></legend> <label for="catA"><input type="radio" name="cat" id="catA" />Cat A</label> <label for="catB"><input type="radio" name="cat" id="catB" />Cat B</label> <label for="catC"><input type="radio" name="cat" id="catC" />Cat C</label> </fieldset> <div class="form-row"> <label for="firstName">First Name</label><input type="text" name="first-name" id="firstName" /> </div> <div class="form-row"> <label for="lastName">Last Name</label><input type="text" name="last-name" id="lastName" /> </div> </form> 

Answer 2

First of all, you can't put a tr inside a td. If you want to do that you need to create a table within the td. You should read up on html tables a bit more.

The simplest way that you could do this to use rowspan which will let you merge multiple rows (as opposed to colspan which lets you merge columns on a row).

See html below:

<table>
    <tr>
        <td align="left" rowspan="3">
            <span class="input-group-addon">Select either one of the option</span>
        </td>
        <td><input type="radio" value="A"/></td>
    </tr>
    <tr><td><input type="radio" value="B" title="Option B"/></td></tr>
    <tr><td><input type="radio" value="C"/></td></tr>
</table>