Forms Setup

Okay to use <table>?

[bofe]

Maybe the semantics gurus can help me out here,

I want to set up a simple Contact form (that uses a homemade form mailing script in PHP)

Here's how I want it to look:

Name: input type=text
E-mail: input type=text
Message: textarea

I'm using <labels> for Name, Email, and message... I want three input fields and the text area to be aligned.

I can get it to work with tables, is there a CSS solution? or... are tables correct?

[brdwlsh]

hey, i had the same problem recently. the good news is yes, it is possible to format your form components in individual cells, the bad news is that i can never get it to work properly. i came up with this solution using framesets and legends. it looks best in explorer(mac) than in other browsers but it works none-the-less; works in windows too.

if you want the easy way out, this is it. i'm still trying to figure out how to make the most of CSS.

<table width="35%" bgcolor="CCCCCC">
<tr>
<td>
<form>
<LEGEND ALIGN=right><b><font color="#000066" face="Arial">Your Words Here</font></b></LEGEND>
<FIELDSET>
<LEGEND ALIGN=left><b><font color="#000000" size="-2" face="Tahoma">Name</font></b></LEGEND>
<INPUT TYPE="text" NAME="First" SIZE="30">
</FIELDSET>
<FIELDSET>
<LEGEND ALIGN=left><b><font color="#000000" size="-2" face="Tahoma">E-Mail</font></b></LEGEND>
<INPUT TYPE="text" NAME="E-mail" SIZE="30">
</FIELDSET>
<FIELDSET>
<LEGEND ALIGN=left><b><font color="#000000" size="-2" face="Tahoma">Comments</font></b></LEGEND>
<TEXTAREA ROWS=3 COLS=30 NAME="Comment"></TEXTAREA>
</FIELDSET>
<INPUT TYPE="reset" VALUE="Clear Form">
<INPUT TYPE="submit" VALUE="Submit">
</form>
</td>
</tr>
</table>

p.s. you may want to specify more than one <font face=

good luck
brd

[txbakers]

Yes, tables are fine for this. CSS will work too.

Here is much simpler table layout than proposed above:
<form name="myForm" action="yourmailer.cgi" method="post">
<table width="100%">
<tr>
<td width="20%">Name</td>
<td width="80%><input type="text" name="name" size="30"></td>
</tr>
<tr>
<td width="20%">E-Mail</td>
<td width="80%><input type="text" name="email" size="30"></td>
</tr>
<tr>
<td width="20%">Name</td>
<td width="80%><textarea name="message" rows="5" cols="20"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td width="80%><input type="submit" name="submit" Value="Send"><td>
</tr>
</table>
</form>

you can jazz it up anyway you want to.

[Rincewind]

Technically tables are fine for this. Though it would still be a good idea to control the table using css rather than inline artibutes. A tabled mark up could look like.

th {
width: 150px;
}
<form id="contact" method="post" action="">
<table>
 <tr>
 <th scope="row"><label for="label">Name</label></th>
 <td scope="col"><input name="text" type="text" id="text"></th>
 </tr>
 <tr>
 <th scope="row"><label for="name">Email</label></th>
 <td><input name="text2" type="text" id="text2"></td>
 </tr>
 <tr>
 <th scope="row"><label for="message">Message</label></th>
 <td><textarea name="textarea" id="textarea"></textarea>
 <br />
 <input name="submit" type="submit" id="submit" value="Submit"></td>
 </tr>
</table>
</form>

I had considered adding a 3rd row to the table for the submit button but that would require using an empty call <td>&nbsp;</td> to align the button. Using the <br /> tag I feelt was better. It also keeps the submit button under the table header "message" which kinda makes sense.

However, since you asked, here is how to do it using css without tables.

label {
width: 150px;
display: block;
float: left;
clear: left;
}
#submit {
float: left;
padding-left: 150px;
}
<form id="contact" method="post" action="">
 <label for="name">Name</label>
 <input id="name" type="text" />
 <label for="email">Email</label>
 <input id="email" type="text" />
 <label for="message">Message</label>
 <textarea id="message"></textarea>
 <input type="submit" id="Submit" value="Submit" />
</form>
 

[bofe]

Excellent.

I noticed your TH tags with a scope="row" attribute (and others)

what does that do?

my code so far:

<form method="post" action="contact.php?action=send">
<table border="0">
<tr><td><label for="name">Name</label></td><td><input type="text" id="name" name="name" /></td></tr>

<tr><td><label for="email">Email</label></td><td><input type="text" id="email" name="email" /></td></tr>
<tr><td style="vertical-align: top" ><label for="message">Message:</label></td><td><textarea id="message" cols="40" rows="10" name="message"></textarea></td></tr>
<tr><td><input type="submit" value="Submit" /></td><td><input type="reset" value="Reset" /></td></tr></table>
</form>

[Rincewind]

The <th> tag defines the headers within a table. The scope tells the client whither the header is for a row or column (col). Headers can also be referenced using id and headers atributes e.g.
<th id="thename">Name</th><td headers="thename">data</td>
Deffining table headers, where applicable, helps non visual user agents interpet the table content better. (Ref w3.org html 4.01 spec section 11.2.6 and 11.4.1) though in this case, that is probably done well enough just using the <lable> tags.

[bofe]

Thank you very much, all.

I love these forums.