How to make a web form with 3 columns?

html css stylesheet

15,415

Solution 1

Basically, if you put all three into divs with a class of column like so:

<div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <div class="column">
            <label>Name: </label>
            <input type="text" name="name" id="name"/>
        </div>
        <div class="column">
            <label>Email: </label>
            <input type="text" name="email" id="email"/>
        </div>
        <div class="column">
            <label>Password: </label>
            <input type="text" name="password" id="password"/>
        </div>
    </form>

Then you can apply the following style to the column class:

.column
{
    float: left;
    width: 33%;
}

Solution 2

you can use this for all form or if you want to do this in a particular form so you can define css name with class or id.

   form div 
    {
         display: inline;
         width: 33%;
         float: left;
    }

Solution 3

Hey you can used display:inline-block;

HTML

<div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <div class="column">
            <label >Name:
            <input type="text" name="name" id="name"/></label>
        </div>
        <div class="column">
            <label>Email:
            <input type="text" name="email" id="email"/></label>
        </div>
        <div class="column">
            <label>Password:
            <input type="text" name="password" id="password"/></label>
        </div>
    </form>
</div>

Css

.column
{
    display: inline-block;
    margin-left: 23px;
    vertical-align: top;

}
.column + .column{
margin-left:25px;
}

Live demo http://jsfiddle.net/bfZR4/2/

Solution 4

Put every 3 fields in a div with id section. and then each of field in a div havin class subsection

<html>
<head>
<style>
        /* ----------- My Form ----------- */
        .myform{
            margin:0 auto;
            padding:14px;
        }
        #stylized{
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            background:#ebf4fb;
        }
        #stylized h1 {
            font-size:14px;
            font-weight:bold;
            margin-bottom:8px;
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            padding-bottom:10px;
        }
    #stylized label{
        font-size:11px;
        font-weight:bold;
        text-align:right;
    }
    #stylized input{
        font-size:11px;
        padding:4px 2px;
        border:solid 1px #aacfe4;
        width:70px;
        margin:2px 0 20px 10px;
        display: block;
    }
    #section{
        width:100%;
        padding: 10px;
    }
    .subsection{
        width:30%;
        margin:0px 5px 0px 5px;
        float: left;
    }

        /* --------- End of Form --------- */

</style>
</head>
<body>    
            <div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                <h1>Data</h1>
                <div id="section">
                <div class="subsection">
                <label>Name: </label>
                <input type="text" name="name" id="name"/>
                </div>
                <div class="subsection">
                <label>Email: </label>
                <input type="text" name="email" id="email"/>
                </div>
                <div class="subsection">
                <label>Password: </label>
                <input type="text" name="password" id="password"/>
                </div>
                </form>
            </div>
            </div>
</body>
</html>

thanks

View more solutions

15,415

Author by

Klausos Klausos

Updated on June 04, 2022

Comments

Klausos Klausos almost 2 years

How to make a web form with 3 columns using CSS? In the above example all elements are placed just in a single column.

<html>
<head>
<style>
        /* ----------- My Form ----------- */
        .myform{
            margin:0 auto;
            padding:14px;
        }
        #stylized{
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            background:#ebf4fb;
        }
        #stylized h1 {
            font-size:14px;
            font-weight:bold;
            margin-bottom:8px;
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            padding-bottom:10px;
        }
    #stylized label{
        font-size:11px;
        font-weight:bold;
        text-align:right;
    }
    #stylized input{
        font-size:11px;
        padding:4px 2px;
        border:solid 1px #aacfe4;
        width:70px;
        margin:2px 0 20px 10px;
        display: block;
    }
        /* --------- End of Form --------- */

</style>
</head>
<body>    
            <div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                <h1>Data</h1>
                <label>Name: </label>
                <input type="text" name="name" id="name"/>
                <label>Email: </label>
                <input type="text" name="email" id="email"/>
                <label>Password: </label>
                <input type="text" name="password" id="password"/>
                </form>
            </div>
</body>
</html>

Not a machine over 6 years

Is there a way to create a placeholder for the occasional column entry where there is no input required? If I leave one input out it skews the entire table and type="hidden" does the same.
Not a machine over 6 years

I created a READONLY input with class attributes border:none; background-color:transparent; however the tab still navigates to the invisible input. If I can skip over the invisible input I would be thrilled!