HTML Tags – Part 6: The HTML Form Tag

Social media has made it easier for us to communicate with one another. We can instantly tweet or like something to let others know what we’re interested in. But having a form on your site makes it easier for you to ask your audience questions and vice versa.

HTML Tag - Form Tag

HTML Tags – Part 6: What is the HTML Form Tag?

Communication on the web is a two-way street. You want to share your ideas and knowledge with your audience and if your content is of high quality, they’ll respond by subscribing and/or commenting on your work. But you’ll have to take the first step in getting people to interact with you.

The Form Tag, <form>, allows you to create multiple fields for your audience to answer. These fields can ask your audience to input their name, what topics they’d be interested in learning from you, or get their opinion on a project you’re working on.

You can add as many fields within the <form> tag as you want but make sure to not over load your audience with inundated info if it’s not necessary.

When the fields of the form have been filled correctly, they’ll hit the submit button and in a short period of time, you, the author of the site, will receive the contents of that form within an email.

HTML Tags – Part 6: The Form Tag and How It Works

Creating a form is a bit more technical from the coding that we have gone through since the beginning of this series, but I’ll walk you through it. The screenshot below is an example of a basic form within Adobe Dreamweaver.

HTML Tag - Form Tag Code

Section 1: The body tag has an attribute that I have not discussed but will when we head into CSS. It says, make the width of this form to be 500 pixels wide.

Section 2: This has the opening form tag, <form>, and has a red border surrounding the fields (view image below). This tag has three attributes showing. The first is action and when the user clicks on the submit button, the contents of the form will be sent to what is called a processing link. A processing link will go through the contents of the form and check to see if the information in the fields were filled correctly. This is usually done using either JavaScript or PHP, scripting languages that processes the contents on a page and submits the results back to the browser.

The information regarding JavaScript and PHP are out of scope for this article but will be discussed in future tutorials. Subscribe to my blog to find out when I’ll publish them.

The method attribute determines how the information within the form is sent. There are two values for method: get and post.

Post will submit the information in a secured manner by using a HTTP transaction (HyperText Transfer Protocol). This particular technical jargon is out of the scope for this tut, but I will discuss it more in future posts.

Get is much easier in that the contents of the form can be seen within the address bar of the browser separated by plus signs (+). This is not the best option, especially if you are requesting personal information like a social security number. So always use post for the method attribute.

The name attribute allows you to name the form. It is useful when you need to refer to it using CSS or JavaScript.

Section 3: This is the input tag, <input />, and you can create a text field, radio field (Section 5) or checkbox field (Section 6). The attribute type allows you to decide if it is text, radio, checkbox, or any other kind of field.

Section 4: You can create a drop-down or selection list for your form. It is useful for choosing a month, your favorite food, or whatever option you require for your form. To fill the select tag, <select>, with options, you will place the values between the opening and closing option tag <option>.

Section 7: The textarea tag, <textarea>, lets the user type in a message similar to what you would do in the body of an email. Attributes cols and rows will determine how many columns and rows, respectively, the <textarea> will be.

Section 8: A form is worthless if you are not able to submit it. The submit button is created using the <input> tag. Once clicked, it will activate the link located within the action attribute of the <form> tag.

Below is the form that was coded above:

HTML Tag - Form Tag Design Example

So, what say you?

What questions do you have on creating a form? Leave me a comment on my Facebook Page.