Tutorials

Using forms in HTML 5 (Part 2/2)

In our last article we showed you how to create a basic web form using HTML 5 in Dreamweaver. In this article we'll expand further on that knowledge by showing you a few other common form elements used on websites.

Forms are a useful way of gathering information about your users. Another common way of gathering information is by using buttons, lists and selection boxes that prompt a user to make a selection. This selection then gets sent over to the server with the options they select. Below is the code for a basic radio button form asking the user for a bit of information. The "type" tells Dreamwever that you wish to display a form comprised of radio buttons. You'll recall from the last article that the "name" attribute is sent to the server with the value the user selects. The "value" attribute tells the server which option the user can select and which one has been selected. Finally, we used an additional attribute of "checked" for one of our options so that when the user first visits the screen he/she will see that they're able to select options.

form2A

form2B

Of course, you can also use checkboxes too. In the example below, all we did was change the input type to "checkbox" instead of the previous radio option and you'lls ee the options now become checkboxes instead. Checkboxes are sometimes more useful than radio buttons as they grant the user the ability to uncheck options or to check multiple options instead of just one.

form2C

form2D

In your websites you may also want to use dropdown lists on your forms. For this you'll need to use a "Select" element that contains option elements. These option elements are what the user can select from your drop down list. Giving it a name will also help the server to identify your dropdown list.

form2E

form2F

Another useful form input is  "type=file" which can allow your users to upload a file with their form. This is done by adding an input type of "file"  and "submit" which ensures the file will be sent to the server. Also important to not here is that in order to use this form input, you must also specify a method of "post" since sending files via the HTTP method will not work.  Below we added a simple browse box to our previous dropdown menu.

form2G

form2H

The last form input we'll cover in this article is the popular search box which is common on many websites. The search input is created by using an input type of "search" and the "submit" type again as well.  In our example we also added placeholder text that will let users know they can type search queries into the box.

form2I

form2J

Of course, these forms can also be styled to make them look completely different. We'll look at styling the forms we made in both articles with CSS in a future post.

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