Advanced Search

Return to Snippet

Revision: 12871
at March 30, 2009 23:15 by hotdiggity
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Tabless CSS Form</title>
		<style type="text/css">

		.cssform p {
			width: 300px;
			clear: left;
			margin: 0;
			padding: 5px 0 8px 0;
			padding-left: 155px; /*width of left column containing the label elements*/
			border-top: 1px dashed gray;
			height: 1%;
			}

		.cssform label {
			font-weight: bold;
			float: left;
			margin-left: -155px; /*width of left column*/
			width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
			}

		.cssform input[type="text"] { /*width of text boxes. IE6 does not understand this attribute*/
			width: 180px;
			}

		.cssform textarea {
			width: 250px;
			height: 150px;
			}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/
		* html .threepxfix {
			margin-left: 3px;
		}
		</style>
	</head>
	<body>
		<form id="myform" class="cssform" action="">
			<p>
				<label for="user">Name</label>
				<input type="text" id="user" value="" />
			</p>
			<p>
				<label for="emailaddress">Email Address:</label>
				<input type="text" id="emailaddress" value="" />
			</p>
			<p>
				<label for="comments">Feedback:</label>
				<textarea id="comments" rows="5" cols="25"></textarea>
			</p>
			<p>
				<label for="comments">Sex:</label>
				Male:
				<input type="radio" name="sex" /> Female:
				<input type="radio" name="sex" /><br />
			</p>
			<p>
				<label for="comments">Hobbies:</label>
				<input type="checkbox" name="hobby" /> Tennis<br />
				<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
				<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
			</p>
			<p>
				<label for="terms">Agree to Terms?</label>
				<input type="checkbox" id="terms" class="boxes" />
			</p>
			<div style="margin-left: 150px;">
				<input type="submit" value="Submit" />
				<input type="reset" value="reset" />
			</div>
		</form>
	</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Tabless CSS Form

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html, forms

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS