[TUT] Writing Good HTML

[Svip]

I thought I make a tutorial about some parts of HTML, that should be written in a specific way, and why. You may reply to this topic about writing out parts of HTML in a specific and good manner.

 

Writing Good HTML Forms

 

Perhaps you have needed writing a form in HTML for some PHP system or similar, some data needed to be posted to a specific destination.

 

However, few knows the true nature of the ability and usability of tags there are available for forms.

 

But let's start out with the first and perhaps most obvious;

 

<form>

 

Our form tag covers the entire form. The method attribute is required, though browsers will assume 'post' if not set. However, a good manner would be to write this one all the time. All other attributes are not required.

 

<fieldset>

 

This is perhaps a not so known tag, this tag makes a border around the form area, so users can spot the form easily. And also, if there are more than one forms, tell them apart. This can of course be modified by CSS.

 

<legend>

 

This tag works together with the previous, it is a short description about the form, for instance "Post a comment", it will appear in the top border of <fieldset>.

 

<label>

 

This tag is for <input>, <textarea> and other input field tags. The attribute for is required for this tag, this attribute points to the id of the input field it is talking about. The advantage about this tag (as opposed to a standard written in text before a field) is that when you click on the label, it will turn a radio/checkbox on/off, and automatically select a input text field or textarea. Personally, I love this field.

 

I won't write about the input tags, as they are... too obvious. However, here is some "text" code using these tags I described:

 

 

<form method="post"> <fieldset>   <legend>Post a comment</legend>   <label for="name">Your name:</label>   <input type="text" id="name" name="name" />   <label for="comment">Your comment:</label>   <textarea cols="52" rows="15" name="comment" id="comment"></textarea>   <label for="remember">Remember me:</label>   <input type="checkbox" id="remember" name="remember" />   <input type="submit" name="submit" value="Post comment" /> </fieldset></form>

 

 

See the code in action (don't attempt to post though, as it won't work)

Here it is with CSS

 

I hope I will see finer forms from you people from now on. :> Remember to try some of the things I mentioned above. And perhaps suggest more to this tut.

[Raindancer]

Very nice Svip, keep them coming. I am always referring to various sites when i have trouble with certain codes. Would be nice to see some in the same place.

[facugaich]

I didn't even know about the label tag, thank you!

 

How about the proper use of 'span'? Sorry if it is a noobish question, but I've never had the chance to learn how to use it.

[jarjar]

Excellent tutorial Svip!

 

I love the label tag, I use it all the time in forms because it allows text to be inline with the form object rather then normal text which (depending on the browser window size and attributes) can show up and look out of place.

 

Nice tutorial, I hope to see more soon .

[K^2]

I believe, span tag is just a tag with no default behavior. You can use CSS to modify it anyway you like. It also allows you to put an ID on a chunk of HTTP code without having to put in any other tag. Then you can use the script to modify HTTP within the span tags.

[jarjar]

How about the proper use of 'span'? Sorry if it is a noobish question, but I've never had the chance to learn how to use it.

It's basically a tag used to get a quick CSS style(s) effect(s) to your text/object. If you just want a certain thing (that is usually done in CSS stylesheets) for small object or text, you use it. It doesn't have a real defined use, but it's just for adding CSS styles, so how you use it is up to you. It's not always very clean or as user friend/easy to read as CSS in it correct layout order, but it's very useful.

[facugaich]

I see, so I didn't get what span does because it doesn't do anything lol. Thank you very much.

[jarjar]

I see, so I didn't get what span does because it doesn't do anything lol. Thank you very much.

Well yes, it does do something, it has a job, but it isn't something that is required for anything. It's basically an addition to what there already is, it's just a way to get CSS effects without a CSS stylesheet.

[Svip]

Try the W3C's description: http://www.w3.org/TR/xhtml2/mod-text.html#edef_text_span

[facugaich]

I see, so I didn't get what span does because it doesn't do anything lol. Thank you very much.

Well yes, it does do something, it has a job, but it isn't something that is required for anything. It's basically an addition to what there already is, it's just a way to get CSS effects without a CSS stylesheet.

Yeah, I should've said it doesn't do anything visible on its own.

 

@Svip: Thanks man.

[BenMillard]

XHTML2 is not HTML (it isn't compatible with text/html user agents). It's also not a Recommendation. It's definitions are not authoritative and it should not be used (yet).

 

HTML 4.01 is the current standard which defines the meaning of hypertext elements. XHTML 1.0, XHTML 1.1 and XHTML Family actually use HTML 4.01 definitions.

 

The HTML 4.01 Elements Index is the best place to find out what elements there are, what they mean, how they work and when you should (and shouldn't) use them. There's also the HTML 4.01 Attributes Index...if you've nothing else to do.

 

You can use these, for example, to find out how to use for attribute on the <label> element. Svip didn't mention hooks onto the id and not the name of the control you want to link it to. This catches a lot of people out because they think the id is unnecessary repetition.

 

Also, <label> is not to be used with every type of <input>. Specifically, "push buttons" have implied <label>s which use the text present in their value attribute.

 

Also, the purpose of the <fieldset> element isn't to draw a border around the elements it contains. It's a grouping element for form controls which provides structure, meaning and useful functionality to the document. Using it with <legend> makes documents easier to navigate in text-to-speech devices.

 

Styling them with CSS can be a bit difficult because browsers create the indentation for the <legend> text differently. Internet Explorer 6 and 7 uses left: 7px which can be undone using position: relative; and left: -7px. However, this will obviously shift the text 7 pixels too far left in other browsers, so you'll need to hide that CSS in a Conditional Comment. Other browsers use padding and/or margin for this, IIRC.

 

You can use several <fieldset>s in a <form>, such as the School Survey demo I made for a local secondary school. It works a lot like the frame controls you get in object-oriented programming languages and should be used in much the same way; to group sets of related controls.

 

Svip's markup is correct, but the explanations aren't quite perfect. I doubt mine are either; hypertext is quite a complicated thing if you take it really seriously.

 

Nice to see articles about best practise being so well received by people these days. A few years ago people would've been like "WTF u markup Nazi?!??!".

Edited January 3, 2007 by Cerbera