Advanced HTML Tutorial

**AQUARIAN** · 27-Feb-2007, 01:25 AM

Advanced HTML Tutorial
Part 1 - Advanced Text Formatting

Introduction

HTML is made up of a great many elements, a lot of which are overlooked, forgotten or just unknown to many web designers. Although with a basic knowledge of HTML you can develop a website, to take advantage of many of the advanced features, and to make pages fully compatible, it is useful to learn these less popular tags.

Before reading this tutorial, you should have a basic idea of how HTML pages work, and how to do basic coding in HTML. A good reference for this sort of thing is the HTML Basics Tutorial, here on Free Webmaster Help.

More <font>

The font tag is the most used HTML tag, and takes a very basic form. It allows you to specify the color, size and font of text. Although largely thought to be obsolete by many developers, due to the greater control given by stylesheets, it still provides a very easy way to change the look of the page.

The basic use of the font tag involves setting a font using:

<font face="Arial">Text</font>

but this does introduce another problem, that of different computers accessing a page. Unlike publishing methods such as print, it is up to the user's computer, not the printer, to render the pages, so they can look different on all computers. This is especially noticable with the font face attribute, as it is very rare to have a font installed on every computer that visits a website. Because of this the HTML specification has a system built in where multiple fonts can be specified. For example, you can use:

<font face="Arial, Helvetica, sans-serif">

which would tell the browser to first try to display the text in Arial, if that wasn't found try Helvetica and if not use the standard sans-serif font. This allows you to have control over how pages are displayed by browsers without the correct font, although it is far from perfect. The best uses for this tag, are if you really want to use a non-standard font (and don't want to use stylesheets) or if it is important that you can accurately predict how pages will look on other computers. It is good practice to use font face in this way for all applications, though, for the sake of compatibility.

Bold, Italic, Underline and Strikethrogh

A further method of controlling how your text appears, other than changing the size color and font is to apply the four standard text formats to it. HTML has tags for all of these, which are supported by nearly all browsers.

Bold text is simple to create, it uses either the:

<b>Text</b>

or

<strong>Text</strong>

tags. Usually, it is simply a matter of preference over which one you choose, but accessibility experts normally recommend using <strong> as many screen readers (programs which read web pages to the blind) will recognise that the text is highlighted and speak it appropriately.

Similarly you can create text in italics using:

<i>Text</i>

or

<em>Text</em>

Again, it really doesn't matter whether you choose to use <em> or <i>, but screen readers can often recognise <em> and emphasised text.

Underlines are achieved using:

<u>Text</u>

although I would recommend against using this greatly, as it can often be confused with links on the page. Strikethrough, is used to 'cross out' text:

<strike>Text</strike>

although this is not particularly commonly used.

Subscript and Superscript

Subscript and superscript (text slightly above or below the line) is something which has long been supported, but is not common as it is only commonly used in scientific applications. There are other uses, though, and it is not a difficult tag to implement:

8 x 8 = 8<sup>2</sup>

8 x 8 = 82

H<sub>2</sup>O

H2<
/sub>O

Preformatted Text

HTML has been designed so that it ignores multiple spaces in documents, for example if you enter two standard spaces it is rendered as one. Although this allows indentation of code without changes to the presentation on screen, it does make it difficult to display some sorts of content (such as pre-formatted tables written in plain text). For this, you can use the <pre> tag. This stands for preformatted text, and will display the text exactly as it appears in the document source, for example:

<pre>

Name Location Sales

---- -------- -----

A. Name London 1,000

A. Nother Washington 2,000

A. Person Paris 2,400

</pre>

Without the <pre> tags this would display as:

Name Location Sales
---- -------- -----
A. Name London 1,000
A. Nother Washington 2,000
A. Person Paris 2,400

but after adding the tags in it shows up as:

Name Location Sales

---- -------- -----

A. Name London 1,000

A. Nother Washington 2,000

A. Person Paris 2,400

**AQUARIAN** · 27-Feb-2007, 01:27 AM

Advanced HTML Tutorial
Part 2 - Lists, Headings & Base

Introduction

There are many features of HTML which, even with the greater acceptance of CSS, are still used often, and have no real replacement, in fact the header tags (explained later) are very important when using CSS.

Lists

There are many occasions when you may want to write a list in HTML. Of course, it would be easy enough to just write out the text which you want in the list and type numbers or *s in front of it, but there is a much easier, more flexible method. THe most basic type of list is a bulleted list, or an unordered list, as it is known in HTML. To create a list like:

Things To Do:

Create Website

Upload

Become Millionare

you would use the following code:

<ul>Things To Do:
<li>Create Website</li>
<li>Upload</li>
<li>Become Millionare</li>
</ul>

The tag:
<ul>
tells the browser that you are starting an unordered list. It will indent the text from this point. The tags:

<li> and </li>

tell the browser where list items begin and end, so that it can place a bullet point in front of them. Notice that new lines are started automatically, without the need for <br> tags. The list is then closed using the:

</ul>

Sometimes you may want to nest your lists, to have sub-items. For example:

Things To Do:

Create Website

Make pages
Check pages

Upload

Become Millionare

This would be done with the following code:

<ul>Things To Do:
<li>Create Website</li>
<ul><li>Make pages</li>
<li>Check pages</li></ul>
<li>Upload</li>
<li>Become Millionare</li>
</ul>

All you have done is simply to have placed one list inside a list item of another. The browser will cope with all the formatting of this and, as long as you remember to close your tags correctly, it will be formatted correctly.

Numbered lists are another feature of HTML. They allow you to have a list with the numbers automatically added (much like in a word processor). The structure is exactly the same as for an unordered list, except the list tag is:

<ol>

(standing for ordered list). The following example:

Things To Do:

Create Website

Upload

Become Millionare

would be created with the following code:

<ol>Things To Do:
<li>Create Website</li>
<li>Upload</li>
<li>Become Millionare</li>
</ol>

Again, with numbered lists you can nest them as with unordered lists, or even combine the two.

Headings

HTML formatting is mostly done using the <font> and various other tags, but what many people do not realise is that there are already some preformatted headings included. There are six of these, each one being a 'level' lower than the one above. They range from the largest <h1> to the smallest <h6>. The following are examples:
A Level 1 Heading

<h1>A Level 1 Heading</h1>

A Level 2 Heading

<h2>A Level 2 Heading</h2>

A Level 3 Heading

<h3>A Level 3 Heading</h3>

A Level 4 Heading

<h4>A Level 4 Heading</h4>

A Level 5 Heading

<h5>A Level 5 Heading</h5>

A Level 6 Heading

<h6>A Level 6 Heading</h6>

Although these headings do not look particularly nice, they do have two important uses. Firstly, being structured (as you move from 1 to 6 it signifies headings of lesser importance) intelligent software and browsers can use this to decide what is important
on the page. Also, speech browsers for the blind can also take advantage of this.

The second of the uses is more relevant, though. This is, that using CSS (Cascading Style Sheets) you can very easily change the format of the headings from 1 to 6, to be formatted exactly how you want them. This has the great benefit of allowing you to have structured headings but having them looking like they fit in with your site.

Base

The <base> tag is unknown by many people, but in certain circumstances it can be extremely useful. It has two main attributes, href and target.

The href attribute is used to tell the browser what the base URL for the page is. This can then be used to correctly interpret relative hyperlinks. For example, you may have a link pointing to:

afolder/mysite.html

If your page was located at:

http://www.mysite.com/page.html

then the URL loaded when the link was clicked would be:

http://www.mystie.com/afolder/mysite.html

You could, though set the base for the document to Metasearch Search Engine - Search.com. In this case, the link would load:

Metasearch Search Engine - Search.com

This also applies to images and any other relative URLs given to documents. The above <base> would be implemented using:

<base href="http://othersite.com">

and this tag would be placed in the <head> section of your HTML.

Although the usefulness of this tag may not be instantly apparent, it can be very useful if you need to put a premade page on another server, or if a page is accessed from multiple domain names. This way you do not need to update all your links, just the <base> of the document.

The target attribute is useful if you are using frames on your site. With frames, the target frame for a hyperlink is given as:

<a href="thepage.html" target="contentframe">

which would load the file thepage.html in the frame called contentframe. If you want all links to open in a particular frame, though, for example if you have a navigation bar page and you want all the links to load in the content frame, you could use the following <base> tag:

<base target="contentframe">

As with standard HTML targets, you can also use:

_blank to open in a new window
_self to open in the current frame
_parent to open in the frameset parent
_top to open in the whole browser window with no frames

Both the target and href attributes can be combined in the <base> tag.

**AQUARIAN** · 27-Feb-2007, 01:31 AM

Advanced HTML Tutorial
Part 3 - Forms Advanced HTML Tutorial

Introduction

Interactivity is increasingly becoming a major part of many websites. Although the systems are all run by backend software, such as PHP or ASP, there must still be a front-end interface for the visitors to use. The sending of data to a script on a website is achieved by using HTML forms.

Form Basics

The basic idea of an HTML form is the same as that for a paper form. You are presented with a number of related sections of a page where you must input information. There are a number of different ways to enter data, including typing it in, selecting it from a list and ticking boxes. HTML deals with forms exactly the same way as you would with a paper form. There are groups of items and single items all gathered together in one large form and, like a paper form, the HTML tells the browser where to return it to.

Defining A Form

In HTML the first thing you must do is to define a form as a whole. This is done using the tags:

<form>
</form>

As with any other HTML tag, they apply to everything in between, so everything you contain inside form tags will be part of that particular form. You are not limited to one form on a page, though, as you can have as many sets of <form> tags as you need (for example to provide a login form and a signup form on the same page) as long as they are not nested. <form> is an invisible tag, as it will not change the way in which the page is displayed (although some browsers seem to leave a small space after a form).

A form tag on its own is almost completely useless. There are three main attributes you can use, though, which make the form more useful. The first of these is action, which is used as follows:

<form action="http://yoursite.com/cgi-bin/formmail.cgi">

The action of a form tells the browser where to send the data entered, in this case the file at E-Commerce Hosting. This file will then be responsible for dealing with the data. The useful thing about form tags is that the script you are sending the data to can be anywhere on the web, so you are not simply limited to scripts on your site.

The second attribute is the method, which is either used as:

<form method="post">
or
<form method="get">

These two methods, POST and GET, refer to the standard HTTP metods of sending data across the internet. The GET method puts the data into the URL of the next page, so that it is visible in the browser's address bar, for example:
http://yoursite.com/scripts/page.php?page=12&name=david&agree=yes
This has both an advantage and a disadvantage. The advantage is that URLs can easily be typed in or linked to using GET, although when using forms this is not vital. The disadvantage of this, though, is that the data can be seen by anyone looking at your browser and it can show up in the history. If you are sending sensitive information from your form, you shouldn't use this method.

POST is slightly different. Instead of encoding the form data into the URL, it is sent in a special data stream. This means that it is invisible in the browser, so is far more secure than GET (although sensitive information should still not be sent without encryption). By default a form will submit using GET unless you specify the method (although it is good practice to always specify whichever one you are using).

Usually form tags only ever include the method and action attributes, but occasionally you will need to use the name attribute. This is used as:

<form name="loginform">

This allows the browser to recognise the form on the page, which is useful if you are writing scripts in JavaScript, for example to validate form data.

In practically every case you should use both the method and action tags when defining a form, and should only use name if you particularly need it.

Text Input

The most basic type of form input is the standard textbox, like this:

It allows the user to enter text and will send this data to the processing script when the form is submitted. Nearly all input options use the same basic tag, which is the:

<input>

tag. This is combined with a number of attributes to provide different types of input on your form. To give a standard text box, you use the following:

<input type="text">

This is not quite enough to have a working text box, though, as there is another inportant attribute, name. Name allows you to give the textbox a name with which the data can be referred to later. It should be entered without spaces or special characters, but it is important that each item on the form is given a different name. The name attribute is added as follows:

<input type="text" name="username">

Which names this textbox 'username'. As with many tags involved with HTML forms, this is an invisible change, and is only really of use once you start processing forms. If you are submitting your form using GET, though, the input's name will be shown in the URL of the page (it is also sent with the data if you use POST, but this is invisible), for example:
login.php?username=david

A third attribute which can be used with your textbox is value. This allows you to set an initial value for your textbox, which can be changed by the user, for example if I had a textbox to take in an e-mail address, I could set the inital value to 'user@domain.com' by the following code:

<input type="text" name="email" value="user@domain.com">

There are a few more attributes which can be used with textboxes, but they are not necessary for basic forms, so these will be covered in the next part.

More HTML In Forms

Although it is probably obvious, I will just mention that all other HTML tags are available to you inside your <form> tags. It is important to remember, for example, to label all your input elements, so that the user knows what to enter in them. You can use all other types of HTML formatting as well as text, though, and often the use of tables can help set out an HTML form in a better way.

Buttons

Once you have got the user to enter some data into a form, however basic it may be, you will need some way for them to send it on to the next page. This is where buttons come in. There are two basic buttons available to you in HTML, submit and reset. Submit is the most commonly used. Basically, when you put in a submit button, a button will appear on the page which, when clicked, tells the browser to send the form data to the URL which you defined in the action part of the form tag, using the method you supplied. The most basic submit button is added using the following code:

<input type="Submit">

There is an optional attribute of the submit button, though, which allows you to customize it slightly. This is the value attribute, which is used in exactly the same way as for a textbox, although in this case it simply changes the text on the button's face.

<input type="Submit" value="Sign Up">

You can have as many submit buttons in a single form as you like (for example many websites provide an 'I Agree' button at the top and bottom of a long page of terms and conditions, but all submit buttons in a single form will do the same thing.

The second button you can add to your form is a reset button. All this does when clicked is to reset the form to its initial state (usually clearing all values but, in the case of the value attribute being set for an input option, it will also restore the initial values you set). This is added to a form using:

<input type="Reset">

Like a submit button, reset can also have its text changed using the value attribute.

**AQUARIAN** · 27-Feb-2007, 01:33 AM

Source:Free Webmaster Help - Everything A Webmaster Needs- For Free

27-Feb-2007, 01:25 AM	#1 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Advanced HTML Tutorial Advanced HTML Tutorial Part 1 - Advanced Text Formatting Introduction HTML is made up of a great many elements, a lot of which are overlooked, forgotten or just unknown to many web designers. Although with a basic knowledge of HTML you can develop a website, to take advantage of many of the advanced features, and to make pages fully compatible, it is useful to learn these less popular tags. Before reading this tutorial, you should have a basic idea of how HTML pages work, and how to do basic coding in HTML. A good reference for this sort of thing is the HTML Basics Tutorial, here on Free Webmaster Help. More <font> The font tag is the most used HTML tag, and takes a very basic form. It allows you to specify the color, size and font of text. Although largely thought to be obsolete by many developers, due to the greater control given by stylesheets, it still provides a very easy way to change the look of the page. The basic use of the font tag involves setting a font using: <font face="Arial">Text</font> but this does introduce another problem, that of different computers accessing a page. Unlike publishing methods such as print, it is up to the user's computer, not the printer, to render the pages, so they can look different on all computers. This is especially noticable with the font face attribute, as it is very rare to have a font installed on every computer that visits a website. Because of this the HTML specification has a system built in where multiple fonts can be specified. For example, you can use: <font face="Arial, Helvetica, sans-serif"> which would tell the browser to first try to display the text in Arial, if that wasn't found try Helvetica and if not use the standard sans-serif font. This allows you to have control over how pages are displayed by browsers without the correct font, although it is far from perfect. The best uses for this tag, are if you really want to use a non-standard font (and don't want to use stylesheets) or if it is important that you can accurately predict how pages will look on other computers. It is good practice to use font face in this way for all applications, though, for the sake of compatibility. Bold, Italic, Underline and Strikethrogh A further method of controlling how your text appears, other than changing the size color and font is to apply the four standard text formats to it. HTML has tags for all of these, which are supported by nearly all browsers. Bold text is simple to create, it uses either the: <b>Text</b> or <strong>Text</strong> tags. Usually, it is simply a matter of preference over which one you choose, but accessibility experts normally recommend using <strong> as many screen readers (programs which read web pages to the blind) will recognise that the text is highlighted and speak it appropriately. Similarly you can create text in italics using: <i>Text</i> or <em>Text</em> Again, it really doesn't matter whether you choose to use <em> or <i>, but screen readers can often recognise <em> and emphasised text. Underlines are achieved using: <u>Text</u> although I would recommend against using this greatly, as it can often be confused with links on the page. Strikethrough, is used to 'cross out' text: <strike>Text</strike> although this is not particularly commonly used. Subscript and Superscript Subscript and superscript (text slightly above or below the line) is something which has long been supported, but is not common as it is only commonly used in scientific applications. There are other uses, though, and it is not a difficult tag to implement: 8 x 8 = 8<sup>2</sup> 8 x 8 = 82 H<sub>2</sup>O H2< /sub>O Preformatted Text HTML has been designed so that it ignores multiple spaces in documents, for example if you enter two standard spaces it is rendered as one. Although this allows indentation of code without changes to the presentation on screen, it does make it difficult to display some sorts of content (such as pre-formatted tables written in plain text). For this, you can use the <pre> tag. This stands for preformatted text, and will display the text exactly as it appears in the document source, for example: <pre> Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400 </pre> Without the <pre> tags this would display as: Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400 but after adding the tags in it shows up as: Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400

27-Feb-2007, 01:27 AM	#2 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Advanced HTML Tutorial Advanced HTML Tutorial Part 2 - Lists, Headings & Base Introduction There are many features of HTML which, even with the greater acceptance of CSS, are still used often, and have no real replacement, in fact the header tags (explained later) are very important when using CSS. Lists There are many occasions when you may want to write a list in HTML. Of course, it would be easy enough to just write out the text which you want in the list and type numbers or s in front of it, but there is a much easier, more flexible method. THe most basic type of list is a bulleted list, or an unordered list, as it is known in HTML. To create a list like: Things To Do: Create Website Upload Become Millionare you would use the following code: <ul>Things To Do: <li>Create Website</li> <li>Upload</li> <li>Become Millionare</li> </ul> The tag: <ul> tells the browser that you are starting an unordered list. It will indent the text from this point. The tags: <li> and </li> tell the browser where list items begin and end, so that it can place a bullet point in front of them. Notice that new lines are started automatically, without the need for <br> tags. The list is then closed using the: </ul> Sometimes you may want to nest your lists, to have sub-items. For example: Things To Do: Create Website Make pages Check pages Upload Become Millionare This would be done with the following code: <ul>Things To Do: <li>Create Website</li> <ul><li>Make pages</li> <li>Check pages</li></ul> <li>Upload</li> <li>Become Millionare</li> </ul> All you have done is simply to have placed one list inside a list item of another. The browser will cope with all the formatting of this and, as long as you remember to close your tags correctly, it will be formatted correctly. Numbered lists are another feature of HTML. They allow you to have a list with the numbers automatically added (much like in a word processor). The structure is exactly the same as for an unordered list, except the list tag is: <ol> (standing for ordered list). The following example: Things To Do: Create Website Upload Become Millionare would be created with the following code: <ol>Things To Do: <li>Create Website</li> <li>Upload</li> <li>Become Millionare</li> </ol> Again, with numbered lists you can nest them as with unordered lists, or even combine the two. Headings* HTML formatting is mostly done using the <font> and various other tags, but what many people do not realise is that there are already some preformatted headings included. There are six of these, each one being a 'level' lower than the one above. They range from the largest <h1> to the smallest <h6>. The following are examples: A Level 1 Heading <h1>A Level 1 Heading</h1> A Level 2 Heading <h2>A Level 2 Heading</h2> A Level 3 Heading <h3>A Level 3 Heading</h3> A Level 4 Heading <h4>A Level 4 Heading</h4> A Level 5 Heading <h5>A Level 5 Heading</h5> A Level 6 Heading <h6>A Level 6 Heading</h6> Although these headings do not look particularly nice, they do have two important uses. Firstly, being structured (as you move from 1 to 6 it signifies headings of lesser importance) intelligent software and browsers can use this to decide what is important on the page. Also, speech browsers for the blind can also take advantage of this. The second of the uses is more relevant, though. This is, that using CSS (Cascading Style Sheets) you can very easily change the format of the headings from 1 to 6, to be formatted exactly how you want them. This has the great benefit of allowing you to have structured headings but having them looking like they fit in with your site. Base The <base> tag is unknown by many people, but in certain circumstances it can be extremely useful. It has two main attributes, href and target. The href attribute is used to tell the browser what the base URL for the page is. This can then be used to correctly interpret relative hyperlinks. For example, you may have a link pointing to: afolder/mysite.html If your page was located at: http://www.mysite.com/page.html then the URL loaded when the link was clicked would be: http://www.mystie.com/afolder/mysite.html You could, though set the base for the document to Metasearch Search Engine - Search.com. In this case, the link would load: Metasearch Search Engine - Search.com This also applies to images and any other relative URLs given to documents. The above <base> would be implemented using: <base href="http://othersite.com"> and this tag would be placed in the <head> section of your HTML. Although the usefulness of this tag may not be instantly apparent, it can be very useful if you need to put a premade page on another server, or if a page is accessed from multiple domain names. This way you do not need to update all your links, just the <base> of the document. The target attribute is useful if you are using frames on your site. With frames, the target frame for a hyperlink is given as: <a href="thepage.html" target="contentframe"> which would load the file thepage.html in the frame called contentframe. If you want all links to open in a particular frame, though, for example if you have a navigation bar page and you want all the links to load in the content frame, you could use the following <base> tag: <base target="contentframe"> As with standard HTML targets, you can also use: _blank to open in a new window _self to open in the current frame _parent to open in the frameset parent _top to open in the whole browser window with no frames Both the target and href attributes can be combined in the <base> tag.

27-Feb-2007, 01:31 AM	#3 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Advanced HTML Tutorial Advanced HTML Tutorial Part 3 - Forms Advanced HTML Tutorial Introduction Interactivity is increasingly becoming a major part of many websites. Although the systems are all run by backend software, such as PHP or ASP, there must still be a front-end interface for the visitors to use. The sending of data to a script on a website is achieved by using HTML forms. Form Basics The basic idea of an HTML form is the same as that for a paper form. You are presented with a number of related sections of a page where you must input information. There are a number of different ways to enter data, including typing it in, selecting it from a list and ticking boxes. HTML deals with forms exactly the same way as you would with a paper form. There are groups of items and single items all gathered together in one large form and, like a paper form, the HTML tells the browser where to return it to. Defining A Form In HTML the first thing you must do is to define a form as a whole. This is done using the tags: <form> </form> As with any other HTML tag, they apply to everything in between, so everything you contain inside form tags will be part of that particular form. You are not limited to one form on a page, though, as you can have as many sets of <form> tags as you need (for example to provide a login form and a signup form on the same page) as long as they are not nested. <form> is an invisible tag, as it will not change the way in which the page is displayed (although some browsers seem to leave a small space after a form). A form tag on its own is almost completely useless. There are three main attributes you can use, though, which make the form more useful. The first of these is action, which is used as follows: <form action="http://yoursite.com/cgi-bin/formmail.cgi"> The action of a form tells the browser where to send the data entered, in this case the file at E-Commerce Hosting. This file will then be responsible for dealing with the data. The useful thing about form tags is that the script you are sending the data to can be anywhere on the web, so you are not simply limited to scripts on your site. The second attribute is the method, which is either used as: <form method="post"> or <form method="get"> These two methods, POST and GET, refer to the standard HTTP metods of sending data across the internet. The GET method puts the data into the URL of the next page, so that it is visible in the browser's address bar, for example: http://yoursite.com/scripts/page.php?page=12&name=david&agree=yes This has both an advantage and a disadvantage. The advantage is that URLs can easily be typed in or linked to using GET, although when using forms this is not vital. The disadvantage of this, though, is that the data can be seen by anyone looking at your browser and it can show up in the history. If you are sending sensitive information from your form, you shouldn't use this method. POST is slightly different. Instead of encoding the form data into the URL, it is sent in a special data stream. This means that it is invisible in the browser, so is far more secure than GET (although sensitive information should still not be sent without encryption). By default a form will submit using GET unless you specify the method (although it is good practice to always specify whichever one you are using). Usually form tags only ever include the method and action attributes, but occasionally you will need to use the name attribute. This is used as: <form name="loginform"> This allows the browser to recognise the form on the page, which is useful if you are writing scripts in JavaScript, for example to validate form data. In practically every case you should use both the method and action tags when defining a form, and should only use name if you particularly need it. Text Input The most basic type of form input is the standard textbox, like this: It allows the user to enter text and will send this data to the processing script when the form is submitted. Nearly all input options use the same basic tag, which is the: <input> tag. This is combined with a number of attributes to provide different types of input on your form. To give a standard text box, you use the following: <input type="text"> This is not quite enough to have a working text box, though, as there is another inportant attribute, name. Name allows you to give the textbox a name with which the data can be referred to later. It should be entered without spaces or special characters, but it is important that each item on the form is given a different name. The name attribute is added as follows: <input type="text" name="username"> Which names this textbox 'username'. As with many tags involved with HTML forms, this is an invisible change, and is only really of use once you start processing forms. If you are submitting your form using GET, though, the input's name will be shown in the URL of the page (it is also sent with the data if you use POST, but this is invisible), for example: login.php?username=david A third attribute which can be used with your textbox is value. This allows you to set an initial value for your textbox, which can be changed by the user, for example if I had a textbox to take in an e-mail address, I could set the inital value to 'user@domain.com' by the following code: <input type="text" name="email" value="user@domain.com"> There are a few more attributes which can be used with textboxes, but they are not necessary for basic forms, so these will be covered in the next part. More HTML In Forms Although it is probably obvious, I will just mention that all other HTML tags are available to you inside your <form> tags. It is important to remember, for example, to label all your input elements, so that the user knows what to enter in them. You can use all other types of HTML formatting as well as text, though, and often the use of tables can help set out an HTML form in a better way. Buttons Once you have got the user to enter some data into a form, however basic it may be, you will need some way for them to send it on to the next page. This is where buttons come in. There are two basic buttons available to you in HTML, submit and reset. Submit is the most commonly used. Basically, when you put in a submit button, a button will appear on the page which, when clicked, tells the browser to send the form data to the URL which you defined in the action part of the form tag, using the method you supplied. The most basic submit button is added using the following code: <input type="Submit"> There is an optional attribute of the submit button, though, which allows you to customize it slightly. This is the value attribute, which is used in exactly the same way as for a textbox, although in this case it simply changes the text on the button's face. <input type="Submit" value="Sign Up"> You can have as many submit buttons in a single form as you like (for example many websites provide an 'I Agree' button at the top and bottom of a long page of terms and conditions, but all submit buttons in a single form will do the same thing. The second button you can add to your form is a reset button. All this does when clicked is to reset the form to its initial state (usually clearing all values but, in the case of the value attribute being set for an input option, it will also restore the initial values you set). This is added to a form using: <input type="Reset"> Like a submit button, reset can also have its text changed using the value attribute.

27-Feb-2007, 01:33 AM	#4 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Advanced HTML Tutorial Source:Free Webmaster Help - Everything A Webmaster Needs- For Free

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)