So we've talked about form controls, validation, and processing, but no discussion of forms will be complete without looking at the form tag itself. The form tag is the official container for all form elements. All form fields like input text area and select go inside a form tag. The form tag has a few parameters that are super important to how it's processed and validated. First, the action parameter tells the browser the location of the form processor. This is the file that's going to take our data and process the form. The name and value fields gather from each of the form controls will be sent to this location. Another parameter, the enctype, tells the browser how the data in the form should be encoded.
And you have three options, the default which is what happens if you don't include the field is, application x www form urlencoded, which frankly sounds way too complicated. It just means that the browser will convert the data into a series of name and value pairs, and modify the data so that special characters like spaces and non alphanumeric characters have to be converted to make it easier for the browser to send the form. Thankfully since it's a default you don't have to include it.
The multi-part form data enctype is used for sending forms when the users need to upload a file. The data is actually sent in several steps. And done in a more complex format called MIME. Because of the length and complexity of the format, forms that upload a file should be sent with the post method. There is another enctype that is not as popular, but I mention it here because you might run into it. It's called text slash plain. It's for sending the form without using a processing script through the computer's email application.
Although this seems like an easier option, it just sends the form fields inside an email message, and it's not really a good way to process or validate data. The last attribute is method, and it controls how the data gets sent to the processor. There are two methods, get and post. So, let's talk about those. The get method will send the data through a URL. So, to illustrate that let's take a look at what's probably the most famous form on the web. The Google search form. I'll type in a keyword here, flowers. And we'll hit the Enter button.
If you take a look at my URL bar, you can see that this got sent to a form processor. And it's passing along a bunch of information separated by ampersands. If you look right here at the q variable, you can see that it has the value of my search query. So, the query's actually being passed through a URL. This is cool because we can bookmark this URL, or copy and paste it to send someone else to the same search results page. Let's go back into our form here. If I were to submit this form with my name and title, the URL sent to the form processor would include the name, which base is converted into plus signs. And the different variables will be separated by an ampersand and any non-alphanumeric values to a percentage sign followed by two hexadecimal digits. The get method is the default, so if you don't include it, it assumes you want to send the form with a get method.
The post method sends the data to the server in the background. Some servers limit the length of the arguments passed to an application through a URL. So the post method is better for sending longer forms, and it's necessary when you're sending files. Post is considered a more secure method than get, because with get the parameters are transmitted directly through a URL which can be sniffed by malicious scripts. It's up to your form processor to accept results in either get, post or both.
So getting used to the attributes and the form tag gives you a lot of options that control where the data from the form is sent. How it is encoded, and the method by which it's sent.
- Understanding forms
- Adding required fields and placeholders
- Accepting multiple entries
- Limiting uploads
- Handling focus changes
- Validating with regular expressions
- Working with older browsers
- Building jQuery validation
- Using server-side validation
- Sanitizing form input
- Uploading files
- Sending form data to a database