The most semantic way to handle a <form>

**mrsam** · Jan 29, 2010 18:11

Hey all,

Im wondering if someone could give me their opinion on how to setup a <form> with different input types.

My setup looks like the following:

<form action="#" method="post">
Text: <input type="text" name="name" />
Text: <input type="text" name="name" />
Text: <input type="text" name="name" />
Text:
<textarea></textarea>
</form>

As the three first inputs show, I have my text to the left with a bit of a margin to the input.
My last input will have some text and display a textarea underneath it.

It's pretty simple. Would I just use a <span> to wrap my text or what would u suggest?

**JeffWalden** · Jan 29, 2010 18:33

Cameron Adams wrote an article on SitePoint about this: http://articles.sitepoint.com/articl...orm-design-css

Have a read through that as I'm sure it'll answer your questions better than I could here.

**PicnicTutorials** · Jan 29, 2010 18:48

Use a "label" to wrap the text. And use the "for" attribute to associate the label with it's corisponding input.

**ralph.m** · Jan 29, 2010 20:31

Yes, something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form</title>
	
<style type="text/css" media="all">
  .section, .section1 {padding-bottom: 15px;}
  .section label, .section input {display: inline;}
  .section1 label, .section1 input, .section1 textarea {display: block;}
  .section label {padding-right: 10px;}
</style>
	
</head>


<body>
<form action="#" method="post">

<div class="section">
<label for="name">Text</label><input type="text" name="name" id="name" />
</div>

<div class="section">
<label for="email">Text</label><input type="text" name="email" id="email" />
</div>

<div class="section">
<label for="something">Text</label><input type="text" name="something" id="something" />
</div>

<div class="section1">
<label for="comments">Text</label>
<textarea name="comments" id="comments"></textarea>
</div>

<div class="section1">
<input type="submit" name="submitted" value="Send">
</div>

</form>

</body>
</html>

**mrsam** · Feb 4, 2010 09:42

Hmm that's weird, I didnt get any notice about activity in this thread, oh well. Thanks a lot for the answers

I just got a question in regards of using the "for" / "id" controller.

I just want to make sure im understanding the usage correct..

The only usage and reason why I have id="firstname" is because of the connection to the label?? I really dont use the id for anything else, right?

MY input would like this: <input type="text" name="name" id="labelname" class="inputNormal" /> - so im styling everything in my inputNormal. I'm not sure why, but my first thought was, - that "id" is just extra unnecessary mark-up - but I can see that the label controller won't work without the id - so guess it's pretty essentiel

**ralph.m** · Feb 4, 2010 09:53

Originally Posted by mrsam

The only usage and reason why I have id="firstname" is because of the connection to the label?? I really dont use the id for anything else, right?

Yes, it links the input to the label. As for using it for anything else, I don't see why not, though I'm not 100% sure about that. I would think that an id is an id like any other.

Linking the label and the input has lots of advantages, such as providing a clear relationship to people browsing with assistive devices, and for those who find it hard to click on small targets. (Click anywhere beside the label and the input will be highlighted.)

**cooper.semantics** · Feb 4, 2010 21:17

Personally, I wouldn't bind presentation to a form control ID.

Here is another example of a semantic form:

Code HTML4Strict:

<form action="registration.php" method="post" accept-charset="utf-8">
	<fieldset>
		<legend>Registration</legend>
 
		<label for="name">Name</label>
		<input id="name" type="text" name="name"><br>
 
		<label for="company">Company</label>
		<input id="company" type="text" name="company"><br>
	</fieldset>
</form>

**ralph.m** · Feb 4, 2010 21:40

Originally Posted by cooper.semantics

Personally, I wouldn't bind presentation to a form control ID.

Nor would I. I was really just saying that in theory it should be possible... but probably never necessary or recommended.

User Tag List

Thread: The most semantic way to handle a <form>

Thread Tools

Display

The most semantic way to handle a <form>

Bookmarks

Bookmarks

Posting Permissions