Step 14 – Forms

Last update: March 3 2019

In step 13, you’ve learned to create an e-mail link. However, why not send an e-mail using an online e-mail form? Very user friendly, and you get the perk to request specific information you need from someone.

In this step, you get to learn:

FORM-element

Besides using it for a contact form, the <FORM>-tag lends itself for all sorts of purposes (polls, comments, online games), so it’s vital to get a strong understanding of it, when you want to develop websites.

In whichever way you are going to put this to use, you have to know that forms always consist of two parts:

  1. Request input / action to be taken
  2. Process input / action

Processing Needs Scripting

For part one, you use form fields. They are created in HTML. However, HTML can’t handle the second part. Processing information means that the information needs to get send 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. However, 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.

Step 14a – Creating A Contact Form

Nevertheless, a form in HTML only looks something like this. Let’s start a brand new HTML file called form.html.

<html>
<head>
<title>my first e-mail form</title>
</head>
<body>
<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>
</body>
</html>

Step 14b – HTML forms explained

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

Action

The attributes ACTION and METHOD 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 submits the form. Usually, you’ll tell the browser to go to a location (URL). This would be the script handling sending the information somewhere, or using it in the back-end on the server.

In the HTML version, you use the “mailto:”-term that was introduced in Step 13. This tells the browser that the information needs to be e-mailed. Make sure to include an e-mail address as well.

Method

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

METHOD defines how the information has to be processed. You choose between POST or GET. Which one you need depends on how the information should be received by the script sending 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 nor to your visitor.

When you use a PHP, ASP or CGI to send e-mail, your FORM opening 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 allows you to be as specific as you want. It stands for encrypt type.

In HTML5, this is replaced by FORMENCTYPE.

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

Various types of data, including uploading files:

This is the one to use if you need various input types, including the one that allows an attachment, like a CV upload in a job application form.

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

Allowing everything:

When you don’t set any ENCTYPE at all,  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’ll probably refer to your form by using a unique name for it. So, 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’re asking the visitor to provide an action. In this case, we need them to provide input.

Type

The kind of input you want is defined in the TYPE-attribute. This also determines the look of our form field. By setting it to “text”, the browser shows a field in which visitors can type. It will only support a single line of text.

Name

It’s vital to provide a NAME-attribute for a text field. Actually, for any field in your form. The value you place between the quotes, shows in the e-mail as a reference. It helps you understand, which information you’re receiving. So, choose your names carefully.

Size

You set the width of the field with the optional SIZE-attribute. The height of a regular text field cannot be set with HTML, but you can do that, using CSS. If you need to allow more text 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

The TYPE-attribute is set to “checkbox”. The values you provide in the NAME-attribute show in the e-mail you’ll receive. While the NAME refers to the question you asked in your form, the VALUE of the checkbox provides you with the answer. Suppose, someone checked man, then this is what you’ll receive in your e-mail: sex: man (thus NAME: VALUE).
Only the values of the boxes checked, will be send to you in the e-mail you’ll receive.

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

It’s important to understand the difference between a checkbox and a radio button. The TYPE “checkbox” allows people to check more than one option. However, in some cases, you need people to be more decisive. To limit their checking options, you use RADIO buttons instead. These are round and only 1 can be checked. All the same instructions apply, as mentioned in the checkboxes step.

<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 let someone select one option only, is to use a drop down menu.

The SELECT-tag needs to be opened and closed. Add a NAME-attribute in your opening tag, as reference to your question. Anything you place between your SELECT-tags, is considered part of the selection list.

In order to create the list of options people can choose from, you use the <OPTION>-tag. You’re free to add as many as you want. Just be sure to assign a unique value to them. In the e-mail you receive, you’ll only see the VALUE of 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

To provide people the space to type a proper message, you use the TEXTFIELD-tag. This allows people to use multiple rows, using their enter-key for a new line. Your value with the NAME-attribute will show in the e-mail you’ll receive.

<textarea cols="10" rows="10" name="reaction" wrap="virtual">
</textarea>

Cols and Rows

With the addition of the optional attributes COLS and ROWS, you set how many columns (COLS) and lines (ROWS) the textarea should have. This only determines the size of the box showing on the website. It doesn’t limit people from how much text they can type into the textarea.

Maxlength

If you want to limit the amount of characters someone’s allowed to type, you can use the optional MAXLENGTH-attribute:

<textarea cols="10" rows="10" name="reaction" wrap="virtual" maxlength="255">
</textarea>

The above setting limits the user to type up to 255 characters.

Wrap

Using WRAP is also optional, but so very helpful and user friendly. A VIRTUAL wrap breaks the sentences, when they reach the right edge of the textarea. Just like you know from using a text editor. If you wouldn’t use this attribute, the text written will show on one long line within the textarea. Very irritating.

Readonly and Disabled

Other attributes, you can use, are READONLY and DISABLED. I think their use is pretty clear.

<textarea name="reaction" disabled></textarea>

<textarea name="reaction" readonly></textarea>

Step 14g – buttons

What is an online form without buttons? Well… actually, not all forms use buttons anymore, but all forms need something to trigger an action. Whether that is an enter, link, image or a button. Let me introduce you to the SUBMIT-button:

<input type="submit" value="send" />

The above button submits the form. This means the information, from the form, gets send to the location you’ve defined in the ACTION-attribute, when you opened your FORM (see the beginning of this step).

Whichever text written within the VALUE-attribute shows as text on the button. The width of the button, automatically, adjusts itself to the text you’ve added. If you want a different size, you add a SIZE-attribute: <input type=”submit” value=”send” size=”60″ />. However, it’s better to use CSS for this.

There’s also an option to add RESET-button to your form. This clears all the fields upon click:

<input type="reset" value="reset" />

When using buttons for scripting

In combination with scripting languages, such as JavaScript or PHP, you set the TYPE to button. You still need a Javascript to get tell HTML what to do with the input. However, it’ll look something like this:

<input type="button" name="vote" value="yes" onclick="calltoJavascript();" />
<input type="button" name="vote" value="no" onclick="calltoJavascript();" />

Step 14h – image buttons

By default, form buttons will always appear grey. You can alter their colors, borders and effects using CSS, but you can also replace them by using an image:

<input type="image" src="send.jpg" alt="send" />

When you set the TYPE-attribute to “image” you also have to define its location by using the SRC-attribute. Just in case the picture doesn’t show, you want some text to show. This is what you use ALT for.

Step 14i – send file in a form

If you want to allow file upload in a form, you set the ENCTYPE of the form to “multipart/form-data” or “application/x-www-form-urlencoded”. Additionally, uploading files has to be supported by the script you use that sends the mail as well as the permissions you have on a server. You need something like CGI, PHP and ASP to make this possible. HTML alone is not capable of doing this.

Once you have all that sorted, you use set the TYPE-attribute to “file”:
<input type="file" name="myfile" />

This code generates a form field and a “Browse” button. When people click on this, they can browse on their own computer for the file they’d like to send.
With the attribute NAME you set the name of the field so you can make sure it gets processed correctly and you’ll be able to receive the file.

Step 14j – Forms And Scripting

So, form fields are often used in combination with various scripting or programming languages. There are a few other TYPES to know about!

Password

To create a input field that doesn’t show information that is provided, you use the password type:

<input type="password" name="password" />

Hidden fields

In standalone HTML, this might sound crazy, but for scripting purposes hidden fields are so great! It allows you to pass information without someone necessarily seeing it. Don’t let it creep you out if you are reading this as just a regular internet user. You can still see these fields in the source of a web page. But from a developer’s viewpoint, this means I can pass your name from one form to another, or one page to another, without having to store it anywhere. So, users wouldn’t need to store a dreaded cookie on their computers. Though, there are pros and cons to both options. Either way, this is just one purpose for these fields. There are tons of options you can use this for.

Anyway, this is how you create a hidden field:

<input type="hidden" name="mysecret" />

You use the VALUE-attribute to store the value you were given before. Suppose, this field is used after our form.html file was sent. In form.html we already asked someone to fill in their name. Using PHP, we can then retrieve it like this:

<input type="hidden" name="naam" value="<?php $_POST['naam']; ?>" />

Move on to Step 15

Bookmark the permalink.

Comments are closed.