ryy705 Posted September 17, 2008 Share Posted 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 { } Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/ Share on other sites More sharing options...
F1Fan Posted September 17, 2008 Share Posted September 17, 2008 Why wouldn't you just use tables? It would be infinitely easier and you'd have more options. Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/#findComment-644232 Share on other sites More sharing options...
dropfaith Posted September 18, 2008 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/#findComment-644329 Share on other sites More sharing options...
twilitegxa Posted September 18, 2008 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/#findComment-644332 Share on other sites More sharing options...
EKINdesigns Posted September 18, 2008 Share Posted September 18, 2008 You should also get rid of the <br> tags. Assign your <span>'s a "display: block;". This will force them to line break. Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/#findComment-644538 Share on other sites More sharing options...
TheFilmGod Posted September 19, 2008 Share Posted September 19, 2008 Quote You should also get rid of the <br> tags. Assign your <span>'s a "display: block;". This will force them to line break. Improper semantics. Use <p> instead. Link to comment https://forums.phpfreaks.com/topic/124720-solved-how-to-make-forms-with-css/#findComment-645328 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.