[SOLVED] How to make forms with css

ryy705 · September 17, 2008

Hello,

I am trying learn how to make a form using css instead of table. But I am having problem with it. If you would kindly copy and paste the following code you will see that the error message underneath the text area is not aligned with the text area. What can I do to fix it?

I'll also accept any constructive criticism about the form. I am trying to learn.

I thank you in advance.

<!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" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./test.css" media="screen" />
<title>Contact</title>
</head>
<body>
<div id="form">
<form method="post" action="">

<div class="row">
<label for="name">Name<br /><span class="small">Please enter your name (required)</span></label>

<input type="text" name="name" id="name" value="" /><br /><span class="err" id="nameErr">Invalid Entry</span>
</div>

<div class="row">
<label for="email">Email<br /><span class="small"> Please enter your email address (required)</span></label>

<input type="text" name="email" id="email" value="" /><br /><span class="err" id="emailErr">Invalid Entry</span>
</div>

<div class="rowTxt">
<label for="enq">Enquiry <br /><span class="small"> Please enter a general enquiry</span></label>

<textarea name="enq" id="enq" rows="5" cols="40"></textarea><br /><span class="err" id="enqErr">Invalid Entry</span>
</div>

<div class="row">
<input class="subButt" type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>

body{
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
    font-size: small;
}

#form {
    float: left;
}

.row {
    height: 4em;
}

label {
    text-align: right;
    font-weight: bold; 
    display: block;
    float: left;
    width:  290px;
    padding: 0;
    margin: 0px 10px 20px 10px;
}

input,textarea {
    height: 1.5em;
    width:  15em;
    padding: 0;
    margin: 0px;
    border: 1px solid gray; 
    font: 11px "Lucida Sans Unicode", Verdana, Arial; 
    color: #666;
}

textarea {
    height: 10em;
    width:  15em;
}

input:focus, textarea:focus{
    border-width: 2px;
    border-color:    #d5dae7;
}

.small {
    display: block;
    padding: 0px;
    margin: 0px;
    font-size: xx-small;
    font-weight: normal;
    color: #666666;
}

.err {
    display: block;
    padding: 0px;
    margin: 0px;
    font-size: xx-small;
    font-weight: normal;
    color: #666666;
}

.subButt {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width:  200px;
    margin: 0px 0px 0px 250px;
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    color:#666;
    font-weight:bold;
    padding: 1px 2px;
}

.subButt:hover {
    color:black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

br {
    padding: 0px;
    margin: 0px;
}

.rowTxt {

}

F1Fan · September 17, 2008

Why wouldn't you just use tables? It would be infinitely easier and you'd have more options.

dropfaith · September 18, 2008

so i just looked at your code and the easist way was to make a label for it with no text

<div id="form">
<form method="post" action="">
	<div class="row">
		<label for="name">Name<br /><span class="small">Please enter your name (required)</span></label>
		<input type="text" name="name" id="name" value="" /><br />
			<span class="err" id="nameErr">Invalid Entry</span>
	</div>

	<div class="row">
		<label for="email">Email<br /><span class="small"> Please enter your email address (required)</span></label>
		<input type="text" name="email" id="email" value="" /><br />
			<span class="err" id="emailErr">Invalid Entry</span>
	</div>

	<div class="rowTxt">
		<label for="enq">Enquiry <br /><span class="small"> Please enter a general enquiry</span></label>

		<textarea name="enq" id="enq" rows="5" cols="40"></textarea><br />
		<label> </label>	<span class="err" id="enqErr">Invalid Entry</span>
	</div>

	<div class="row">
		<input class="subButt" type="submit" name="submit" value="Submit" />
	</div>
</form>
</div>

twilitegxa · September 18, 2008

I agre with drop. You can add CSS script for the div tag to display it the way you want without the use of tables.

EKINdesigns · September 18, 2008

You should also get rid of the tags. Assign your 's a "display: block;". This will force them to line break.

TheFilmGod · September 19, 2008

You should also get rid of the tags. Assign your 's a "display: block;". This will force them to line break.

Improper semantics. Use instead.

Sign In

[SOLVED] How to make forms with css

Recommended Posts

ryy705

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

EKINdesigns

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information