CODEWITHSUNDEEP
htmlcheckbox
isharailanga
isharailanga

Reputation: 595

How to organize checkboxes in a neat way in my html code?

How to organize checkboxes in a neat way in my html code?I want the 10 boxes to appear one over one in 2 lines,Is there a specific methd to arrange them.This is the code I'm working on. HTML 5 

    <body>
        <form name="myForm" method="post" action="form2.html">
            <table>             
                <tr>
                    <td>Completed Subjects  :</td>
                    <td>
                        <input type="checkbox" value="IPE">IPE 
                        <input type="checkbox" value="CF ">CF
                        <input type="checkbox" value="MIT">MIT
                        <input type="checkbox" value="DCCN-I">DCCN-I
                        <input type="checkbox" value="ELS-I">ELS-I
                        <br/>
                        <input type="checkbox" value="ST-I">ST-I
                        <input type="checkbox" value="ITA">ITA
                        <input type="checkbox" value="FCS">FCS
                        <input type="checkbox" value="DBMS-I">DBMS-I
                        <input type="checkbox" value="ELS-II">ELS-II
                    </td>
                </tr>                       
            </table>
        </form>                         
    </body>
</html>

Upvotes: 1

Views: 1178

Answers (1)

glend
glend

Reputation: 1622

You have two options, as i see it. Use a list;

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Use a table, one checkbox per cell;

<table>
    <tr>
        <td><input type="checkbox" value="IPE">IPE</td>
        <td><input type="checkbox" value="CF ">CF</td>
        <td><input type="checkbox" value="MIT">MIT</td>
        <td><input type="checkbox" value="DCCN-I">DCCN-I</td>
        <td><input type="checkbox" value="ELS-I">ELS-I</td>
    </tr><tr>
        <td><input type="checkbox" value="ST-I">ST-I</td>
        <td><input type="checkbox" value="ITA">ITA</td>
        <td><input type="checkbox" value="FCS">FCS</td>
        <td><input type="checkbox" value="DBMS-I">DBMS-I</td>
        <td><input type="checkbox" value="ELS-II">ELS-II</td>
    </tr>
</table>

Upvotes: 1

Related Questions