BASIC
HTML TUTORIAL
Part One:
Your First Page
Introduction
HTML
is the language that makes the web work. It is the usual programming language
used for most web sites you will visit. It is understood by nearly every computer
in the world and is one of the most universal ways of creating documents. HTML
may not have the best formatting tools and you cannot guarantee that your pages
will look the same in every single browser but without it there would be no
internet.
You can, of course, use a WYSIWYG (What You See Is What You Get) HTML editor to
make websites but they have 3 main disadvantages:
They sometimes use excess code to create a look on a page
which slows down loading times
They do not always create fully compatible code
Some WYSIWYG editors change any HTML code you enter by hand
Because of these you can create much better pages by
writing HTML by hand. I must admit that I don't do this much because it is much
slower than using a WYSIWYG editor but I still know HTML as it is always good
to have a background knowledge. I assure you that if you learn HTML you will
create better web pages.
This tutorial will show you the basics of writing HTML.
What Software?
You
do not actually need any specialist software to write HTML code and many web
designers argue that the best web sites are created in Notepad! For this
tutorial, though, I will be using one of my favorite web design programs,
FirstPage 2000. It is free and you can download it here.
Some of the advantages of using an HTML editor is that it will color code your
HTML code so that it is easier to read, 'clean up' your code when you have
finished, and you can use buttons in the software to insert repetitive code.
It doesn't matter if you are using Notepad, FirstPage 2000 or another HTML
editor, this tutorial will actually be teaching you the language.
Understanding HTML
The
actual HTML language is very easy to learn once you know the basics. HTML is
made up of a tag. A tag is a piece of text contained in <> and looks
something like this:
<tag>
There are two types of tag. Opening and closing tags. Closing tags are
only different as they have a / before them:
</tag>
Tags appear in pairs like this:
<tag></tag>
You are probably not really understanding this so I will explain
further. Anything between two tags will have those tags applied to them. A good
example of this is using the <center> tag to center align text:
<center>Text in here is centered</center>
Nearly all tags have a closing tag but a few do not. What you must
remember is:
<Tag>Text</Tag>
Declaring HTML
Open
the program you are using to write HTML. If you are using an HTML editor you
will have some code already entered. If you do not have it already, enter the
following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
I will explain what all this means below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
This tells the browser what language is being used for the page. It is
not entirely necessary but it is good to add it in.
<html>
Tells the browser that this is the beginning of an HTML document.
<head>
This is the beginning of the header section. The header section contains
the configuration options for the page (like title).
<title>Untitled</title>
This tells the browser what to display as the title of the page. This
appears in the title bar at the top of the browser. Enter the name of your page
between the <title> tags.
</head>
End of the header section.
<body>
</body>
Everything between these is in the body of the page. This is where all
text, images etc. are. This is the most important part of the page.
</html>
Shows the end of the HTML document.
Summary
This
concludes this week's tutorial. You have learned how HTML is structured using
<tag>text</tag>. You must always remember that whatever is between
a starting tag <tag> and an ending tag </tag> will have the tag
applied to it. You have also learned how to set the page's title and declare an
HTML document
Part
Two: Adding Text
Introduction
In
part 1 I explained how to declare an HTML document and I explained how HTML was
built up using <tag>text</tag>. Below is the HTML you added in the
last part.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
For this section of the tutorial I will show you how to create a simple
homepage. The first thing you will want to do is change the title of the page
from Untitled to:
My Personal Homepage
To do this change the tag:
<title>Untitled</title>
to
<title>My Personal Homepage</title>
The <font> Tag
The
<font></font> tag set are the most common and one of the most
versatile tags found in HTML. Using the tags in the basic form they will show text
on the page (but they can be changed). To start off we will just display the
text:
Welcome To My Homepage
on the screen. To do this you need to add:
<font>Welcome To My Homepage</font>
between the <body> and the </body> tags. This will display
the text in a standard font size, black, in Times New Roman. Not the most
interesting thing for your homepage.
Size, Color and Face
These are the three things you can set for a piece of text. These are
the first tag attributes you have come across. We will start with the Face
attribute. Instead of having a new tag for font face (the font it will be
displayed in) you add it to the font tag like this:
<font face="Arial">Welcome To My
Homepage</font>
As you can see you enclose the name of the font in quotation marks
"" after an equals sign. You do not need to include this in the end
tag.
More than one attribute can be added to a tag so it is easy to display this in
a different size. The only thing you must remember is that sizes in HTML are
not the same as normal font sizes (measured in point sizes (pt). They are a
single number which relate to a standard font size in the following way:
|
HTML Font Size |
Standard Font Size |
|
1 |
8 pt |
|
2 |
10 pt |
|
3 |
12 pt |
|
4 |
14 pt |
|
5 |
18 pt |
|
6 |
24 pt |
|
7 |
36 pt |
You can make a nice large title by changing the tag to the
following:
<font face="Arial"
size="7">Welcome To My Homepage</font>
As you can see, once you know a tag it is easy to add extra options to
it. The final one you will learn is the color tag. You must make sure that you
must use the American spelling for this. Color is a little different to the
other attributes. It can be changed using an HTML Color Word (a standard color
name) but only some color names work with this (you can see a list of them
here). You can also use HEX codes. HEX codes are in the format #000000 (#
followed by six numbers). The first 2 numbers are the amount of Red, the second
2 are Green and the last 2 are blue. To made this text red you could either
use:
<font face="Arial" size="7"
color="red">Welcome To My Homepage</font>
or
<font face="Arial" size="7"
color="#FF0000">Welcome To My Homepage</font>
Centering The Text
Finally you will want to center the text so that it looks like a real
title. To do this you can use the <center> tag. To do this simply enclose
everything you want centered in the <center> tags like this:
<center>
<font face="Arial" size="7"
color="red">Welcome To My Homepage</font>
</center>
Which would display text like this:
Welcome To My Homepage
Summary
You
have now learnt how to display text on your web page and how to format the
color, size and font of it. You have also learnt how to center things on the
page. This is the code you should now have for your website.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face="Arial" size="7"
color="red">Welcome To My Homepage</font>
</center>
</body>
</html>
Part
Three: Positioning Text
Introduction
In
the last part we finished with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face="Arial" size="7"
color="red">Welcome To My Homepage</font>
</center>
</body>
</html>
Which displayed the words 'Welcome To My Homepage' in large, red, Arial
letters in the middle of your page.
In this part I am going to show you how to position text (or anything else) on
your page. I will also show you some other useful HTML tags.
The <p> Tag
The
<p> tag is extremely. P stands for Paragraph. It is used to break up text
into paragraphs. To define a paragraph you just include the text inside the
<p> and </p> tags. This will then group the text together and leave
a space after it (like the paragraphs on this page.
The <p> tag has an attribute which can be added to it. This is the align
option. You can specify three types of alignment (like in a word processor) -
left, center and right. For example to align the text right you use:
<p align="right">Text</p>
It is up to you to decide whether to use the <center> tag or the
<p align="center"> tag. I usually use the <center> tag as
it is shorter which will reduce loading times. It is hardly ever necessary to use
the align="left" attribute as nearly all browsers automatically align
text to the left but some people use it.
The <br> Tag
Sometimes
you will not want to leave a space after your paragraphs. To do this you should
use the <Br> (break) tag. This tag is very useful as, wherever you insert
it, it will start a new line. To create a new line without a space you use the
<Br> tag and to create a line break you use <Br><Br>. There
is no end tag for the <Br> tag.
For example:
This text is on a line
This text is on the next line
This is text after a line break
This is text after 3 <Br> tags.
The <hr> Tag
The <hr> tag is another very useful way of breaking up your page.
It will insert a horizontal line like this:
As you can see this is an extremely simple to use tag. It
has no closing tag. There are a few attributes for them but they are rarely
used. You can change the height (in pixels) the width (in % of window or
pixels) and the color (Internet Explorer only). Here is an example of how to
create a line 30 pixels high, 50% of the window in blue (you will see it in
gray if you are not using Internet Explorer:
<hr width="50%" size="30"
color="#0000FF">
Comment Tags
Comment
tags are useful if you want to put notes into your HTML code which will not show
up on the page. They can be used for copyright notices, little notes to tell
you what each section of code is about, notes to people reading your code or
anything else you want to use them for. Some web hosts use them so that their
servers will know where to insert banners (they look for a specific comment
which you must add). These comments take the form:
<!-- Your comment -->
The browser will ignore anything in a <!-- --> tag.
Part Four:
Hyperlinks and Bookmarks
Introduction
You should know how what a hyperlink is and what it is used for. If you
do not, a hyperlink is a piece of text you click to be taken to another page. A
bookmark is a way of bookmarking a point on your page so that you can hyperlink
to it.
The <a> Tag
The
<a> tag is used when creating hyperlinks and bookmarks. It stands for
anchor. The functions are explained more fully below.
<a
href>
To
create a hyperlink you need to use the href variable of the <a> tag. Href
stands for Hyperlink REFerence. To make a piece of text or an image into a
hyperlink you contain it in:
<a href="pageurlhere">Text Goes In
Here</a>
Hyperlinks can specify several things:
|
Function |
Example Code |
|
Web Page or Site |
<a
href="http://www.webaddress.com/folder/page"> |
|
Local Page |
<a href="pagename.html"> |
|
Local Page In A Folder Level Below |
<a href="foldername/pagename.html"> |
|
Local Page In A Folder Level Above |
<a href="../pagename.html"> |
|
Open E-mail Program With E-mail Addressed |
<a href="mailto:[email protected]"> |
|
Bookmarked Section |
<a href="#bookmarkname"> |
|
Bookmarked Section In Another Page |
<a href="pagelocation.htm#bookmarkname"> |
Bookmarks
Bookmarks
on a page are very easy to make as they also use the <a> tag. Instead of changing
the href variable you use the name variable. For example:
<a name="top">The First Text In The
Page</a>
Will create a bookmark called top in the text which the tag surrounds.
An image can also be contained in this tag. You can then link to this using a
standard hyperlink:
<a href="#top">Back To Top</a>
You can name bookmarks anything you like. Bookmarks are very useful on
pages which are very long as they can be used to quickly go to another part of
the page.
Part Five: Images and Backgrounds
Introduction
Images are a very important part of an HTML page. They make it
different from an e-mail or just a printed page. They can be used as a design
element to make pages look better and can be used as the background to make the
page more interesting.
Images
Images
are added to pages very easily. All you need to do is use an <img> tag.
You must use some variables with it, though, or it will show:
Which is not very helpful. You must use the src= variable to choose the image
to insert. Like a hyperlink this can either be a relative reference or a direct
reference including the site's url. For example:
<img
src="http://www.gowansnet.com/images/gnet.gif">
If you include an image in a hyperlink it will, by default, display a blue
border round the image. To turn this off you should use the:
border="0"
variable for the image.
Resizing
Images
You
can resize images inside the browser using two other image variables - width
and height. Even if you do not want to resize the image it is useful to specify
its size using these variables as it will put a placeholder in the browser and
the page will not change much when the image is loaded.
These tags can also be use to make an image bigger or smaller. All measurements
are in pixels. Here is an example:
<img
src="http://www.gowansnet.com/images/gnet.gif" border="0"
width="80" height="30">
or
<img
src="http://www.gowansnet.com/images/gnet.gif" border="0"
width="10" height="10">
It is good to remember that it is probably better to resize an image in
an image editing program if you are making it smaller. This is because the
smaller image will have a smaller file size and will load quicker. This would
not be the case if you resized it in the browser.
Alt
The final variable of an image is the alt variable. This tells the browser what
the alternative text for an image should be if the browser has images turned
off. It is used like this:
<img
src="http://www.gowansnet.com/images/gnet.gif" alt="The
Gowansnet Logo">
Finally you should also remember to use gif or jpeg images as the file
sizes are much smaller.
Background
Colors
You
can change the background color of the page using the bgcolor variable of the
<body> tag. It is used like this:
<body bgcolor="#0000FF">
which would set the background color as blue. You could also use an HTML
color word.
This is a very simple tag to use as there is really no more to it. You should
always remember to ONLY use a light color text on a dark background or a light
color text on a dark background. NEVER use blue on red or red on blue. It is
generally thought that a white background with black text is best.
Background Images
Background
images can be placed on a web page. A background image is an image which is
tiled behind the text. It is done using another variable of the <body>
tag. It is background and it is used like this:
<body background="myimage.gif">
It is sometimes a good idea to include a background color as well so
that people can read the text on the right color before the background image
has loaded. Again, you should remember only to use contrasting colors.
Summary
That is the end of this tutorial. You have learnt how to create an HTML page
with formatted text split into paragraphs, insert images, link between pages
and link to different parts of your page. Watch out for our tutorials on how to
create frames and tables
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
H2O
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
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 Millionaire
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 http://othersite.com. In
this case, the link would load:
http://othersite.com/afolder/mysite.html
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.
Part 3 – Forms
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 http://yoursite.com/cgi-bin/formmail.cgi. 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:
Top of Form
Bottom of Form
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 '[email protected]' by the following code:
<input type="text" name="email"
value="[email protected]">
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.
Part 4 - Further Forms
Introduction
In the last part, you learned how to create a basic form in HTML, which
included a simple textbox. HTML forms allow you to have a huge number of
different form elements, though, and some of these will be covered in the following
page.
Larger Text Inputs
Although textboxes offer a useful way of getting textual input from a user, it
is quite limiting as the user can only enter one line, and this is limited in
length. If you want to get more than just a few words of text from a user, you
are better off using the far more flexible textarea. The basic code for a
textarea (or multiline text box) is:
<textarea name="comments">
</textarea>
As with any form element, you must specify a name (in this case comments). You
may have noticed that, unlike the standard text box and button, this form
element has a closing tag. This is because, as well as allowing the user to
enter more text than other elements, it is also designed to allow the webmaster
to set more initial text. Anything between the closingand opening tags will be
placed inside the textbox and, unlike with standard HTML, new lines taken in
your code between these tags will be shown as new lines on the page. If I
wanted to, for example, ask a user for comments, I could create the following
textbox:
using this code:
<textarea name="comments">Thank you for visiting the site. We
would appreciate it if you would leave some comments in this box to help us
improve.</textarea>
One of the useful features of textboxes is that they will wrap text for you,
and also provide scrollbars if the text cannot all fit in the box. If you
expect users to enter very large pieces of data, though, you will want to have
a larger box than the default. Luckily HTML has allowed for this with the cols
and rows attributes. These allow you to set the number of columns in your
textbox (i.e. the number of characters wide it is) and the number of rows which
appear. For example, you could have used the following code for your comments
form:
<textarea name="comments" rows="6"
cols="25">Thank you for visiting the site. We would appreciate it
if you would leave some comments in this box to help us
improve.</textarea>
Radio Buttons
Radio buttons are a form element usually used for choices, such as voting. They
are defined in groups where only one button at a time can be selected, for
example:
Top of Form
Red
Green
Blue
Bottom of Form
This example would be achived using the code:
<input type="radio" name="colors"
value="red">Red<br>
<input type="radio" name="colors"
value="green">Green<br>
<input type="radio" name="colors"
value="blue">Blue
As with most other form elements, radio buttons use the standard <input>
tag, with the type set to 'radio'. Unlike other elements, radio buttons must be
named based on their groupings, not individually. For example, with text boxes
you might have one called 'name' and one called 'password' but for radio
buttons to work correctly (deselecting one when another is chosen) all the
buttons in a group must have the same name. When submitted, the form will give
the name of the group, followed by the value set for the selected button, as its
output. If you want multiple radio button sets in one form all you need to do
is to give the othetr set a different name. It is worth noting that the
location on the page has no relation to how radio buttons are grouped, as long
as buttons have the same name and are in the same form, they will be grouped.
Check Boxes
Unlike radio buttons, checkboxes are either on or off. They are not grouped and
as many or as few of them can be selected as the user wants. Again, a checkbox
is inserted using the standard <input> tag, using both name and value:
<input type="checkbox" name="agree"
value="yes">
When a form containing a checkbox is submitted, the browser will only send the
textbox name and value if it is selected. If not it will ignore the checkbox.
It may be useful in some cases to have the checkbox pre-selected. IN order to
do this, you must simply add a checked attribute to the <input> tag:
<input type="checkbox" name="agree"
value="yes" checked>
The user will still have full control over the checkbox, and can check and
uncheck its value, even if you preset the box as checked, but it is more likely
that the user will leave it checked.
Selection Boxes
Selection boxes allow you to provide a list of options on your website from
which you can choose one. This can be very useful for entry such as country,
where you don't want the user to be able to freely enter text, for example:
The basic code for setting up a selection box is:
<select>
</select>
As with any other form tag, you can add the name attribute, so that you can
access the form data later. In between the <select> tags you can add each
option you want to appear. These should be in the order you want them in the
list. There is no limit to the number of items you can add as the browser will
adjust the box accordingly.
<option value="1st">Item 1</option>
You can put in any value you want, it does not need to be sequential or bear
any relation to the use of the option (as with a text box, for example).
Between the <option> and </option> tags you enter the text you want
to appear in the selection list. This can be as long as you want (within
reason), as the select box will automatically resize to cope with the longest
item.
In a select box, by default, the first option is displayed when no selection is
made. In many cases this is acceptable (most people will put 'Please Make Your
Selection' here and will assign it a value which they can later detect is an
invalid input, but sometimes, for example in country-select boxes, you will
want to make another option the default. To do this, you simiply need to add
the 'selected' attribute:
<option value="USA" selected>United States</option>
Hidden Fields
The final element which you can add to your form is one which, at first,
appears to be useless. It is a hidden field, which will simply send a name and
value with the form data. Nothing will appear on screen and the user is not
given the chance to change the value. It will show nothing on the HTML page
(although it will be in the source code, so it shouldn't be used for storing
the information which the user shouldn't see). The hidden field is extremely
useful in some server-side systems, where HTML is generated on-the-fly. For
example, in many ordering systems there will be multiple pages where the user
inputs data. Often this data is put temporarily into a database, and the key
for accessing it placed into a hidden field on the page for the next stage, so
that the backend system can identify which user is submitting the data from the
second page.
A hidden field is added to the form using:
<input type="hidden" name="userid"
value="98503804598">
There are no extra attributes for the hidden field, as there are no appearance
settings which can be changed for it. You can have as many hidden fields in
your form as you want, as long as they all have different names and they can be
placed anywhere inside the <form> tag.