...

View Full Version : Tabless forms



twistedsoul
05-16-2009, 06:33 PM
hi, I'm having trouble with this one here. I've not made a form before using just css always with tables, I've tried a few tutorials but not managed to get it the way i wanted. Could anyone point me in the right direction so i can get my form looking somewhat like this.http://www.edit-studios.com


<form id="contact" method="post" action="#">

<p>Your name<span class="required"> *</span><br />
<input type="text" name="FirstName" size="50" />
<br />
<br />
Your email <span class="required">*</span><br />
<input type="text" name="Email" size="50" />
<br />
<br />
Your web site<span class="style1"></span><br />
<input type="text" name="Website" size="50" />
<br />
<br />
Your company<span class="style1"></span><br />
<input type="text" name="Company" size="50" />
<br />
<br />
</p>
<p>Your message <span class="required">*</span><br />
<textarea name="Message" id="textInput" cols="60" rows="8"></textarea>
</p>
<p><br />
<input type="submit" name="send" id="send" value="Send" />
<input type="reset" name="Reset" id="button" value="Reset" />
<span class="required">*</span> <em>required fields</em></p>
</form>
thankyou.

PitbullMean
05-16-2009, 07:10 PM
can u give us a copy of the css code?

twistedsoul
05-17-2009, 09:23 AM
I only have this so far for style


input {
background-color: #141414;
border: 1px solid #232323;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
required {
color: #B10C0C;
}
textarea {
background-color: #141414;
border: 1px solid #232323;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

Nothing to position it yet becuase I couldn't get it right.

VIPStephan
05-17-2009, 07:30 PM
Semantic code (http://boagworld.com/technology/semantic_code_what_why_how/) also applies to forms. The paragraph element doesn’t make any sense whatsoever. Use divs for that or a list as described on http://alistapart.com/articles/prettyaccessibleforms. That article actually explains everything you need to know. However, one more thing: don’t use line breaks (br element). You almost never need this element to achieve what you want.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum