Do I need all of this in <form>?

[xhtmlcoder]

[ot]<humour>
> “Thou cannot escape my wrath, mortal! Destroy <him>, my servants!” </humour>[/ot]
Why some believe a list is useful because they are fairly easy to style with CSS and have the strange notion the items on a form are always associated in a list. Whereas typically the form controls and labels are the normal defined link between items.

[imaginekitty]

I’d still like to see the form in question. I’d like to try to pare it down a bit.

[DoubleDee]

@felgall

The SitePoint book “Fancy Form Design” (2009) uses list tags as wrappers around all the form content. I don’t remember seeing a more recent book suggesting a different alternative.

That’s the book I (own and) read!

Debbie

[SpikeZ]

Fickle things us developers…!

Personally I would not use a list for the form (I used <p> tags and got slapped by DS in my site review!), you can easily style the form with the available hooks of <label> <input> etc.

[DoubleDee]

@xhtmlcoder

Yes, it is quite possible you learnt that technique from book but like was mentioned they sometimes seem to use “trends” or have bizarre ideas and try to make square pegs fit in round holes. Even forcing markup to jump through hoops it was never designed for and try to justify themselves.

The list fetishes are a common one in the industry where they can loose sight and see lists everywhere where there are none. If you get someone publishing it then many believe the hype. As with HTML5 it is so badly implemented there are already second edition books on a non normative language.

A Form of Input Boxes IS a “list”…

When someone enters his/her…

• First Name
• Email
• Password

…that is a LIST OF FIELDS that are required to create an Account on my website. And that LIST OF FIELDS is part of the User’s Profile. Combined with other fields and attributes, they represent a LIST OF DATA about the User, just like how “attributes” and “methods” form a LIST t describe an “object” in object-oriented programming (OOP).

Semantically a LIST makes a lot of sense, although there are certainly other ways to group things.

Making comments like…

have bizarre ideas and try to make square pegs fit in round holes. Even forcing markup to jump through hoops it was never designed for and try to justify themselves.

…is going off the deep end and hardly fair towards this topic.

If you disagree, then fine, but my example above makes decent sense, semantically, and apparently others at SitePoint agree.

Debbie

[DoubleDee]

@imaginekitty

I’d still like to see the form in question. I’d like to try to pare it down a bit.

Should I be bold and run head-first into the gauntlet?!

Here is a snippet…

	<!-- Create Account Form -->
	<form id="createAccount" action="" method="post">
		<fieldset>
			<legend>Create a Member Account</legend>
			<ul>
				<!-- First Name -->
				<li>
					<label for="firstName"><b>*</b>First Name:</label>
					<input id="firstName" name="firstName" type="text" maxlength="20" value="" />
				</li>

				<!-- Email -->
				<li>
					<label for="email"><b>*</b>E-mail:</label>
					<input id="email" name="email" type="text" maxlength="60" value="" />
				</li>

I think this semantically fine, and it makes the code easier to read and styling things a breeze.

Feel free to show me how it can be improved.

Debbie

[imaginekitty]

@DoubleDee

… If you disagree, then fine, but my example above makes decent sense, semantically, and apparently others at SitePoint agree.

OK, ok, but if you start telling me your articles are LISTs of paragraphs and your paragraphs are LISTs of sentences then I’m breaking out the boxing gloves!

[imaginekitty]

@DoubleDee

Should I be bold and run head-first into the gauntlet?!

Here is a snippet…

…

I think this semantically fine, and it makes the code easier to read and styling things a breeze.

Feel free to show me how it can be improved.

I guess I’d have to see it styled to see how you want it to look but with the markup I’d probably just go with the following:

<form id="createAccount" action="" method="post">
	<fieldset><legend>Create a Member Account</legend>
		<!-- First Name -->
		<label for="firstName"><b>*</b>First Name:</label>
		<input id="firstName" name="firstName" type="text" maxlength="20" value="" />
		<!-- Email -->
		<label for="email"><b>*</b>E-mail:</label>
		<input id="email" name="email" type="text" maxlength="60" value="" />
	</fieldset>
</form>

http://imaginekitty.com/cssExamples/DDform.html

[DoubleDee]

@imaginekitty

I guess I’d have to see it styled to see how you want it to look

Here are my styles…

/* CREATE ACCOUNT Styles */
#createAccount{
	width: 640px;
	margin: 0 auto;
	padding: 30px 0 30px 0;
}

#createAccount ul{
	padding: 0 2em 2em 4em;
	list-style: none;
}

form ul li{
	width: 100%;
	padding: 1.5em 0 0 0;
	overflow: hidden;
}

form ul li label{
	display: block;			/* Force label onto its own line. */
}

form ul li label.required{
	display: inline;
	font-size: 15px;
	color: #F00;
}

form ul li input#email{
	width: 32em;
}

form ul li input#pass{
	width: 22em;
}

.error{
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	font-weight: 500;
	color: #F00;
}

Debbie

[DoubleDee]

@imaginekitty

OK, ok, but if you start telling me your articles are LISTs of paragraphs and your paragraphs are LISTs of sentences then I’m breaking out the boxing gloves!

HAH!!!

[imaginekitty]

This looks pretty close:
http://imaginekitty.com/cssExamples/DDform2.html

[imaginekitty]

I changed the file names so refresh if you use my links.

[oddz]

Considering a form is generally a list of form elements a list seems most appropriate. I always use a list except in rare cases when there are only one or two inputs like a login form or something. However, even than it is really a small thing.

[imaginekitty]

Where did I put those gloves?

I guess, to me, the form elements are semantic enough on their own so they don’t need an extraneous list surrounding them.

[DoubleDee]

@imaginekitty

Where did I put those gloves?

I guess, to me, the form elements are semantic enough on their own so they don’t need an extraneous list surrounding them.

You could also style a Top Menu with div’s alone - and not use a LIST - but it would be extra work, AND it wouldn’t be as semantically correct…

You could also style tabular data using div’s - and not use a table - but it would be extra work, AND it wouldn’t be as semantically correct…

Putting Input Boxes in a Form of any size into an Unordered List <ul>…

1.) Is not a lot of extra work,
2.) It can be seen as semantically correct,
3.) It makes it easier to style things,
4.) It makes the code easier to read, and
5.) It is the Debbie-approved way of doing things

Take that bare-handed!!

Debbie

[imaginekitty]

@DoubleDee

You could also style a Top Menu with div’s alone - and not use a LIST - but it would be extra work, AND it wouldn’t be as semantically correct…

You could also style tabular data using div’s - and not use a table - but it would be extra work, AND it wouldn’t be as semantically correct…

OK, but I’m still not buying that LABEL and INPUT pairs are a list of something. I guess I’m saying that it’s not as semantically correct and for the same reasons.

@DoubleDee

Putting Input Boxes in a Form of any size into an Unordered List <ul>…

1.) Is not a lot of extra work,

It is some though, and it is extra/unnecessary markup.

@DoubleDee

2.) It can be seen as semantically correct,

I haven’t been convinced yet.

@DoubleDee

3.) It makes it easier to style things,

You’ll have to explain or give an example.

@DoubleDee

4.) It makes the code easier to read, and

I find that not using it is more concise and self-documenting.

@DoubleDee

5.) It is the Debbie-approved way of doing things

Well, then Debbie should do it. To each his/her own I suppose.

Cheers.

[imaginekitty]

I still think you ask the best questions in the CSS forum. I like how you nitpick the little things and make everyone argue about it.

[DoubleDee]

@imaginekitty

Well, then Debbie should do it. To each his/her own I suppose.

Cheers.

Nothing like a good “smack-down match” - between family members - on Christmas Eve, huh?!

Thanks for the input and thoughts, even if this time we don’t agree.

Merry Christmas,

Debbie
:xtree:

[DoubleDee]

@imaginekitty

I still think you ask the best questions in the CSS forum. I like how you nitpick the little things and make everyone argue about it.

Well, as an Analyst, I am detail-oriented for sure, but I don’t necessarily try to stir things up. It just happens! (:

Thanks for the compliments!!!

Debbie

[xhtmlcoder]

A form of input boxes is not really to be wrapped as a list. Though a FORM may contain a list of items (multi-choice questions, e.g. Choose: A, B, C, D) those INPUT boxes aren’t as they are replaced elements so it would be silly to wrap them in lists.

For the funnies let’s look at the possible future:

@http://www.w3.org/TR/html5/forms.html#forms

Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer’s name:
["]http://www.w3.org/TR/html5/forms.html#forms]

Furthermore http://www.w3.org/TR/html5/forms.html#form-associated-element as we can see no list. Although that is HTML5, so has some slightly “different ideas” but as you can see no need for LI anywhere regarding generic wrapping.

Even the HTML5 guys understand there is no need for LI within a simple form as a wrapper. I don’t personally think P would be the best option either though nontheless point conveyed those form items are not really lists.