HTML Archive

HTML Form Basics

HTML Form Basics

HTML is used mainly for presenting and showcasing information for the visitor. But it’s also easy to allow them to enter information and use it in various ways. This tutorial uses the example of a contact form.

Simple Contact Form

Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

Name:
Email Address:
Message:

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:


All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!

Other Form Options

HTML doesn’t just use text fields for collecting information. You also have the option to use checkboxes, radio buttons and drop down lists. Feel free to take and use the examples below:

Radio Buttons

These allow you to enforce that the visitor only makes one choice, unlike checkboxes which allow you to select multiple answers/settings. They look something like:

Red
Blue
Yellow

The code you use to create the above is:

 Red
 Blue
 Yellow

Checkboxes

Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:

Red
Blue
Yellow

The code you use to create the above is:

 Red
 Blue
 Yellow

Drop Down Boxes

Drop down boxes work in a similar way to radio buttons, allowing the user to select one option. However, they save a great deal of space if you are dealing with a long list – selecting your country for example:


The code you use to create the above is:


June 23rd, 2007 Posted in Articles, HTML
Introduction to HTML – Part 3

Introduction to HTML – Part 3

HTML (Hyper Text Markup Language) is the core of designing websites. Part three of this introduction covers the use of forms for collecting information from the visitor, and how to display tabular data in tables.

The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section discussed Hyperlinks, Pictures and Lists and the final section will now cover the use of forms for collecting information from the visitor, and how to display tabular data in tables.

Tables

Tables are the perfect way to show data which needs to be tabulated. Please please don’t use tables for layout out your content on the page – that’s what CSS and style sheets are for! Here is an example of a basic table:

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3

This would result in a table which looked like the following:

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3

It’s not the prettiest thing in the world, but it does get the job done. You can alter the look and feel using CSS.

Forms

So now you know how to show content on a page using HTML, what happens when you want to get some information from a visitor to your website? The technique used to do this is appropriately called a form. Once you have collected the information, you need to decide what to do with it. You can either add it to a database (a bit beyond the scope of this article), or email it. HTML can’t deal with emails or databases, but a different language called PHP or ASP can. Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

Name:
Email Address:
Message:

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:


All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!

Conclusion

That rounds up our Introduction to HTML, and you should have a basic grasp of how to start creating a website. We’d recommend looking at our CSS Basics now, to grasp how to get your website looking great. Also, check out our Introduction to Web Standards to see how they can help your designing.

May 5th, 2007 Posted in Articles, HTML
Introduction to HTML – Part 2

Introduction to HTML – Part 2

HTML (Hyper Text Markup Language) is the core of designing websites. Part two of this introduction covers the Hyperlinks, Pictures and Lists.

The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section will discuss Hyperlinks, Pictures and Lists.

Hyperlinks

HTML uses a concept called hyperlinks to link one HTML page to another. The code for these is straight forward:

Go to Page 2

The page2.html part is the file which you would like to link to. The Go to Page 2 part is the text which the visitor will click on to follow the link. Generally, a website has a navigation bar – close to the top of the page – which is made up of a collection of hyperlinks to allow visitors to navigate through the website. Some more tutorials cover this in our navigation category.

Images and Pictures

Pretty pictures are a vital part of a website, and graphical content can draw in users and provide extra information. The tag to add a picture is very straight forward, but you must remember two important things. You need to note which folder you put the picture and link to it correctly, and all image filenames are case sensitive. To link to a file called flower.jpg in a directory (folder) called pictures, you would use the following:

Flower

The src part shows the folder and filename of the image, and the alt part gives a description of the picture for people who aren’t able to view images in their web browser.

Lists

HTML can use two different types of lists. These are bulleted, or ‘unordered’ lists and numbered, or ‘ordered’ lists. These is a different piece of code to display each one, but in essence they are identical. One will result in a bullet being displayed next to each item, the other a number going up by one each time. The code you would use is:

  • List Item 1
  • List Item 2
  • List Item 3

The ul part states this is an unordered list, and the li part denotes each item in the list. You can probably guess which part you would change if you want a numbered, ordered list – you simply use ol in place of ul. Lists are very easy to use in HTML, and can also be combined with CSS to create navigation menus which look great. The final part of this tutorial will look at using tables and forms in HTML, for displaying tabular data or taking input from the visitor by means of a form.

Introduction to HTML Part 3 – Tables and Forms

May 4th, 2007 Posted in Articles, HTML
Introduction to HTML – Part 1

Introduction to HTML – Part 1

HTML (Hyper Text Markup Language) is the core of designing websites. Part one of this introduction covers the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings.

test

HTML and CSS – The difference

Think of HTML as the structure of the website you are making. It will contain the text, images and links – all put in the correct order – to compose the page that you want to display. CSS is the look and feel of the page. In your CSS you define the colours, fonts, backgrounds and borders surrounding the content you have in your HTML file. We explain below how to attach your CSS file to your HTML file, but read our CSS tutorials for more information on that topic.

A simple HTML page

The best way to learn is by doing, so the following are a few examples of HTML in action. This is, at it’s simplest, a HTML page:


   
      
      
   
   
      Website Text
   

That’s it – it’s much more straight forward than you would expect. HTML works on a system of tags, with each one surrounded by brackets. Any tag that you open must be closed. This can be done as above with a seperate opening and closing tag (i.e. body) or using one tag such as below, for a line break, br. Here is a brief description of the tags used in the above example:

html – This tells your web browser that you want to display a HTML page – everything inside those tags is HTML.

head – The ‘head’ is a section where you can show the title of the document and provide information about what the page contains.

title – The title is self explanatory, and displays in the title bar of your web browser window.

link rel="stylesheet" type="text/css" href="style.css" / – This links the CSS file (style.css) to your HTML document.

body – The ‘body’ is the main section. Anything inside the body tag will display in your web browser.

This won’t really do much good though, as it will display a blank page with ‘Website Text’ inside it. The following will explain how to get a little more advanced:

Paragraphs, Line Breaks and Headings


   
      
   
   
      

Main Heading

Welcome to my website, full of information

Second Heading

Here is some more information about my website, going into further detail about what you can look at and how you can navigate around.
If you would like to contact me, you can do so from our contact page.

This is a slightly more advanced example which introduces the idea of defining headings, using the h1 tags, putting p around paragraphs, and using br where you just want a normal line break. Having one page is OK, but generally you would want more than one page, with the ability to link them together…

Introduction to HTML Part 2 – Links, Pictures and Lists

May 1st, 2007 Posted in Articles, HTML
Subscribe
Membership