...

View Full Version : Forms: Examples of using CSS instead of tables needed.



Barons
02-21-2011, 08:55 PM
Hello,

I've got a few forums that I'd like to rebuild with css. Currently I'm using tables on them. I'm having a lot of trouble with it because all the examples of css forms I'm finding online are breaking my page. It seems like all the ones I'm finding are built to be a page of there own and I'm trying to put all of my forums in php files and include them into my site. The main reason I've decided to rebuild them is because of a false error i'm getting in the html validation. All my forms are on their own page as you can see below.


http://www.wararmada.com/tdb/assets/php/search.php
http://www.wararmada.com/tdb/assets/php/submit.php
http://www.wararmada.com/tdb/assets/php/contact.php

I've included them into my site using php code here.

http://www.wararmada.com/tdb

The validation page isn't seeing any of the php code and its under the impression that I've used unique id's multiple times on the same page when really I haven't.

So as for the css forms. Do any of you know of some examples of forms that are standalone? I'm not a pro or anything close and its really hard for me to strip out all of the "just for looks" code in the examples I've been finding. I've already done all the styling I just need to see how the meat of the form css works.

Thanks for the help.

VIPStephan
02-21-2011, 10:06 PM
I can’t show you any sites with standalone forms ’cause I don’t know of any but I can show you a simple form I set up:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
input, select, textarea {vertical-align: middle;}
form div {
border: 1px solid red;
clear: both;
}
label {
float: left;
clear: left;
}
label[for], label[htmlFor] {float: none;}
label[for]:after, label[htmlFor]:after, form div span:after {content: ":";}
input[type=text], textarea, form div span, select {
display: block;
margin-bottom: 10px;
}
form div span {margin-bottom: 0;}
</style>
</head>
<body>
<div id="container">
<form action="" method="get">
<fieldset>
<legend>CSS Form</legend>
<div>
<label for="textinp">Text Input Label</label>
<input id="textinp" type="text" />
</div>
<div>
<label for="select">Select Label</label>
<select id="select">
<option value="">Option</option>
</select>
</div>
<div>
<span>Choose one</span>
<label><input type="radio" name="radio" /> Yes</label>
<label><input type="radio" name="radio" /> No</label>
</div>
<div>
<label for="textarea">Textarea</label>
<textarea id="textarea" cols="30" rows="5"></textarea>
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</fieldset>
</form>
</div>
</body>
</html>


Usually I’m using sections of divs to group the form control and its respective label. You can then apply CSS to your liking to move things around and whatever.

Barons
02-21-2011, 10:41 PM
Thanks VIPStephan! Thats just want i needed. I'm going to play around with it and see if I can figure out how to do it on a larger scale.

Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum