Tutorials

Using forms in HTML 5 (Part 1/2)

Forms are a useful way to collect information from users who visit your webpage. They may be as simple as a search box or e-mail form or as complicated as an application with multiple options for the user to select. Forms can be styled with CSS like any other element on your page and can be used on any page in any area of that page.

Below is an image of a basic form we used on a website as well as the HTML we used to style this form. In this article we'll look at how we coded this form using basic HTML 5 and in the next article we'll look at some other commonform elements as well as other common form attributes and styles.

form1

form2

As you can see, the HTML for our form contains a few important pieces of information:

1. It contains an opening <form action> and closing </form> tag that will contain all elements we use to structure the form.

2. Our form carries the important "action" attribute that's used to indicate which page will receive the information once the form gets submitted. In this case, we used a sample site but you'll probably have a database setup on your own hosting server.

3. We also used a "method" attribute to indicate we wanted to use "get" which means the values submitted by the user get added to the end of the URL in the action attribute and sent to that site.  Another common method is the "post" method which is used to data where a user uploads a file, enters password information or enters data in a long form.

4. Our form also conatins input controls which help to clarify the type of form being used. Our type is "text" which means a user can enter text in the field. We also used a "name" attribute. This is important because when your form gets sent to the server, the name will help you identify which form was sent (a website may contain multiple forms all retrieving different data). We named our form "fullname2" for the time being.

5. The "placeholder" attribute is used if we want to have a name automatically appear in one of the fields (such as asking a user to enter their e-mail as seen in our example) and the "max length" attribute controls the maximum amount of characters a user can enter in at one time.

6. Our form also includes a select element that states we want to have a dropdown box in our form. This is will allow users to select pieces of information with an arrow and is broken into "option value" attributes that each contain a piece of data (see screenshot below)

form4

7. Our form has a comments box as well to allow users to enter information in when they submit the form. We coded this by adding a "<text area>"element that states we wish to use a comments box with a max length of 600 characters. This ensures the user will have enough space to enter in their necessary comment.

8. Finally our form wouldn't be complete without a "submit" input type that will allow our form to be submitted to the server. We also used a value of "submit" to ensure that text is understood by the user and the browser.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image