Learning to make forms with css

Question

ryy705 0 Junior Poster

16 Years Ago

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 {

}

html-css web-design

3 Contributors
7 Replies
81 Views
1 Month Discussion Span
Latest Post 16 Years Ago Latest Post by wickedsunny

Fungus1487 55 Posting Pro in Training

16 Years Ago

First of all to stop your input/textareas from bouncing everytime you focus them do this.

input,textarea {
    height: 1.5em;
    width:  15em;
    padding: 0;
    [B]margin: 1px 1px 1px 1px;[/B]
    border: 1px solid gray; 
    font: 11px "Lucida Sans Unicode", Verdana, Arial; 
    color: #666;
}
input:focus, textarea:focus{
    border-width: 2px;
    border-color:    #d5dae7;
    [B]margin:0px[/B]
}

The problem you are having with the text not aligning itself to the textarea is that the span element has no element to force it into the position you require.

Add the following to your code. 310px is the sum of your label width (290px) + label left margin (10px) + label right margin (10px).

[B]#enqErr {
	margin-left:310px;
}[/B]

Hope this helps.

Fungus1487 55 Posting Pro in Training

16 Years Ago

it would be something like the line-height property of the left hand labels adding a sort of padding to your element. So the actual height of this element is larger than your inputs but not the height of the textarea. When your error messages come to render themselves they all have the left hand labels extra height to push them across the screen.

A better solution would be.

<div class="holder">
    <div class="left">
        ... label and other elements
    </div>
    <div class="right">
        ... text area and other elements
    </div>
</div>

.holder
    {
        display:block;
    }

    .holder .left
    {
        float:left;
        width:300px;
    }

    .holder .right
    {
        margin-left:300px;
        width:auto;
    }

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ryy705 0 Junior Poster · Answer 1 · 2008-09-18T08:04:50+00:00

I think I see what you mean. I think should have created column divs as well in order to achieve the look I was going for.
But what is holding the other spans in place?
Thank you for your helpful reply.

ryy705 0 Junior Poster · Answer 2 · 2008-09-19T00:22:29+00:00

Thanks again for your reply.

I've taken your suggestion and applied the left and right divs.
However, now the submit button and the text area are overlapping.
I've tried different things but I can't figure out how to fix this. Please help.

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

#form {
    padding: 10px 50px 20px 0px;
    float: left;
    background: url("http://demo.1976design.com/dropshadows/shadow.gif") no-repeat bottom right;
}

.row {
    height: 4em;
    display: block;
}

.row #rowTxt {
    height: auto;
}

.row .left {
    float:left;
    width:  290px;
}

.row .right {
    margin-left:300px;
    width:auto;
}

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

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

textarea {
    height: 10em;
    width:  15em;
}
input:focus, textarea:focus{
    border: 2px solid #d5dae7;
    margin:0px;
}

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

.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;
    height: 30px;
    width:  200px;
    margin: 20px 0px 0px 210px;
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    color:#666;
    font-weight:bold;
    padding: 1px 2px;
}

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

<!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">
<div class="left"><label for="name">Name<br /><span class="small">Please enter your name (required)</span></label></div>
<div class="right"><input type="text" name="name" id="name" value="" /><br /><span class="err" id="nameErr">Invalid Entry</span></div>
</div>

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

<div class="row" id="rowTxt">
<div class="left"><label for="enq">Enquiry <br /><span class="small"> Please enter a general enquiry</span></label></div>
<div class="right"><textarea name="enq" id="enq" rows="5" cols="40"></textarea><br /><span class="err" id="enqErr">Invalid Entry</span></div>
</div>

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

Fungus1487 55 Posting Pro in Training · Answer 3 · 2008-09-19T05:24:02+00:00

Theres two ways to fix this. The following adds a div to push the outer box down below the floated element.

<div class="row" id="rowTxt">
<div class="left"><label for="enq">Enquiry <br /><span class="small"> Please enter a general enquiry</span></label></div>
<div class="right"><textarea name="enq" id="enq" rows="5" cols="40"></textarea><br /><span class="err" id="enqErr">Invalid Entry</span></div>
<div style="display:block;width:100%;" />
</div>

Or

You can set a height to your row in your CSS like so...

#rowTxt {
    height:80px;
}

Using this second method it would be better to assign a "height" style to the text area so you could manage the height of the row with the text area. Else the first method will allow the height of the textarea to be dynamic allowing for crossbrowser differences in the "rows" html attribute.

ryy705 0 Junior Poster · Answer 4 · 2008-11-07T00:28:53+00:00

Thank your for all your help. Sorry for not being able to thank you sooner. Too much pressure at work. Hopefully you'll be this generous with me in the future.

wickedsunny 0 Junior Poster in Training · Answer 5 · 2008-11-09T20:51:13+00:00

wickedsunny 0 Junior Poster in Training

16 Years Ago

seems solved :D