Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Forms tables and fieldsets

    Hey guys, need some help with a form im trying to make. To align a label evenly with my <input = "text......> box (because preformatting changes my font type and makes it look odd) ive tried putting each into a row and a cell. this worked but the table is contained within a <fieldset> and when run in my browser there is unwanted space above the first label, i know im making this hard to understand but its driving me mad, i just cant figure out where the unwanted space is coming form, aligning the rows etc works within the table but not within the fieldset box, please help.......

    <form method "post" action = "script.url">

    <p> Online Booking Form </p>

    <fieldset>

    <legend> Personal Information </legend>

    <table border = "0" cellpadding = "10" align:top>

    <tr>
    <td> <label> Name: </label> </td> <td> <input type = "text" name = "name" size = "30" maxlength = 10> </td> <br> <br>
    </tr>

    <tr>
    <td> <label> Address: </label> </td> <td> <input type = "text" name = "add" size = "30" maxlength = 10> </td> <br> <br>
    </tr>

    <tr>
    <td> <label> Town/City: </label> </td> <td> <input type = "text" name = "Town" size ="30" maxlength = 10> </td>
    </tr>

    </table>

    </fieldset>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    OK, first and foremost a basic rule of thumb: Tables are not meant to format and lay out forms, just as tables aren’t meant to create page layouts. To style a form you use CSS like for everything else. A semantically marked up form could look like this:
    Code:
    <h2> Online Booking Form </h2>
    <form method "post" action = "script.url">
    <fieldset>
    	<legend> Personal Information </legend>
    	<div>
    		<label for="name">Name</label>
    		<input id="name" type = "text" name = "name" size = "30">
    	</div>
    	<div>
    		<label for="address">Address</label>
    		<input id="address" type="text" name = "add" size = "30">
    	</div>
    	<div>
    		<label for="town">Town/City</label>
    		<input id="town" type="text" name="Town" size="30">
    	</div>
    </fieldset>
    …
    …
    </form>
    Note that labels have to have a for attribute that has the ID of the associated input as value, or they must enclose the input they are associated to.
    And by the way: I see no reason why you would set a maxlength on these kinds of inputs because this way you limit the characters that can be typed. What happens with people that have a name that’s longer than 10 characters or that live in a town with longer name?

    Now, you can style this with CSS almost any way you like, e. g.:
    Code:
    fieldset {
    	border: 1px dashed green;
    	margin: 10px 0;
    	padding: 10px;
    }
    label {
    	float: left;
    	width: 200px;
    }
    label:after {content: ":";}
    input[type=text] {margin-bottom: 10px;}
    Note how I removed the colons of the label text and added them with CSS instead. In my opinion the colons aren’t crucial for the understanding of the content and they could even be unwanted in some style so by adding them via CSS you don’t have to manipulate the HTML when you change the layout at some point.
    Last edited by VIPStephan; 02-02-2012 at 04:20 PM.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help, looks good now, just have to learn the code so is it allways easier to format the document using CSS than trying to manipulate it in the body?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    If it’s only about changing the looks then yes, CSS should be the first choice. Of course, sometimes you need to rearrange some elements in the HTML to achieve a specific layout but generally, if you write good, clean, semantic HTML you don’t need to change it later on when you want to change the style/layout, you’d only do that with CSS.

    For example, with the HTML I posted above, if you set the style for the inputs to display: block; you can have the label text above the inputs (or the inputs below the label text, respectively). Or if you float the divs you can put all form fields side by side. You can’t do that if you mark that up with a table. Only if you want to change the order of the input fields you might need to edit the HTML.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •