CODEWITHSUNDEEP
javascripthtmlcssjquery-ui
Andrus
Andrus

Reputation: 27955

How to arrange input elements to columns or other way to improve form readability

Order entry form is created from fields defined in database. Every field contains text caption and input element.

input element is input type=text, checkbox or select element. If can be also jquery ui autocomplete or datepicker containing dropdown button in right side. JQuery UI is used.

In output input elements are not aligned. It looks messy:

messy form

How to improve readability of this layout?

How to align left sides of input elements vertically so that they start at same column ? if browser window is resized, new column should appear or removed automatically.

Maybe there is some magic css or jquery ui feature which allows this? Also it may be possible to make all field widths the same. Minimum width of each input element is defined in database. Rendered width can be somewhat bigger. For captions, it is possible to make two pass rendering: in first pass find maximum number of characters in caption and calclulate width for every caption.

html used is:

<form id='_form' class='form-fields'>

<div class='form-field'>
<label class='form-label' for='Klient0_nimi'><u>Customer</u></label>
<span id='span_Klient0_nimi'><input id='Klient0_nimi' name='Klient0_nimi'  style='width:100px'  class='ui-widget-content ui-corner-all' maxlength='80'  lookup='Klient' value='Brad Abrams' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

<div class='form-field'>
<label class='form-label' for='Tasudok'>Number</label>
<input class='ui-widget-content ui-corner-all'  id='Tasudok' name='Tasudok' value='798'  style='width:100px'  maxlength='25' />
</div>

<div class='form-field'>
<label class='form-label' for='Kuupaev'>Date</label>
<input maxlength=10 size=10 class='ui-widget-content ui-corner-all'  id='Kuupaev' name='Kuupaev'   value='1/26/2012' />
</div>


<div class='form-field'>
<label class='form-label' for='Maksetin1_tingimus'><u >Condition</u></label>
<span><select id='Maksetin1_tingimus' name='Maksetin1_tingimus' class='ui-widget-content ui-corner-all' style='width:100px'  
 lookup='Maksetin' value='10' >

 <option value=''></option>
 <option value='10'>10 days</option>
 </select>
</span>
</div>


<div class='form-field'>
<label class='form-label' for='Eimuuda'>No change</label>
<input type='hidden' value='false' name='Eimuuda' />
<input type='checkbox' id='Eimuuda' name='Eimuuda'/>
</div>

<div class='form-field'>
<label class='form-label' for='Doksumma'>Total</label><input style='text-align:right'  id='Doksumma' name='Doksumma'  disabled='disabled' class='jqgrid-readonlycolumn' readonly='readonly' tabindex='-1'  value='0.00'  style='width:100px'  maxlength='0' />
</div>

</form>

Upvotes: 2

Views: 11559

Answers (5)

Popular Demand
Popular Demand

Reputation: 13

To display children in a column orientation, flex box will work.

#_form {
  display: flex;
  flex-direction: column;
}

Upvotes: 0

Sky5005e
Sky5005e

Reputation: 79

You can use table instead of using div. make 6 columns or as much you requied. 

 <table>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>

    </table>

Upvotes: 1

devXen
devXen

Reputation: 3151

In general, pure CSS solution for online form is NOT easy. Luckily, some brilient people in Wufoo have made some excellent CSS form that I can learn from. Their CSS based form online example:

Example page: http://www.wufoo.com/examples/#eventregistration

Multiple column Form example: https://examples.wufoo.com/forms/s7p7s5/

Upvotes: 0

Luigi
Luigi

Reputation: 8847

You could use some column alignment: on the first columns the labels, on the second column the input fields.

Eventually you can use 4 column: labels on 1st and 3rd, input fields on 2nd and 3rd.

Also, use width:100% on input fields. And you may want to consider text-align:right for labels.

The old html table may help you here.

As you have many fields you may want to consider to split the form in sections; like using <fieldset> and <legend> as explained here

Example:

<!DOCTYPE html>
<html>
<body>

<style type="text/css">
    .lbl {
        text-align: right;
        width: 100px;
        white-space: nowrap;
    }

    .fld {
        width: 100%;
    }

    .frm {
        display: inline-block;
    }

</style>
</head>

<form>
    <fieldset>
        <legend>Person</legend>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="name">Name:</label></td>
                    <td><input class="fld" id="name" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="email">Email:</label></td>
                    <td><input class="fld" id="email" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="dob">Date of birth:</label></td>
                    <td><input class="fld" id="dob" type="text"></td>
                </tr>
            </table>
        </div>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="addr">Address:</label></td>
                    <td><input class="fld" id="addr" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="city">City:</label></td>
                    <td><input class="fld" id="city" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="ctry">Country:</label></td>
                    <td><input class="fld" id="ctry" type="text"></td>
                </tr>
            </table>
        </div>

    </fieldset>
</form>

</body>
</html>

This would be the results:

when there is enough space horizontally:

enter image description here

when there is not enough space horizontally:

enter image description here

Upvotes: 4

Steve Atkinson
Steve Atkinson

Reputation: 1239

You're looking for a "Responsive design" solution. This is commonly achieved using a grid based style sheet such as this very simple and straightforward 12 columnn grid http://cssgrid.net/

You should also right align your labels, not left align them (i.e. like Luigi's answer)

Do not use tables for layout. Tables are for tabular data.

Upvotes: 1

Related Questions