The most semantic way to handle a <form>

HTML & CSS
1

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?

2

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

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

3

Use a “label” to wrap the text. And use the “for” attribute to associate the label with it’s corisponding input.

4

Yes, something like this:


<!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>
5

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

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 :slight_smile:

6

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.)

7

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

Here is another example of a semantic form:

<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>
8

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