Should I use a table or divs to format my web forms? I've been told to stay away from tables and to use divs where I can. However if i'm scared if I use two divs to align the form fields they won't appear correctly in a no-style format or on a cell phone. Should I just use the table or is there another way to align stuff that I'm not thinking of?
u dont need to use divs to align form elements there are a few techniques you can use which does not require tables and still looks good with css disabled but i wouldnt use tables for forms (i stopped using tables for forms a few years ago) u can use the <p> <br> technique or <label><input> technique or using <spans> the point being that you actually style the form elements to align them the way you want you can make some great forms that way but if you are not comfortable using css then im sure i can come up with some examples to show you how to create a tableless form
Hi there! I would defiantly recommend you to use CSS. If you want your website to be up to the current web-standards then CSS is usually the way to go. It is easier to edit, requires less loading time and ensures the cross-readability of your website. More and more mobile browsers can read CSS perfectly fine and there should be even less issues in the future.
sorry I'm kinda new how do you use the label and input tags? I tried wrapping my inputs with label tags but it didn't much. Also how do you use the spans? as for CSS i'm comfortable using it but I don't see how I can make it look good with two divs if someone turns styles off. then my labels will be above my input fields.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Here is a form example for you mate ;-) </title> <style type="text/css"> body { font:65%; font-family:Verdana, Arial, Helvetica, sans-serif; } form#contact { width:500px; } label,label span {display:block; padding-bottom: .10em;} label {float:left; width:100%; } label span {float:left; width:45%; text-align:right;} fieldset input {float: right; width: 45%; border:1px solid #999999;} field input:hover {border-color:#000;} field input:active, input:focus {border-color :#900;} fieldset {margin-bottom:10px; padding:20px; border:1px solid #0066CC; overflow:hidden; } </style> </head> <body> <div> <form id="contact" method="post" action="send.html"> <fieldset> <label for="firstname"><span>First Name :</span> <input type="text" name="firstname" id="firstname"/></label> <label for="surname"><span>Surname :</span> <input type="text" name="surname" id="surname"/></label> </fieldset> <fieldset> <label for="house"><span>House Name/Number :</span> <input type="text" name="house" id="house" /></label> <label for="street"><span>Street :</span> <input type="text" name="street" id="street" /></label> </fieldset> <input type="submit" value="submit"/> </form> </div> </body> </html> use this as an example and you will get the what i mean there ar edifferent ways of doing forms the example above is using labels and spans (i.e styling these elements to position them as if in a table)