Forms

Help Center HTML Forms

Motivation and Syntax

Unlike the other pages on this curriculum, this page covers content that you might not find useful unless you plan to attend more Web publishing workshops. A form in HTML is a collection of regions the user can use to enter data. This is similar to a paper form, e.g. a paper W-2 from the IRS. The sticky bit is that without an IRS auditor to process and review the W-2, the paper form itself is useless.

We run into a similar situation here. You can create all the inputs you want, but without “destination” for those inputs, your inputs don’t do anything. On this page we talk about how to create the W-2. If you want to create the IRS auditor — the thing that actually does something with the data like validate it, put it in a database, and alert the authorities — then you’ll want to review the Extra Features Phase of web design to see what additional workshops you might consider taking.

Unsurprisingly, the tag that defines a form on the page is <form>. This tag is a block-level tag.

You can think of forms as being like an envelope waiting to be mailed. The envelope has a recipient and a way of getting to that recipient. Inside the envelope is a bunch of information.

Anything inside of the <form> tag is in that envelope. The <form> tag has two necessary attributes:

  1. action indicates the envelope’s recipient to the postal-person, and
  2. method tells the postal person what kind of envelope it is. There are two possibilities here:
    1. get means that the envelope is small and is a request for more information from the recipient. The envelope is very limited in size. This might be like a post-card. Typically this is a request to get information. The post-office tries to be very efficient, so it might actually make photo-copies of the post-card and send those on a different route. The recipient doesn’t mind receiving the same thing multiple times because each request doesn’t change anything for the recipient — it just prompts the recipient to send out the same information again. A typical example of a get form is like a “Search” field.
    2. post means that the envelope has information the recipient is looking to keep and hold on to. Typically this is a request to give information to the recipient. The envelope can be as big as the sender wants and might even contain images and other files. The post-office will still make sure the recipient gets the envelope, but the post office will not make copies of it — you only give information to the recipient once.

The main difference here is something that really doesn’t concern us right now, and the discussion will be resumed in subsequent workshops. For now, let’s just say we’re requesting information from a server (the recipient of our form/envelope). So we’ll use the get method throughout this page.

A basic HTML document with a form looks like:

<html>
	<head><title>Search</title></head>
	<body>
		<form action="./search.php" method="get">
			<h1>Search This Site</h1>
		</form>
	</body>
</html>

The important thing to note here is that regular HTML tags go right inside the <form> tag. The tags we’ve learned until now (like <h1> and <img/>, etc.) won’t be sent in the envelope, they’re just there to let the user know what the form tags we’re going to learn about are for.

This form doesn’t do anything — it looks exactly the same with or without the <form> tag. That’s because we haven’t yet included any field tags. “Field” tags, in general, are HTML tags that allow the user to enter data. They range from single-line text inputs to multiple-select option regions. We’ll cover most of the field tags on this page.

(The field tags are all considered element tags although some of them don’t have the same element tag syntax as we learned.)

Let’s return to the example of the W-2 tax form. Imagine that the form is printed on white paper and that each place where you can write in a piece of information has a different background color. Imagine the form looks kind of like:

W-2

Your Name
Your Earnings $

The tax auditor is looking at roughly seventeen thousand of these, so when he wants to know your name, he doesn’t read the form anxiously awaiting the little line that says Your Name. Rather, he knows what color the box is and can then quickly and accurately find your name.

In a similar fashion, we have to give information to our program that processes our forms about what the data is. Since the <h1> tags and all that aren’t submitted with the form, we have to tell the program that the box next to that <h1> (or whatever) is the user’s name.

For all of our tags below, the name attribute is sort of like the background-color in our analogy. It assigns a unique name to that field that the auditor knows corresponds to that particular bit of information.

(In particular, the name attribute sets the variable by which the information is identified within the program. If you must know now.)

One-Line Text Boxes

These are perhaps the most common of the fields. They provide a single-line text box asking for user input. These fields are simply <input> tags with a type of text:

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

The name is, again, how the recipient of the data is going to be referring to what the user “writes” in. If there were a color with the name username, then this text-box would have it as its background color, per our analogy earlier. By default, the text-box will be 10 characters wide. The user can type more than 10 characters into the box, but only 10 will be visible at a time. Notice also that the <input/> tag has the same syntax as the <img/> tag — it has the syntax of an element tag.

Here is an input tag in action:

<form action="./process.php" method="get">
	Your Name:  <input type="text" name="username" />
</form>

This will be displayed as:

Your Name:

Sometimes it is useful to have some information already in the text box for the user. If you set the value attribute of the <input> tag, its content will appear in the input by default. Here is an example of this:

<form action="./process.php" method="get">
	Your name: <input type="text" name="username" value="he who shall not be named" />
</form>

This will be displayed as:

Your name:

Mutli-Line Text Boxes

Single-line text fields are good for short bits of information, but if you want your users to type in something of more substantial length, then you’re going to want to use what’s called a <textarea>. This is also an element tag, but it doesn’t have the usual element tag syntax. Like the <input/> tag, the <textarea> has a name attribute, but instead of a value attribute, it has contents like a regular HTML tag.

Here is an example of two textareas — one with default content and one without:

<form action="./process.php" method="get">
	Comments: <br /> <textarea name="comments1"></textarea>
	<br /><br />
	<textarea name="comments2">Comments Here</textarea>
</form>

Notice the <br /> tags (element tags that break the line in the paragraph). Since <textarea>s are element tags, if you neglect to include them, then your <textarea>s would all be on the same line as the Comments text.

The above code is displayed as:

Comments:


Comments Here

Note that you can change the height and width of your <textarea>s using CSS (or by setting the rows and cols attributes which we’ll gloss over — CSS is what you should use :).

Radio Buttons

Radio buttons are like multiple-choice questions: the user can only pick one of the presented choices. Radio buttons are <input/>s of type radio:

<input type="radio" name="side" value="light" />

Unlike <input type="text" />s, you can have multiple <input type="radio" />s with the same name attribute. The clincher here is that the browser will only let the user select one radio button of a particular name at a time.

The value attribute is what will be written in for the user in the colored box if s/he selects this radio button. If you set a radio button’s checked attribute to checked, then that radio will be selected by default.

Here is an example of a three-choice radio field:

<form action="./darthvaderator.php" method="get">
	Your Name:  <input type="text" name="username" value="Luke Skytrotter" />
	<br />
	Select a Side: <br />
		Light Side
			<input type="radio" name="side" value="light" />
		<br />
		Dark Side 
			<input type="radio" name="side" value="dark" />
		<br />
		<em>I'm just a child!</em>
			<input type="radio" name="side" value="coward"
				checked="checked" />
	<br />
</form>

This would be displayed as:

Your Name:
Select a Side:
Light Side
Dark Side
I’m just a child!

Checkboxes

Checkboxes are simply <input type="checkbox" />s. Checkboxes are exactly the same as radio buttons but with the caveat that more than one checkbox of a particular name may be selected at any time.

It turns out to be beneficial, especially with languages like PHP, to use names ending with [] (a [ followed by a ]) for checkboxes. (This is because the selected items will be denoted as items in an array.) This means little to us in terms of just HTML, but we’re trying to save as much work as possible for moving forward in the series.

Here is an example of a form with four-choice checkbox field:

<form action="./kitchen.php" method="get" />
	Your Name:
		<input type="text" name="customername" />
	<br />
	Your Order: 
		<br /><input type="checkbox" name="order[]" value="soda" checked="checked" />
			Soda
		<br /><input type="checkbox" name="order[]" value="burger" />
			Burger
		<br /><input type="checkbox" name="order[]" value="fries" />
			Fries
		<br /><input type="checkbox" name="order[]" value="thor" />
			Thor, God of Thunder
</form>

This would be displayed as:

Your Name:
Your Order:
Soda
Burger
Fries
Thor, God of Thunder

Submit and Reset

The next two fields are perhaps more aptly named “Sign, Seal, and Deliver” and “Start Over”. The <input type="submit" /> sends the letter to the recipient while the <input type="reset" /> sets the form back to the way it was before the user touched it. Both produce buttons.

These input types also have the value attribute that sets the text displayed on the button.

Here is a form with submit and reset buttons:

<form action="./mafia.php" method="get">
	Your Credit Card Number:
		<input type="text" name="ccn" />
	<br /><br />
	<input type="submit" value="Do Something Evil!" />
	<input type="submit" value="Reset Form" />
</form>

This would be displayed like:

Your Credit Card Number:

Options

If you have a lot of possibilities for a field, like perhaps a user’s state of residence, then displaying a huge list of radio buttons will be visually detracting. To solve this problem, we have the <select> tag and <option> descendants. The various options appear as items in a drop-down menu. We trade the checked="checked" for selected="selected" when we go from radios to <select>s.

The best way to illustrate this is by comparing the <input type="radio"> way with the <select> way. Both accomplish the same task but in different ways:

<form action="./census.php" method="get">
	Your Name:
		<input type="text" name="citizenname" />
	<br />
	Your State of Residence:
		<br /><input type="radio" name="state" value="wa" />
			Washington
		<br /><input type="radio" name="state" value="or" />
			Oregon
		<br /><input type="radio" name="state" value="other" checked="checked" />
			Other
	<br />
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset Form" />
</form>
<form action="./census.php" method="get">
	Your Name:
		<input type="text" name="citizenname" />
	<br />
	Your State of Residence:
		<select name="state">
			<option value="wa">Washington</option>
			<option value="or">Oregon</option>
			<option value="other" selected="selected">Other</option>
		</select>
	<br />
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset Form" />
</form>

The latter example is displayed as:

Your Name:
Your State of Residence: Washington Oregon Other

There are a few more form tags and options, but most any query can be accomplished using these elements.

Share this page Share