Recipe 7.18. Entering Data into a Form Like a Spreadsheet


Problem

You want to modify a form in an environment such as a spreadsheet application.

Solution

First, place input elements into an HTML table, as shown in Figure 7-27:

<form action="/process.php" method="get" name="copresentations">  <table cellspacing="0">   <caption>    Summary of Financial Data   </caption>   <tr>    <th scope="col">Fiscal Year </th>    <th scope="col">Worksite<br />     Presentations </th>    <th scope="col">Passing Grades </th>    <th scope="col">Number of Presentators </th>   </tr>   <tr>    <th scope="row">1999</th>    <td><input type="text" name="wkpst1999" /></td>    <td><input type="text" name="pass1999" /></td>    <td><input type="text" name="numpst1999" /></td>   </tr>   <tr>    <th scope="row">2000</th>    <td><input type="text" name="wkpst2000" /></td>    <td><input type="text" name="pass2000" /></td>    <td><input type="text" name="numpst2000" /></td>   </tr>   <tr>    <th scope="row">2001</th>    <td><input type="text" name="wkpst2001" /></td>    <td><input type="text" name="pass2001" /></td>    <td><input type="text" name="numpst2001" /></td>   </tr>   <tr>    <th scope="row">2002</th>    <td><input type="text" name="wkpst2002" /></td>    <td><input type="text" name="pass2002" /></td>    <td><input type="text" name="numpst2002" /></td>   </tr>   <tr>    <th scope="row">2003</th>    <td><input type="text" name="wkpst2003" /></td>    <td><input type="text" name="pass2003" /></td>    <td><input type="text" name="numpst2003" /></td>   </tr>   <tr>    <th scope="row">2004</th>    <td><input type="text" name="wkpst2004" /></td>    <td><input type="text" name="pass2004" /></td>    <td><input type="text" name="numpst2004" /></td>   </tr>  </table>  <input type="submit"  value="Save" /> </form>  

Figure 7-27. A table without styles


Apply a thin border around the table and set the table border display to collapse:

table {  border-collapse: collapse;  border: 1px solid black; }

Set the table cells to a set width and to display a thin border:

th {  border: 1px solid black;  width: 6em; } td {  width:6em;  border: 1px solid black; }

Remove padding and margins for the table cells:

th {  border: 1px solid black;  width: 6em; } td {  width:6em;  border: 1px solid black;  padding: 0;  margin: 0; }

Set the width of the input elements to equal the width of the table cells while removing any borders that browsers automatically apply to form elements:

input {  width: 100%;  border: none;  margin: 0; }

By setting the width, the input elements will also stretch the submit button to the maximum width of its parent element, so the Submit will render quite large. To rein in the size of the Submit button, write a separate CSS rule:

.save {  margin-top: 1em;  width: 5em; }

To complete the spreadsheet look as shown in Figure 7-28, set the input text to be aligned to the right:

input {  width: 100%;  border: none;  margin: 0;  text-align: right;   }

Figure 7-28. A table that looks like a spreadsheet


Discussion

Spreadsheets help users keep tabs on lots of numerical and financial information. The typical ecommerce or a contact form layout would be a hindrance if a user needs to enter a multitude of numbers. By mimicking a spreadsheet layout, a user can quickly enter data.

When coupled with the :hover pseudo-selector, the table row and cell a user is working in can be highlighted as data is entered (see Figure 7-29):

tr:hover {  background-color: #ffc; } tr:hover input {  background-color: #ffc; } input:focus {  background-color: #ffc; }

Figure 7-29. A table row is highlighted


See Also

Styling input elements in Recipe 7.2.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net