Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Forms: Examples of using CSS instead of tables needed.

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    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:

    Code:
    <!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.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •