Hello and welcome to our community! Is this your first visit?
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
    Thanked 0 Times in 0 Posts

    Forms: Examples of using CSS instead of tables needed.


    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.


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


    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. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,314 Times in 1,284 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:

    <!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">
    		<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;}
    		<div id="container">
    			<form action="" method="get">
    					<legend>CSS Form</legend>
    						<label for="textinp">Text Input Label</label>
    						<input id="textinp" type="text" />
    						<label for="select">Select Label</label>
    						<select id="select">
    							<option value="">Option</option>
    						<span>Choose one</span>
    						<label><input type="radio" name="radio" /> Yes</label>
    						<label><input type="radio" name="radio" /> No</label>
    						<label for="textarea">Textarea</label>
    						<textarea id="textarea" cols="30" rows="5"></textarea>
    					<div class="submit">
    						<input type="submit" value="Submit" />
    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. #3
    New Coder
    Join Date
    Feb 2011
    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.



Posting Permissions

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