Understanding Forms Part 1--The form tag and form attributes in HTML

The <form> element

To create form, first, you obviously need a <form> tag. The tag really needs a few attributes in order for it to make sense. A form usually communicates with a server side script that does something with the information the form provides, so the first field you should familiarize yourself with is the action field.

The action attribute

The action attribute tells the form where to send the information when it is submitted. Normally, this is a URL to a php script where the form is processed.

<form action="http://mysite.com/processme.php">
</form>

If you’re just testing out the form, you can type is a pound sign # or use mailto:youraddress@yoursite.com as the address. When you submit the form, the computer you’re filling the form in will create an email with whatever your default email client is and paste the contents of the form into the email. In order for that to work, we need to talk about the method attribute.

The method attribute

In order to send the form, we have to tell the browser how to send the information along to the form processor. This is specified via the method attribute and there are two options…GET or POST. The GET method is common for shorter forms where the information you’re passing along is safe for other to see. Google, for example uses the GET method for it’s searches.

Google uses the GET method for it's searches

Using a GET method

There are a few items to think about when using forms with the GET method:

  • The information can be read by others because it is sent via the URL
  • The information is sent via a URL, which can be bookmarked
  • Information can also be shared by copying the link from the URL
  • Some browsers impose a limit to how much information can be sent via a URL, so it should be used for shorter Forms

Using a POST method

  • Sends information in a way that is hidden to the user so it’s a bit safer
  • Can handle super long forms with a lot of information
  • When using a mailto: address, you need to use POST as the method

The enctype attribute

This attribute is used to change how the data that people enter in the forms is passed onto the form processor. If you’ve done HTML coding for a while, you’re probably familiar that some characters should be encoded before you use them on pages. The most common one is the ampersand (&) is written as &amp;. In the same way, before forms send information along, spaces are converted to + signs and symbols are converted to ASCII HEX (similar to what you do with the ampersand). Sometimes you don’t want this to happen.

Let’s take a look at this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Form Sample</title>
</head>
<body>
    <form action="mailto:yourmail@yoursite.com" method="POST">
        <input name="myname" />
        <input type="submit" />
    </form>
</body>
</html>

Form with funny characters that will be encoded

Change the email address to one you can use, fill out the form and type in some strange characters like @#$ into the form. When you submit this form, your email client will display something like this:

The default encoding will cause special characters to be encoded in hex notation

Using text/plain for encoding

If you don’t want this to happen when simply emailing your forms, by using mailto: then you need to specify a text/plain enctype like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Form Sample</title>
</head>
<body>
    <form action="mailto:yourmail@yoursite.com" method="POST" enctype="text/plain">
        <input name="myname" />
        <input type="submit" />
    </form>
</body>
</html>

Using multipart/form-data for encoding

If you’re uploading files or images over the web, they will be converted into text when they are sent by the forms, but changing the text in any manner would change the file so this is one instance when we DON’T want the data to be converted.

In that case, you’ll need to use enctype with the value multipart/form-data. That way, no characters will be encoded, the form will be sent as is.

blog comments powered by Disqus