HTML Forms

Once you start creating custom HTML websites that include javascript and/or PHP programming, you will find that HTML forms are something that you will use heavily.

A form provides a way for you to ask a website visitor for information. The programming side of it will then process the form information. This topic will be covered in the PHP class in this course, while this lesson focuses on understanding the basics of HTML forms.

To start an HTML form, simply use a FORM opening and closing tag. Everything contained in the form will go between those two tags.

Next we need to specify two attributes for the opening FORM tag: ACTION and METHOD.

The METHOD attribute needs a value of either GET or POST. This specifies how the information in the form will be sent to get processed. GET puts all of the form variables and values in the URL of the address where the request is sent, while POST puts those variables into global variables. Using GET has it's restrictions including limits on overall variable and value lengths, so POST is recommend for most situations unless you have a specific reason to use GET.

The ACTION attribute specifies a website URL to send the form information. If this attribute is omitted, then the current page URL will be automatically used.

An example of the opening and closing FORM tags may look like this:

<form action="http://ryanstevensonplugins.com/" method="post"> </form>

Next, we need to add input elements to the form (between those two tags). There are a number of different form elements that you can use for input, so some of the most commonly used elements are discussed in this lesson.

Before I dive into form field elements, I want to explain some HTML tag attributes that are commonly used among all of these.

Most fields require a NAME attribute. The value specified for this attribute controls the variable name when the form input is processed. The value should not have any spaces, but you can can underscores or hyphens instead. For example, if you have named a field first_name in a form that is using the POST method, then the variable will be received in a PHP processing script as: $_POST['field_name']

A field can optionally have an ID attribute. In many cases, this is set to the same value as the NAME attribute because both should be unique on any given page. The ID attribute is used for javascript and for CSS to identify and manipulate the form field, so if you are not using either of those, then you do not need this attribute.

Most fields have a VALUE attribute that specifies the value of the field that will get sent to the processing script. Most fields that use this attribute will also show this value to the user. For example, in a text input field, this value is the text that is found in the text box.

Hidden Input

When you want to include information in a form but don't want your website visitors to be able to see it, you can store it in a hidden input field. Keep in mind that this information can still be seen by simply viewing the HTML source of the page, so be sure not to include sensitive information there.

To create a hidden input field, use the INPUT tag with a TYPE attribute set to a value of HIDDEN. You will also need to include NAME and VALUE attributes in this tag. Note how this is a self-closing tag, so I have put an extra space and forward slash at the end before the final closing greater than symbol.

An example hidden input field:

 <input type="hidden" name="first_name" value="Ryan” />

Text Input

A text input field is created almost identical to a hidden input field, except the TYPE attribute is set to a value of TEXT instead. This field creates a visible, one-line text box on the page that allows a user to enter text.

If you want to change the length of the text box, simply use the SIZE attribute with a value set as a number. This number represents the length of the text input in characters, although the field typically provides a bit of extra space for those characters.

The example code below creates a text input field that prompts a user for their name:

<input type=”text” name=”first_name” value="" size=”16” />

Textarea Input

If you want a text input field that spans more than one line on the page, you will want to use a TEXTAREA tag. This tag works different from the previous tags I have discussed - it is not selfclosing to allow for a large amount of input or predefined text.

This tag does NOT use a VALUE attribute. Instead, the value goes between the opening and closing TEXTAREA tags!

You can also use the ROWS and COLS attributes to specify the size of the text box.

The example below creates a text input box that is 5 lines tall and 60 characters/columns in width. For this example, I have left the value (between the tags) blank, which leaves the input box blank for the website visitor to write their own information, but this space could also be preloaded with information:

<textarea name="user comments" rows="5" cols="60"></textarea>

Select Input

Another commonly used form field is the select input, which is a drop-down box with predefined options. This is created with a SELECT tag. Like TEXTAREA, this is also NOT a self-closing tag, so you need to use an opening and closing tag.

Between the select tags, you add an OPTION tag for each of the available options you want to show up in the drop-down box for people to select. Technically, the OPTION tag is also NOT a self-closing tag, but you can actually omit the closing tag for this one (but it also works with the closing tag). Personally, I just leave off the closing OPTION tags for this reason.

The NAME attribute goes inside of the SELECT tag. A VALUE attribute is then found inside of each OPTION tag, but this value is not shown on the public website. After each option tag, simply add the text that you want shown to the user for that drop-down item (this text would go between the opening and closing OPTION tags, if you decide to use the closing tags).

You can also add the attribute SELECTED to one of the options to make it the default selected option, although the first option will be selected by default if this attribute is not set. It is also worth noting that this attribute doesn't have a value.

Here is an example drop-down box created with two options, a Yes and a No - the Yes option is selected as the default value:

<select name=”user_answer”>
<option value="Yes” selected>Yes
<option value="No">No
</select>

Submit Button

A submit button in the form gives the website visitor a button to click when they are ready to process the information they have entered into the form.

A submit button uses the INPUT tag, just like hidden and text box inputs, but this tag uses the SUBMIT type. NAME and VALUE attributes are needed for the button. The value of the VALUE attribute will be the text displayed for the button to the website visitor.

This example creates a submit button:

<input type="submit” name="user_save” value="Save” />

Field Labels

One last thing that is good to know about forms is how to use field labels. A label is just text that tells a user what to input for a particular form field. However, if you click on a label, it will automatically set the focus on the corresponding field element.

This is accomplished in an HTML form using the LABEL tag along with the FOR attribute. LABEL needs an opening and closing tag, with the text to be displayed as the label being between the LABEL tags. The FOR attribute in the opening tag needs to have it's value set as the NAME attribute for the HTML element that should receive the focus when this tag is clicked.

Below, I have provided a complete example of an HTML form that also uses labels. This form will simply ask someone for their first name and email address.

<form method="post”>
<label for=”first_name”>First Name</label>
<input type="text” name=”first_name” value=”” size=”16” /><br />
<label for=”email_address”>Email Address</label>
<input type="text” name=”email_address” value=”” size=”32” /><br />
<input type=”submit” name-”user_save” value="Save” />
</form>

 The example above also introduces another HTML tag: BR. This is a line break and is a self-closing tag. Simply use this whenever you want inline content to move to a new line. If you want more space, just add two of these HTML tags next to each other to create two line breaks.