Step 14 – Forms

Last update: February 16 2019

In step 13, you’ve learned to create a link to e-mail someone. This link will open whichever e-mail software your visitor uses. However, you can also send an e-mail using an online e-mail form. The perk is, is that you can ask for specific information that you may need from someone.

Additional to creating e-mail forms, you can use the <FORM>-tag for all sorts of purposes (just think about polls, comments on your website. They are even used to create online games).

Whichever way you are going to put them to use, forms always consist of two parts:

  1. The part where you request input / action to be taken
  2. The part where the information is getting processed.

Part one usually uses form fields, and they are created in HTML. However, HTML can’t handle the second part. Processing information means that you want to send the info somewhere. You’ll need a scripting language, like PHP, for this.

So, we’ll concentrate on the first part and we’ll just add a “mailto:”-action to our form. But this means the default e-mail software gets opened when someone clicks the submit button. The information could get lost because of this, leaving your visitor to retype it all.

Creating A Contact Form

Nevertheless, a form in pure HTML is done like this. Let’s start a brand new HTML file called form.html.

<html>
<head>
<title>my first e-mail form</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>Send an e-mail</h2></center>
<form action="mailto:info@noratol.nl" mehtod="post" enctype="text/plain">
<p>My name is: <br />
<input type="text" name="name" size="30" /></p>
<p>I am:<br />
<input type="checkbox" name="sex" value="man" /> a man<br />
<input type="checkbox" name="sex" value="woman" /> a woman<br />
<input type="checkbox" name="sex" value="gender neutral" /> gender neutral</p>
<p>My e-mail address is:<br />
<input type="text" name="email" size="30" /></p>
<p>I think this site is:<br />
<select name="rating">
<option value="great">great</option>
<option value="alright">alright</option>
<option value= "terrible">terrible</option>
</select></p>
<p>My reaction:<br />
<textarea cols="10" rows="10" name="reaction" wrap=virtual>
</textarea></p>
<p>
<input type="submit" value=" send " />
<input type="reset" value=" reset " />
</p></form>
</font>
</body>
</html>

Step 14b – Starting A Form In HTML

In the form above, I’ve tried to show you many field types that you can use: small text fields, big text fields, a drop down menu, check boxes and buttons. Before you can use any of those, you open the form using the FORM-tag. Anything you code between <FORM> and </FORM> is seen as part of the form.

Action

The attribites ACTION and METHOD are needed to tell the browser what to do when the form is submitted. Let me explain what they do:

<form action="mailto:info@noratol.nl">

ACTION tells the browser where to go with the information, once someone clicks to submit. Usually, you’ll tell the browser to go to a location (URL). This would be the script handling sending the information somewhere or using in the back-end on the server.

In the HTML version you use the “mailto:”-term that was introduced in Step 13 and place it with ACTION. This tells the browser that the information needs to be e-mailed.

Method

<form action="mailto:info@noratol.nl" method="post">

METHOD defines how the information is supposed to be processed. You can choose between POST or GET. Which one you need depends on how the information is received by the script that sends out the e-mail message. GET sends all the information as one long URL to the script. POST keeps the information in the HTTP-headers, so it doesn’t become visible in a URL.

When you use a PHP, ASP or CGI to send e-mail, your FORM will look something like this:
<form action="FormMail.php" method="post">
<form action="FormMail.asp" method="post">
or
<form action="FormMail.pl" method="post">

Enctype

You can define which type of information the form has to handle. The attribute ENCTYPE will allow you to be as specific as you want. It stands for encrypt type.

Text only:
<form action="mailto:info@noratol.nl" method="post" enctype="text/plain">

Various types of content, including the upload files:

This is the one to use if you also want to allow someone to send an attachment, likt for instance in a job application forms. The applicant could include their resume.

<form action="mailto:info@noratol.nl" method="post" enctype="multipart/form-data">

Allowing everything:

When you don’t set any ENCTYPE at all, then this is the default setting

<form action="mailto:info@noratol.nl" method="post"
enctype="application/x-www-form-urlencoded">

Form name

When you combine HTML with other languages like JavaScript and CSS, you might be happy to refer to your form by a unique name. Just add the NAME-attribute and life becomes so easy! This is how you do it:

<form name="testform" action="mailto:info@noratol.nl" method="post">

Step 14c – Regular Text Field

A small text field is made like this:

<input type="text" name="name" size="30" />

and

<input type="text" name="email" size="30" />

Using the INPUT-tag means you asking the visitor to provide an action (in this case, obviously, we need them to provide input).

Type

But you also need to define which TYPE of input you need. This determines what the form field will look like. By setting it to “text”, the browser shows a field in which visitors can type. It will only support a single line of text though.

Name

It’s vital to provide a NAME for a text field, actually for any field in your form. The value you place between the quotes, will show in the e-mail as a reference. It will help you understand what information you are receiving. Choose your names carefully.

Size

You can set the width of the field with the SIZE-attribute. The height of a regular text field cannot be set with HTML, but you can with CSS. If you need to allow more texts lines, use TEXTAREA (Step 14e)

Step 14d – Checkboxes And Radio Buttons

To create a square shaped checkbox, you use the following code:

<input type="checkbox" name="sex" value="man" /> a man<br />
<input type="checkbox" name="sex" value="woman" /> a woman<br />
<input type="checkbox" name="sex" value="gender neutral" /> gender neutral

Again, you use the INPUT-tag, but this time, you provide multiple choices to check. To achieve this, set the TYPE-attribute to “checkbox”. The text you place with NAME will again show in the e-mail. This time you’re presetting the VALUE of the checked box, because you’re not allowing anyone to type anything. All they have to do, is check.

All of the above check box belong to one question, because they all share the same NAME. Within one form, you can create multiple questions, each with their own check boxes. All you need to do to create a new set of check boxes is use another name.

It’s important to understand, that the checkbox type allows people to check more than one option. In some cases, you just want people to be more decisive. To limit their checking options, you can use RADIO buttons instead. These are round and only 1 can be checked.

<input type="radio" name="sex" value="man" /> a man<br />
<input type="radio" name="sex" value="woman" /> a woman<br />
<input type="radio" name="sex" value="gender neutral" /> gender neutral

Step 14e – Drop Down Menu

Another way to have someone select one option only, is to use a drop down menu. The SELECT-tag needs to be opened and closed. In your opening tag, you add a NAME clear to you to recognize which answer you are getting. Anything you place in between your SELECT-tags is considered part of your selection list.

All of the options people can choose from are defined using the <OPTION>-tag. You can add as many of those as you want. Just be sure to assign a unique value to them. In the e-mail you receive, you’ll only see the selected option.

<select name="rating">
<option value="great">great</option>
<option value="alright">alright</option>
<option value= "terrible">terrible</option>
</select>

Step 14f – Textarea:
Because a textfield offers little space you can also use the TEXTAREA-tag.

<TEXTAREA COLS=10 ROWS=10 NAME=”reaction” WRAP=VIRTUAL>
</TEXTAREA>

With this tag you tell the browser how many columns (COLS) and ROWS the textarea should have. Using WRAP is optional. Here you can choose whether the lines should be broken when they reach the end of the textarea. If you wouldn’t use this option the text will be shown in the browser as one long line. Using WRAP makes it easy to view and review for the visitor

Step 14g – buttons:
In online forms you can use buttons. One required button to a form is the submit button:

<INPUT TYPE=”submit” VALUE=” send “>

Whatever you write with VALUE will be the text showing on the button. This also sets the width of the button.

You can also provide an extra service to your visitor by adding a reset button to your form. This clears all the fields when clicked upon:

<INPUT TYPE=”reset” VALUE=” reset “>

In combination with languages such as JavaScript, you can use HTML buttons for different use. The code for this is:

<INPUT TYPE=”button” VALUE=” yes ” NAME=”yes”>
<INPUT TYPE=”button” VALUE=” no ” NAME=”no”>

By setting TYPE to “button” the options printed with VALUE are shows as buttons. These type of buttons will only work in combination with JavaScript codes. What’s been filled out with NAME usually corresponds with codes used in JavaScript.

Step 14h – image buttons:
By default you will always get grey buttons when you use “submit” or “reset”. To make it more lively you can make your submit button an image button:

<INPUT TYPE=”image” SRC=”send.jpg” NAME=”Send” VALUE=”Send”>

Setting TYPE to “image” tells the browser to look for an image. The location can be found with SRC. With NAME you write what’s supposed to happen when people click the image. In this case “Send” is enough. With VALUE you usually tell what text is supposed to show, but in this case the text will only show when the picture doensn’t work. Much like ALT from the IMG-tag (see step 12)

Stap 14i – send file in a form:
Finally, I want to provide you with additional information about form fields you can create to send files in a form. If you want to use this, you have to set the ENCTYPE of the form to “multipart/form-data”. Also, sending attachments has to be supported by the script you use that sends the mail. You need something like CGI, PHP and ASP to make this possible. HTML alone is not capable of doing this.

To create a field to send files, you can use the following code:
<INPUT TYPE=”file” NAME=”myfile”>
This code generates a form field and a “Browse” button. When the visitor clicks on this button they can browse on their own computer for the file they’d like to send.
With the attribute NAME you can set the name of the field.

Move on to Step 15

Bookmark the permalink.

Comments are closed.