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 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.
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.
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.
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:
So, what say you?
What questions do you have on creating a form? Leave me a comment on my Facebook Page.