Related Reading Aligning Your Content

Online Web Design Course is going to continue by exploring web “forms” – the predetermined area where surfers can input information (i.e. text areas, small radio buttons, check boxes, drop down menus, search boxes are all examples of different kinds of forms).

The fundamental structure of a form is as follows:

<form> <input> </form>

Form Input Types

The <input> tag is the most important tag in a web form. It defines what kind of data type can be entered from a form. The different types of form elements are all defined by the “type” attribute of the <input> tag.

Single Line Text Box

In order to add a single-line text area to a web page, we have to define the type of our input as “text”. It is also common usage to name your <input> elements with the “name” tag, as those names tell the server what form field you are referring to. Check out the below code:

<form> <input type=”text” name=”searchbox”> </form>

This code snippet gives us the below search box:

You can define the length of your search box by adding a “size” attribute:

<form> <input type=”text” name=”searchbox” size=”55″> </form>

Where “55″ is the number of characters your searchbox can take. We get a longer searchbox:

You can also define the number of max. characters your visitors can type inside the box with the “maxlength” attribute:

<form> <input type=”text” name=”searchbox” size=”55″ maxlength=”3″> </form>

Where “3″ is the max. number of characters you can enter. Let’s try it out – try to type more than 3 characters to the below searchbox:

You can’t!

Adding A Submit Button To HTML Forms

To add a submit button to our textbox, we’ll have to add another <input> tag, this time with “submit” as the input type. Note that we can set the label on the button with the “value” attribute of our <input> tag. Have a look at the below code:

<form> <input type=”text” name=”searchbox”> <input type=”submit” name=”submit” value=”Send It!”> </form>

Thus, we get our button:

Surely, the above code will not do any searches. To add a functioning search box to your site, you’ll need search engine scripts and to add “action” and “method” attributes to your <form> tag in order to define what that submit button actually does.

Form “Action” And “Method” Attributes

Your free online web design course is now going to explore how to construct a functioning HTML form. Let’s say we have a small PHP script called “print_form.php” which prints out whatever information has been entered from an HTML form on your website. In order to send the contents of your textbox to this script, we need to define the “action” and “method” attributes for your HTML form, where the “action” attribute defines the url the HTML form will be sent and the “method” attribute defines the method that the form is sent to the destination url. Examine the below code:

<form action=”print_form.php” method=”get”> <input type=”text” name=”type_in_box”> <input type=”submit” name=”submit” value=”Send It!”> </form>

This code means that the contents of our “type_in_box” will be sent to our little script “print_form.php” by using the “get” method. There are two methods you can use to transfer form data – one is “get” and the other is “post”. I’ll explain the difference after you test our output:

If you wish to duplicate the above example, you’ll need the “print_form.php” script I used. You can download it here. Note that you have to extract the ZIP file to the same folder where your main HTML file will be. If you don’t have a ZIP extractor, WinZip does the trick.

Form Action Methods “Post” And “Get”

“Action” attribute defines where the form will be sent. The “method” defines whether the form is going to be sent to another page to be processed as a part of the url (using the “get” value) or as a message body (the “post” value).

The difference between “get” and “post” is that the former means that form data is to be transfered into a URL by a browser, while the latter means that the form data is to be transferred in an invisible manner, inside the browser’s own memory space. To be short, the “get” method is basically for just retrieving data, whereas the “post” method may involve anything, like updating or storing data, ordering a product, or sending electronic mail.

Generally speaking, “post” is much more secure when transferring data from one page to another, as it does not include that data inside the url. However, prefer “get” if you have nothing to hide (i.e. email address, visitor logins and passwords, etc.

Defining A Multi-Line Text Area

Next in our free online web design course, we learn how to expand our text area. In order to define a multi-line text area, we need to use the <textarea> tag. We can also set the number of lines and character width of the text area with the “cols” and “rows” attributes. Copy and paste the below code to an HTML document:

<form method=”get” action=”print_form.php”> <textarea name=”type_in_box” cols=”50″ rows=”5″></textarea> <br> <input name=”submit” type=”submit” value=”Send It!”> </form>

Which will give you the multi-line version of our “type_in_box”:

Turn On The Radio – Adding Radio Buttons

Now, you may be wondering what a “radio” button is. It’s those round buttons used for selecting an option on an HTML form, like a poll or survey, for example.

Now I want you to open your text editor and copy & paste the below code to the “body” part of your HTML document:

<form> <input name=”radiobutton” type=”radio” value=”radiobutton”> </form>

Yup, this code creates a radio button:

Now let’s create a survey question and some radio button options. To do that, we’ll have to create a “radio button group”. This is to enable only one of the options to be selected and submitted at a time. Our group is called “Survey” – we’ll name all of the “radio” inputs as “Survey” to group them. We’ll also use the <label> tag to label our buttons:

<h2>Just A Little Survey</h2><b>Question:</b> Do you like Online Web Design Course?<br> <form method=”get” action=”survey.php”> <p> <label> <input type=”radio” name=”Survey” value=”Yes”> Yes</label> <br> <label> <input type=”radio” name=”Survey” value=”No”> No</label> <br> <label> <input type=”radio” name=”Survey” value=”Not Sure”> Not Sure</label> <br> <br> <input type=”submit” value=”Send Your Vote!”> </p> </form>

Wow, we get a simple, but effective survey form as a result. The survey form will be submitted to a script called “survey.php”, which will tell you which option you selected. It’s a simple script similar to the one we used above, and not a real survey script. Let’s have a look at our output:

Just A Little Survey Question: Do you like Online Web Design Course? Yes No Not Sure

Checkin’ Out The Check Boxes

Next in our free online web design course, we’re going to explore how to implement check boxes into our HTML forms. Check boxes are those boxes that you “tick” your interest with when registering to a free email provider like Yahoo!, or the little nagging box where it says “Allow ‘x’ website to send me promotional offers” when subscribing to that “x” website.

But, check boxes aren’t all for advertisements. You can have an optional feature on your website for your visitors – like a newsletter – and have them select whether they’d like to receive additional tips about other related subjects.

As a matter of fact, we’ll now make such a web form – a newsletter subscribe form – and learn how to add check boxes. Copy & paste the below code:

<b>Subscribe To Online Web Design Course Newsletters</b> <form method=”post” action=”newsletter.php“> <b>Name:</b> <input name=”name” type=”text” size=”25″> <b>Email:</b> <input name=”email” type=”text” size=”25″> <br><br> Please select the newsletters you’d like to receive: <br><br> <label> <input type=”checkbox” name=”checkbox_1″ value=”Web Design Newsletter” checked> Web Design Tips, Techniques & Exercises Newsletter </label> <br> <label> <input type=”checkbox” name=”checkbox_2″ value=”Power Linking Newsletter”> Power Linking & Networking Newsletter </label> <br> <label> <input type=”checkbox” name=”checkbox_3″ value=”Affiliate Marketing Newsletter”> Affiliate Marketing Newsletter </label> <br> <label> <input type=”checkbox” name=”checkbox_4″ value=”SEO Newsletter”> Search Engine Optimization Newsletter </label> <br> <input type=”submit” name=”Subscribe” value=”Subscribe”> </form>

Notice the “checked” attribute I bolded. By using the “checked” attribute, you can preset one or more of your check boxes as “checked”. This form gets posted to “newsletter.php”, which is not a real newsletter subscription script. It’ll only display the newletters you’ve selected. Have a look at the output of our code below:

Subscribe To Online Web Design Course Newsletters Name: Email: Please select the newsletters you’d like to receive: Web Design Tips, Techniques & Exercises Newsletter Power Linking & Networking Newsletter Affiliate Marketing Newsletter Search Engine Optimization Newsletter

Pretty neat, huh?

If you enjoyed this lesson, please link to it

Lesson 1.10 of your free web design course is over! You can go to Lesson 1-11 to learn all about the “head” part of HTML documents.