Understanding Forms Part 1--The form tag and form attributes in HTML
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 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:firstname.lastname@example.org 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.
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 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.
There are a few items to think about when using forms with the
- 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
- 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
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
&. 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:email@example.com" method="POST"> <input name="myname" /> <input type="submit" /> </form> </body> </html>
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:
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:firstname.lastname@example.org" method="POST" enctype="text/plain"> <input name="myname" /> <input type="submit" /> </form> </body> </html>
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.