Design Large Entry from

johnscott

New Member
Your best bet is to probably to use tables and css.

You'll be able to control the size/spacing of the columns as well as the look of the forms controls (dropdown lists, buttons, textboxes, etc...).

<style>
.formTable { width: 500px; }
.formTable td { padding:5px; margin: 5px; }
.label { width: 150px; white-space:no-wrap;}
.required { background-color: #FFF68F; } /* light yellow */
</style>

<table class="formTable">
<tr>
<td class="label">Field #1</td>
<td><input class="required" id="requiredField" />* Required</td>
</tr>
<tr>
<td class="label">Field #2</td>
<td><input id="notRequiredField" /></td>
</tr>
</table>
 

northpark

New Member
You shouldn't use tables. Tables are for displaying tabular data.

you can style the form elements on their own:

<form id="blahblah" action="form.php" method="post">
<label for="name">Your name:</label>
<input type="text" name="name" id="name" value="" /><br />
<label for="email">Your email address:</label>
<input type="text" name="email" id="email" value="" /><br />
<label for="comments">Your message:</label>
<textarea name="comments" id="comments" rows="5" cols="20"></textarea><br />
<input type="submit" class="button" name="submit" id="submit" value="Send" />
</form>

you can style the form elements with css like this

input {
height:35;
width:235px;
background:#fff;
border:1px dashed #ccc;
margin-bottom:5px;
padding:3px;
}

textarea {
height:160px;
width:270px;
background:#fff;
border:1px dashed #ccc;
margin-bottom:5px;
padding:3px;
}

you can also add classes to each form element like the button above

class="button"
then style it in css like this
.button {
border:1px solid #000;
etc. etc.

to give you even more control over the style and placement you could place each form element in a div like this <div></div> then style the div
 
Last edited:
Top