Quantcast
Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
    1. Welcome to GTAForums!

    1. GTANet.com

    2. GTANet 20th Anniversary

    1. GTA Online

      1. The Cayo Perico Heist
      2. Find Lobbies & Players
      3. Guides & Strategies
      4. Vehicles
      5. Content Creator
      6. Help & Support
    2. Red Dead Online

      1. Frontier Pursuits
      2. Find Lobbies & Outlaws
      3. Help & Support
    3. Crews

    1. Red Dead Redemption 2

      1. PC
      2. Help & Support
    2. Red Dead Redemption

    1. Grand Theft Auto Series

      1. St. Andrews Cathedral
    2. GTA VI

    3. GTA V

      1. Guides & Strategies
      2. Help & Support
    4. GTA IV

      1. The Lost and Damned
      2. The Ballad of Gay Tony
      3. Guides & Strategies
      4. Help & Support
    5. GTA San Andreas

      1. Guides & Strategies
      2. Help & Support
    6. GTA Vice City

      1. Guides & Strategies
      2. Help & Support
    7. GTA III

      1. Guides & Strategies
      2. Help & Support
    8. Portable Games

      1. GTA Chinatown Wars
      2. GTA Vice City Stories
      3. GTA Liberty City Stories
    9. Top-Down Games

      1. GTA Advance
      2. GTA 2
      3. GTA
    1. GTA Mods

      1. GTA V
      2. GTA IV
      3. GTA III, VC & SA
      4. Tutorials
    2. Red Dead Mods

      1. Documentation
    3. Mod Showroom

      1. Scripts & Plugins
      2. Maps
      3. Total Conversions
      4. Vehicles
      5. Textures
      6. Characters
      7. Tools
      8. Other
      9. Workshop
    4. Featured Mods

      1. Design Your Own Mission
      2. OpenIV
      3. GTA: Underground
      4. GTA: Liberty City
      5. GTA: State of Liberty
    1. Rockstar Games

    2. Rockstar Collectors

    1. Off-Topic

      1. General Chat
      2. Gaming
      3. Technology
      4. Movies & TV
      5. Music
      6. Sports
      7. Vehicles
    2. Expression

      1. Graphics / Visual Arts
      2. GFX Requests & Tutorials
      3. Writers' Discussion
      4. Debates & Discussion
    1. Announcements

    2. Support

      1. Court House
    3. Suggestions

[TUT] Writing Good HTML


Svip

Recommended Posts

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 smile.gif.

Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

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. smile.gif

 

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?!??!". tounge.gif

Edited by Cerbera
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.