Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
In order to understand how validation works, we must understand the different types of fields, and how the names and values associated with them get passed over to a form processor. By far, the most common type of field in HTML forms is the input field. Most of the communications and forms happen with input fields, because they can take on a variety of shapes. An input field by default, shows up as a text field, where you can type in values to be submitted to the form processor. It's not necessary, but you can add a type equals text attribute to the field. However, even without it, it will display by default, as a text field. Any form field should have a name associated with it. When you submit the field, that name will be sent along to the form processor with whatever is typed into the input field.
Input fields can also have a value parameter. If you include this parameter, the value will be sent along with the field by default. In text typed fields, this means that the text will be prepopulated in the field. The value parameter is more useful for non text fields. You can add a label to any form field you want. The label is a way of associating some text, to an input field. One of the advantages of doing this, is that clicking on the label will also activate the form field. This could be really good for usability, since people on mobile devices will find it easier to tap on the label to activate the field. There's two ways of creating labels.
You can wrap the input field with a label tag, or you can use a for attribute on the label to link it to the input's field ID. So, in this case, this label right here is associated with this input field because of the ID and the for attribute. The text field is just one of the many varieties of input fields. So, let's take a look at some other ones. You've probably used an input field of type password; converts what you type into bullets. That way, others can't see what you're typing. Now, just like with text fields, any other field, if you want to, can have a label, a name, and a value. They work in the same way as the type equals text input field. You can also have input type equals file fields.
These are the traditional way of asking the user to upload a file. You will need to make sure that your form tag has the enctype attribute set to multipart form data. You'll also need to create a way for the file to be saved onto your server or for it to be included into a database. You can also create check boxes or radio buttons. Check boxes let you ask questions where the user can check one or more options. So this is great for asking questions that can have one or more answers. The form processor will receive a variable with each name value pair and each input field. If you include a checked attribute, one of the input fields can be prechecked. This works with check-boxes and input type radio buttons. Radio buttons are very much like check-boxes but they are meant for questions where the answer should be exclusive.
So this is great for asking a question like rate this from 1-10. Notice that if I click on one of these input fields and then click on the other one it deselects the original one. You achieve this by making sure each input field has the same name but different values. There is a type of field that is invisible and it's the input type equals hidden field. Its a great way to send data to your servers that the users can't see. Say for example that somebody orders a product from your page and you want to pass along a part number. You don't need the user to know what that is.
Simply create this field with a name and a value, and when the form is submitted the name and value will be passed to the processor just like with any other input field. There is a number of fields that let you create clickable buttons. The most famous is the input type submit field. When the button is clicked it sends a form to the processor. You can add a value field and that becomes the label of the field. So instead of submit, it now says click me. Just like with any other input field, you can also add a name and the name and value will get passed to the processor. You've probably also seen the input type equals reset field. When you click it, it will clear out what the user has typed in the current form. Now, there's another way to create buttons and this is not an input field. It's a special tag called the button tag.
It looks very much like the input type submit and input type reset but, it's a set of open and closed HTML tags. The label of that button is whatever is in between those tags. Now, there's even a button field that can look like a photo and it's called the input type image field. When you click on the image, the form will be submitted. You should include both a source attribute to specify the location of the image, as well as an out attribute field. So, you can't do everything with just input fields. the text area field allows you type longer pieces of text. The text that you type inside this field will be sent along with the name of the field through the form processor.
This field, like the button field, has a beginning and an ending part of the tag. If you place something in between these two tags, it prefills the text area field. In addition to the text area field, there's a set of tasks for creating a drop down menu of options. Use the select tag and place an option tag inside it. Notice that the name goes in the select tag. But the values go inside each option field. What's going to be sent to the form processor is not what you place in the labels. But instead, whatever you include in the option tags value attribute.
So when you submit this form, if you select the item number 2, the form processor will receive a variable called My Options with the value, B. If you include a selected attribute in an option field, that field will automatically be selected when the form loads. There's another version of the select field. It has an added attribute of multiple. That allows you to select more than one item at a time. You hold down the Cmd key on the Mac or the Ctrl key on the PC to do this. And this way, it's sort of like the check box input field. When the data gets sent to the processor, it sends the name, along with a comma separated list of selected options.
This one's a little trickier to process than others. HTML5 adds a number of special input fields. This is a growing list but some of the fields are pretty cool. For example you can use an input type equals date to get a popup calender. Input type color let's you choose a color from a color picker. Input type range lets you choose with a slider. The thing to remember about HTML5 fields is that browser support is not uniform. So although these fields look great on this browser which is Chrome, it might not look as well on Internet Explorer or some other browsers.
HTML5 also has a number of attributes to input elements like autocomplete, placeholder, required, pattern and others. Support for these attributes are spotty on older browsers. We'll talk more about these in the chapter on HTML5 validation. You may also want to check out the course HTML5: Web Forms in Depth with Joe Marini. HTML5 has a number of fields you can use to create form elements. It's important to get used to how the different fields work, and what happens when the forms are submitted.