Compact web form type #1
Essentially I use two type of forms. First type is large scale form, usually on dedicated page, sometimes appended with short help text. Example of the first type of form comes from application Laboratory. Second form type, when complete database table is displayed on page and form is open for only one editing row, is described in following article.
Immediately at start of CSS section I commit violation of accessability and usability of web by selection of fixed font size. Form elements do not inherit style property font, therefore have to be stated in the element list to uniform font for table and form elements. Default display of indexes sub and sup in browsers quite distinguishes, therefore are overwritten especially with reference to uniform line height. Nevertheless IE displays other point size of indexes than other browsers.
Further fixed layout tables and uniform high of rows to 18 pixel are set-up. Table cells th are used for title, cells td are used for form elements. To prevent titles and forms data merge with border, table cells are set to padding: 0 4px;. For elements texarea and select another padding have to be adjusted.
<style type="text/css">
table, input, select, textarea {font: normal 13px Arial, SansSerif, Verdana;}
sub, sup {font: normal 10px Arial, SansSerif, Verdana;}
sub {vertical-align: baseline; position: relative; bottom: -3px;}
sup {vertical-align: text-top; position: relative; bottom: 3px;}
table {table-layout: fixed;}
th, td {height: 18px; margin: 0; border: 0; padding: 0 4px; color: black;}
th {background: #f0f0f0; font-weight: normal; text-align: left; }
/* ---- form ---- */
form {width: 546px; margin: 8px 0; border: 1px solid #aaa;
padding: 0 16px 4px 16px; background: #ccc;}
.inp, .iL, .iR, .iA {background: #ffa;}
.iL, .iR {width: 100%; margin: 0; border: 0; padding: 0 1px 0 0;
background: #ffa; float: left;}
.iL {text-align: left;}
.iR {text-align: right;}
.iA {width: 100%; height: 75px; margin: 0; border: 0; padding: 0;
overflow: auto; float: left;}
.selectBox {width: 268px; height: 18px; margin: 0; border: 0; padding: 0;
position: relative; overflow: hidden;}
.selectInp {width: 272px; height: 22px; top: -2px; left: -2px;
position: absolute; background: #ffa;}
</style>
Form layout
Ground of form is area reserved by element form with grey background, alike are created almost all forms on intranet. Into form is inserted fixed width table. In our example are inside of form two tables. One "floats" to the left and displays part of form for specific protocol type (several tens of types), second table "floats" to the right and contains data which are common in all laboratory reports.
Form elements are placed inside of table cells with style <td class="inp">. Classes .inp, .iL, and .iR have set up the same background color and so they blend together. Form elements have set up CSS property width: 100%; and they occupy entire space, that obtain from table cell, in this case from <td class="inp">. Therefore table must have fixed layout property set up and in the first table row the width of each column have to be defined.
Ideal solution would be CSS reset of form elements, thus set margin, border, padding properties to zero. Unfortunately zero padding causes disappearance of text cursor on the right side of text element in browsers IE and Opera. Therefore padding: 0 1px 0 0; have to be set-up.
Form frame
While bordes around tabular data depends upon designer intention, form element borders are practically mandatory. Borders in this form type example are created by the help of combination of several properties: removal of original border of form elements, darker background of form (table), bright background of table cells (light grey, yellow) and table attribute cellspacing="1px". Resulting uniform form borders of width 1px are as a matter of fact spaces between cell tables.
<body> <form method="get" action="form1.htm" onsubmit="return checkForm(this);"> <div id="fm"> <table cellpadding="0" cellspacing="1px" border="0" style="float: left; width: 260px;"> <tr> <td style="width:148px;"></td> <td style="width: *;"></td> <td style="width: 20px;"></td> </tr> <tr> <th>alkalita</th> <td class="inp"><input type='text' class="iR" name="C1" value="99,5" /></td> <td>%</td> </tr> ... </table"> <table cellpadding="0" cellspacing="1px" border="0" style="float: right; width: 270px;"> ... </table"> </div> </form>
updated 25.12.2007