Creating basic forms in HTML

Using simple HTML forms is a very slick way of receiving information from your visitors. You put a few boxes and buttons on your page, they enter in their details and you receive them through email — brilliant.

Page Navigation:
Form Structure | Text Boxes · One-line Text Box · Text Area Box | Selection Boxes · Radio Buttons · Check Boxes · Drop-down Select Boxes | Send and Reset Buttons

Clock This page was last updated on 2012-08-21
Form Structure

Just like the rest of HTML, forms follow a structure. The <form> tag is a container tag. It holds all of the elements, such as text boxes and submit buttons, which we’ll see below, inside it. Our form container will look like this:

<form name=”feedback” method=”post” action=”mailto:you@site.com”>
<!– Form elements will go in here –>
</form>

This tag and its attributes start a new form; name the form “feedback”, specify that the method the form will use is to post the information, and give the location that the information will be sent to with the action attribute — in this case your email address. Make sure you put your address in straight after the attribute, with no space in-between.

Warning. This method of sending the data will just send an email, and in truth will not always work because of the different way some people will have set their email programs up. If you want a more robust solution which will also add a thank-you message afterwards, you need to use Perl or some other server-side scripting language to write a script that will send the email for you, which is a bit more complicated. For your first form, just send it straight to your email address.

Once you’ve set down that a form is going here, you will need to populate it with some of the input elements and a submit button. Put the parts below between the form tags.

Text Boxes

These will probably be the main parts of your form. They allow the reader to input either a line or multiple lines of text.

One-line Text Box

The first type of text box is a one-line box, suitable for information like their name or email address. It looks like this:
Click inside the box and try it out. You can type anything you want. The code for one of these boxes is

<input type=”text” name=”mail” size=”25″>

<input>
This is the tag name for many of the form elements that are there to collect user input.
type
The value of this attribute decides which of the input elements this one is. In this case, text is telling the browser that it’s a single-line text-box.
name
When you get the results of this form in your email, you’re going to need to know which responses were placed in which boxes, as you just get back a load of text. This is where the name attribute comes in. With this, each line in the response will be given a label in the email. If you used name=”firstname”, because you were using this box to find out the reader’s first name, you would receive
firstname=Ross
in the email you are sent.
size
This specifies the length of the box on your page. If the box is not wide enough for the information that is entered, it will scroll across to allow more letters, but you should tailor this to the type of information being asked for so that most people can see their whole response at once.
Text Area Box

This box allows more than one line of text to be entered. It’s suitable for comments, street addresses, that kind of thing. You don’t need to press return at the end of each line, the browser will wrap the text automatically.
For some reason, text areas aren’t specified as a value for input type=”…”, but instead have their own tag — <textarea>. It’s a stupid inconsistency, but we’re all just going to have to deal with that. The code is

<textarea cols=”50″ rows=”4″ name=”comment”></textarea>

Again, you’ll have to change around the dimensions to suit your needs. cols and rows here mean COLumns and er, ROWS respectively. Take note that this tag needs an end-tag too. More stupidity. Any text you put in there between the tags will appear in the box when the form is loaded.

If you want to change the colour of the scrollbar in there, you’re going to have to use some CSS in your scrollbars.

Selection Boxes

These three elements give the reader a choice of options, and asks them to pick out one or more of them.

Radio Buttons

These small circular buttons can be used in polls or information forms to ask the user their preference. When you set up a group of them, you can only select one choice. Try it here:

1. 2. 3.
They’re called radio buttons because they function like the buttons on a really old car radio. Remember, the guys who came up with this stuff have beards as long as your arm, so you should expect things like that. The code for a radio button is:

<input type=”radio” name=”choices” value=”choice1″>

The code is about the same as the one you’ve seen before. type=”radio” says that this is going to be a radio button. There is a new attribute here too — value. This is like the answer to a question. Say you were asking the reader what they liked most about your site. The name of this group of questions would be ’likemost’ and there would be three choices, all radio buttons, all with name=”likemost” in them, to show that they’re all part of the same question. Then the three values could be ’layout’, ’content’ and ’graphics’. When you receive the results, you’ll get something like
likemost=layout
depending on which button was checked. Get it? I should tell you now that you can add the value attribute to the single-line text box above to add in some text before the user even starts typing.

Check Boxes

Groups of check boxes are similar to radio buttons except they are not grouped, so multiple boxes can be selected at the same time. They are small squares that are marked with a tick when selected. Here’s a few to play with:

1. 2. 3.
The code for these boxes is the same as for the radio buttons, with just the value of the type attribute changed:

<input type=”checkbox” name=”checkbox1″>

Notice that there is no value attribute for checkboxes, as they will either be checked or left blank. If you want a checkbox to be checked before the user gets to modify it, add the boolean checked attribute:

<input type=”checkbox” name=”newsletter” checked=”checked”>

Looks a little silly with the attribute’s value being the same as the attribute itself, but that’s the way it’s done. This checked attribute can also be used on a radio button to set one of the radios as selected by default.

Drop-down Select Boxes

These are a cool way to get a user to select an option. They perform the same thing as radio buttons, it’s just the way they look that’s different. Most of the options available are not in view until the user gets intimate with the box and clicks on it. The rest of the options will then pop-up below the box.
This box would be used to find out what continent you come from, like I care. The lengthy code is:

<select name=”continent” size=”1″>
<option value=”europe”>europe</option>
<option value=”namerica”>n. america</option>
<option value=”samerica”>s. america</option>
<option value=”asia”>asia</option>
<option value=”africa”>africa</option>
<option value=”oz”>the other one</option>
</select>

select boxes are like textareas — they have their own tag, but these elements hold further tags inside them too. Each choice you give your reader is denoted by an option. The name/value system remains from the tags above. The size attribute sets how many lines of options are displayed. Setting this to anything over 1 (the default) is really defeating the purpose of having the options hidden away.

You can use these boxes as a link-chooser too, with the help of a bit of JavaScript. The code for that is on the drop-down link box page.

Send and Reset Buttons

Now that you’ve gotten the reader to fill in all the information you want, you need a finishing button to click on to send it all to your email address (or wherever you’ve said at the start). You can also clear all the info in the form out with the reset button. They’re both real easy to make, and look like this:
The simple tags for these two are:

<input type=”submit” value=”Submit”>
<input type=”reset”>

The value attribute in this case sets the text that’s displayed on the front of the button. When you click submit all the form information is sent to your target and the page (or following page) is loaded. Done.

Now, make sure your forms are accessible, and pretty.

How the HTPP Protocol works

How the Web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.
This theory is not essential to writing web code in the short term, but before long you’ll really start to benefit from understanding what’s happening in the background.

Clients and servers

Computers connected to the Web are called clients and servers. A simplified diagram of how they interact might look like this:

Clients are the typical Web user’s Internet-connected devices (for example, your computer connected to your Wifi, or your phone connected to your mobile network) and Web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user’s web browser.
The other parts of the toolbox
The client and server we’ve described above don’t tell the whole story. There are many other parts involved, and we’ll describe them below.

For now, let’s imagine that the Web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.

In addition to the client and the server, we also need to say hello to:

Your Internet connection: Allows you to send and receive data on the Web. It’s basically like the street between your house and the shop.
TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the Web. This is like the transport mechanisms that let you to place an order, go to the shop, and buy your goods. You could walk there and buy the goods you want, but in this case let’s imagine you phone the shop, pay for the goods over the phone, and arrange for them to be delivered.
DNS: Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS before retrieving the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address and phone number of the shop so you can contact them.
HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods and speak to the person delivering your goods.
Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you’ll meet other technologies a bit later.
Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.
So what happens, exactly?
When you type a web address into your browser (for our analogy that’s like ordering a product from the shop):

The browser goes to the DNS server and finds the real address of the server that the website lives on (you find the contact details of the shop).
The browser sends an HTTP request message to the server asking it to send a copy of the website to the client (you phone up the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
Provided the server approves the client’s request, the server sends the client a “200 OK” message, which means “Of course you can look at that website! Here it is”, and then starts sending the website’s files to the browser as a series of small chunks called data packets (the shop sends you your goods).
The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new stuff, awesome!).
DNS explained
Real web addresses aren’t the nice, memorable strings you type into your address bar to find your favorite websites. They are strings of numbers, like this: 63.245.217.105.

This is called an IP address, and it represents a unique location on the Web. However, it’s not very easy to remember, is it? That’s why Domain Name Servers were invented. These are special servers that match up a web address you type into your browser (like “mozilla.org”) to the website’s real (IP) address.

Websites can be reached directly via their IP addresses. Try going to the Mozilla website by typing 63.245.217.105 into the address bar on a new browser tab.

Packets?
Earlier on we used the term “packets” to describe the format in which the data is sent from server to client. What do we mean here? Basically, when data is sent across the Web, it is sent as thousands of small chunks, so that many different web users can download the same website at the same time. If web sites were sent as single big chunks, only one user could download one at a time, which obviously would make the Web very inefficient and not much fun to use.

Publishing a basic web site

Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article lays out how to get your simple sample code online with little effort.

What are the options?

Publishing a website isn’t a simple topic, mainly because there are so many different ways to do it. In this article we don’t aim to document all possible methods. Rather, we’ll discuss the pros and cons of three broad strategies from a beginner’s point of view, and then walk you through one method that will work for now.

Getting hosting and a domain name

If you want total control over your published website, then you’ll probably need to spend money to buy:

  • Hosting — rented file space on a hosting company’s web server. You put your website files on this space, and the web server serves the content to web users who request it.
  • A domain name — the unique address where people can find your website, like http://www.mozilla.org, orhttp://www.bbc.co.uk. You rent your domain name for so many years from a domain registrar.

Many professional websites go online this way.

In addition, you will need an File Transfer Protocol (FTP) program (see How much does it cost: software for more details) to actually transfer the website files over to the server. FTP programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server’s files in two windows, so you can transfer them back and forth:

Tips for finding hosting and domains

  • We don’t promote specific commercial hosting companies here. To find hosting companies and domain name registrars, just search for “web hosting” and “domain names”. to find a company selling domain name registrations. All such companies will have a feature to allow you to search for the domain name you want.
  • Your home or office Internet service provider may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments — contact them and ask!
  • There are a few free services available like Neocities, Blogspot, and WordPress. Again, you get what you pay for, but they are ideal for your initial experiments. Free services mostly don’t require FTP software for uploads either — you can just drag and drop right inside their web interface.
  • Sometimes companies provide both hosting and domains in one package.

Using an online tool like Github or Dropbox

Some tools let you publish your website online:

  • Github is a “social coding” site. It allows you to upload code repositories for storage in the Git version control system. You can then colloborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your Github code, use it, learn from it, and improve on it. You can do that with other people’s code too! This is a very important and useful community to get involved in, and Git/Github is a very popular version control system — most tech companies now use it in their workflow. Github has a very useful feature called Github pages, which allows you to expose website code live on the Web.
  • Dropbox is a file storage system that allows you to save your files on the Web and have them available from any computer. Anybody with an Internet connection can access any Dropbox folder that you make publicly accessible. If that folder contains website files, it will be served as a website automatically. See Host websites With Dropbox for more information.

Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.

Using a web-based IDE such as Thimble

There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript and then display the result of that code when rendered as a website — all in one browser tab! Generally speaking these tools are quite easy, great for learning, and free (for basic features), and they host your rendered page at a unique web address. However, the basic features are pretty limited, and the apps usually don’t provide hosting space for assets (like images).

Try playing with some of these examples, and see which one you like the best:

  • JSFiddle
  • Thimble
  • JSBin

Publishing via Github

Now let’s take you through how to publish your site via Github pages. We aren’t saying this is the only way or even best way to publish your site, but it is free, fairly simple, and touches upon some new skills that you’ll find useful going forward.

Basic setup

  1. First of all, install Git on your machine. This is the underlying version control system software that Github works on top of.
  2. Next, sign up for a Github account. It’s simple and easy.
  3. Once you’ve signed up, log in to Github.com with your username and password.
  4. Next, you need to create a new repo for your files to go in. Click Plus (+) in the top right of the Github homepage, then chooseNew Repository.
  5. On this page, in the Repository name box, enter username.github.io, where username is your username. So for example, our friend bobsmith would enter bobsmith.github.io.
  6. Click Create repository; this should bring you to the following page:

Uploading your files to Github

This is where we will have a go at using the command line to put our repository on Github. A command line is a window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface. It will look something like this:

Note: You could also consider using a Git graphical user interface to do the same work, if you feel uncomfortable with the command line.

Every operating system comes with a command line tool:

  • Windows: Command Prompt can be accessed by pressing the Windows key, typing Command Prompt, and choosing it from the list that appears. Note that Windows has its own command conventions differing from Linux and Mac OS X, so the commands below may vary on your machine.
  • Mac OS X: Terminal can be found in Applications > Utilities.
  • Linux: Usually you can pull up a terminal with Ctrl + Alt + T. If that doesn’t work, look for Terminal in an app bar or menu.

This may seem a bit scary at first, but don’t worry — you’ll soon get the hang of the basics. You tell the computer to do something in the terminal by typing in a command and hitting Enter.

  1. Point the command line to your test-site directory (or whatever you called the directory containing your website). For this, use the cd command (i.e. “change directory”). Here’s what you’d type if you’ve put your website in a directory called test-site on your desktop:
    cd Desktop/test-site
  2. When the command line is pointing inside your website directory, type the following command, which tells the git tool turn the directory into a git repository:
    git init
  3. Next, go back to the Github site. On the current page, you are interested in the section …or push an existing repository from the command line. You should see two lines of code listed in this section. Copy the whole of the first line, paste it into the command line, and press Enter. The command should look something like this:
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
  4. Next, type the following two commands, pressing Enter after each one. These prepare the code for uploading to Github, and ask Git to manage these files.
    git add --all
    git commit -m 'adding my files to my repository'
  5. Finally, push the code up to Github by going to the Github web page you’re on and entering into the terminal the second of the two commands we saw in step 3:
    git push -u origin master
  6. Now when you go to your Github pages’ web address in a new browser tab (username.github.io), you should see your site online! Email it to your friends and show off your mastery.

Note: If you get stuck, the Github Pages homepage is also really helpful.

Further Github knowledge

If you want to make more changes to your test site and upload those to Github, you simply need to make the change to your files just like you did before. Then, you need to enter the following commands (pressing Enter after each one) to push those changes to Github:

git add --all
git commit -m 'another commit'
git push
 You can replace another commit with a more suitable message to describe what change you just made. We have barely scratched the surface of Git. To learn more, start off with the Github Help site.

Conclusion

By this point, you should have your sample website available at a unique web address. Well done!