javascript - How to arrange input elements to columns or other way to improve form readability - Stack Overflow

admin管理员组

文章数量:1291674

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 autoplete or datepicker containing dropdown button in right side. JQuery UI is used.

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

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-bobutton' 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>

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 autoplete or datepicker containing dropdown button in right side. JQuery UI is used.

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

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-bobutton' 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>

• javascript
• html
• css
• jquery-ui

Share Improve this question Follow edited Dec 26, 2012 at 9:32 Andrus asked Dec 26, 2012 at 9:28 AndrusAndrus 28k6767 gold badges214214 silver badges396396 bronze badges 4

• you could use CSS to assign fixed width to form-field class. That should do the trick – U.P Commented Dec 26, 2012 at 9:31
• I want input and select elements inside form-field divs to be left aligned. setting fixed width to form-field does to allow this since caption widths are different in every form-field. Also I do'nt know how to calculate max width from caption texts. Should I multiply max caption lenght to some magical constant ant use it as px value. – Andrus Commented Dec 26, 2012 at 9:35
• @Andrus I updated my answer to handle horizontal resize. check the updated html. Now the form is 2up (4 columns), but you can do same thing with 3up (6 columns), or more. – Luigi Commented Dec 26, 2012 at 10:24
• Thank you. It looks that best way would be to allow any number or column by increment of 1: 1,2,3,4,5,6,7, 8 or 9 . It seems that using this dis in your code can contain only single table cell. This makes table element usage useless and it can removed which leads to the html in question. How to avoid hard coded caption width 100 px ? – Andrus Commented Dec 26, 2012 at 18:46

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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:

when there is not enough space horizontally:

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

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.

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>

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./examples/#eventregistration

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

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

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

本文标签： javascriptHow to arrange input elements to columns or other way to improve form readabilityStack Overflow