Form, input boxes, labels, horizontal or vertical order?

HTML & CSS
1

Hi everyone,
This is a very basic question about a very basic form I try to create but fail to do so :frowning:
The following code:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>xxx</title>
  </head>
  <body>
    <form method="post" action=".scripts/sign_up.php">
        <label for="sign">name</label>
        <input type="text" id="sign" name="sign">
       <label for="pass">pass </label>
       <input type="password" id="pass" name="pass">		
        <input type="submit" value="sumbit !" />
    </form>
  </body>
</html>

The outcome of the above code creates a page shown at the screenshot attached.
My question (a very basic one) :

Are’nt the input fields supposed to be one field beneath the other? Do I have to take special meanings to make the fields stand one beneath the other?

Thanks

2

Well, you could put a br tag - but please don’t - they should be used to separate text, not style page elements.
The better way is to use CSS to style it the way you want it to look.

3
Off Topic:

Er … are you quite sure you want that button to say sumbit?

4

Thanks Mittineague.
I can make a “block” out of each input field (I guess I should add a

input {display:block}
But I wanted to make sure it is not done automatic with input fields.
Thanks

5

:slight_smile:
Every thing at its time.
First I wanted input fields to work then I’ll take care of “submit”…

6

It’s OK to do horizontal or vertical, or even a mixture if it makes sense. There have been lots of studies that suggest having LABELs on top is advantageous…

As far as marking up HTML there’s no right or wrong way, though I’m currently favouring using definition lists… eg

<form>

<dl>
<dt><label for="name">What's your name?</label></dt>
<dd><input type="text" id="name" name="name"></dd>
<dt><label for="email">You email addy</label></dt>
<dd><input type="email" id="email" name="email"></dd>
<dt><label for="tel">Telephone number</label></dt>
<dd><input type="tel" id="tel" name="telephone"></dd>
<dt>Favourite colour</dt>
<dd>
    <ul>
    <li><label><input type="radio" name="color" value="Red"> Red</label></li>
    <li><label><input type="radio" name="color" value="Green"> Green</label></li>
    <li><label><input type="radio" name="color" value="Blue"> Blue</label></li>
    </ul>
</dd>
</dl>

</form>
7

Thanks a lot Bluedreamer. I guess I’ll stick to your code. It will save me css coding.

8

I liked DL’s for many things, though I don’t use them for forms for at least 2 reasons:

  • I avoid lists in forms
  • I often need to be able to do something with the label-input pair as a unit, which means I need some single thing to be able to wrap them, like a div. DL’s can only have dt’s and dd’s as children, though you can pretty much stuff anything into a dd.
9

Hi Stomme poes,
I started my form with pairs of “label/input” but it didn’t pass validation with a remark such as “label and inputs cannot be desendants of an element”.

10

I don’t think there’s an all-round perfect/best method for arranging form inputs. If you’re hand coding a form then you can obviously use any sort of container, but when using a CMS with looping fields it can get messy trying to have different containers for different input variations.

11

“label and inputs cannot be desendants of an element”.

That’s simply because, in HTML4, those inline elements may not be direct descendants (they can be descendants/grand children, but not direct ones) of a form.

Wrapping anything block-y around them will fix that error message. As XHTMLcoder said, fieldset works.

<form method=“get” action=“”>
<fieldset>
<legend>According to HTML4, should be first child of a fieldset, but this was dropped in XHTML and HTML5</legend>
<label for=“foo”>Foo: </label>
<input id=“foo” name=“foo”>
<label for=“bar”>Bar: </label>
<input id=“bar” name=“bar”>
<input type=“submit” value=“Baz!”>
</fieldset>
</form>

That’s perfectly legal, but what I usually want as CSS hooks is something that can make the label-input pair a unit.

<div>
<label for=“foo”>Foo: </label>
<input id=“foo” name=“foo”>
</div>

<div>
<label for=“bar”>Bar: </label>
<input id=“bar” name=“bar”>
</div>

Even when the design from the designer doesn’t require this, I know if I have it I can adjust the style later if needed.

Though with a DL you can easily do top-bottom and side-by-side (with the ability to use vertical-align which is really nice if your dt label wraps and you need the dd input to align with the bottom of the label, the natural eyetracking path), but since with a div-or-whatever unit I can pretty much to the same by manipulating the label into block or inline-block or even float elements.

We make some of our forms using WTForms and the previous developer used lists (just ul’s), which is nasty because generated forms are usually stupid and for example, I had to write some silly logic in our templates to ensure that radios and checkboxes followed the usual order of input-first. Generated forms are supposed to save the developer time, but I think they still suck :slight_smile:

12

Thanks Stomme poes
I’m afraid my problem is more complicated. Here is an extract of my code:


<!DOCTYPE html>
<html lang="he">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>xxx</title>
	    <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
    </head>
<body>
    <ul>
	    <li class="about"><a href="#">about<div id="about"></div></a></li>
	    <li class="sign_up">
	        <a href="#">sign up
                          <div id="signup">
                           <form method="post" action=".scripts/sign_up.php"> 
                             <div id="signup_name">
		              <fieldset>
                                  <label for="sign_up_name">name</label> 
                                  <input type="text" id="sign_up_name" /> 
		             </fieldset>
	                    </div> 
                          </form> 
	         </div>
	        </a>
	    </li>
	    <li class="sign_in"><a href="#">sign in<div id="signin"></div></a></li>
	</ul>
  </body>
</html>

Attached is a screen shot of the errors displayed by the validator
As you see “fieldset” is not the solution but i guess “dl” neither. I need a more insight knowledge of where I can insert a “form” and how :frowning:
Thanks

13

Your Anchors are the culprit and I very much doubt they were needed to wrap any block items at all and they wouldn’t be able to contain LABEL as direct decadent.

14

Do you mean I cannot display a form whereby hovering a menu item?

15

You are right, anchor was redundant… Thanks a lot !