Beginners Guide to HTML Part 2

Written By: Kevin Jordan

- 30 Mar 2006 -

Description: This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

  1. Intro to Tables
  2. Table Rows and Columns
  3. Forms

Forms

Forms are used anytime you want to retrieve information from your users. As you get further into making web application rather than just web sites, forms will become invaluable.

The user can input data in a number or ways: text fields, password fields, radio buttons, check boxes, dropdown, and text areas. We'll also learn to create submit and clear buttons.

<form method="post" action="formcheck.html">
</form>

All forms start out with the <form> tag, like you probably expected. There are two other options that must be set at the same time. The method can be set to get or post. Get is used when you just want to display information with a form, but aren't interested in having your users modify any of it. Post is what you'll typically see, and when the submit button is clicked the form will send the data to whatever action you specified.

The action is either another page that is supposed to handle that data, or can also be in the form of action="mailto:contact@scratchprojects.com". This will send all the data to an email address.

Text and Password Fields

Text fields are the simplest and most common type of input field. You'll typically see this anytime someone needs a single line of text such as a name or email address.

<input type="text" name="name" value="Default Text" size="30" />

When declaring the text field you must set the type="text" and make sure the name of the field is unique to any other fields in that form. Value and size are both optional. Value puts starting text in the field where as size specifies the length of the box, not how much you can type. You can set that by using the maxlength option.

Password fields are almost exactly the same as text fields. Just change the type to “password" and everything typed in that space will show up as stars.

Text Area

Text area is similar to the text field except that you can type more than one line. You call it like this:

<textarea name="textName" rows="6" cols="4">Optional text here</textarea>

Instead of specifying an input type you have a textarea tag. Rows are how wide the area is while cols sets the number of lines you can type. If you want any text to be in the box you can put it between the two tags, otherwise you can leave this empty.

Radio Button

Radio buttons are those little circles where you can only select one of the options. You'll use these for options where someone can be one thing or another but not typically both, like male or female, dog or cat, income ranges, junk like that.

<input type="radio" name="buttonName" value="Option1" />
<input type="radio" name="buttonName" value="Option2" />

Notice that the name of the two buttons is the same, but the values are different. If you make the radio name different then you'll be able to select more than one option, and this would really be the job for a checkbox.

Check Boxes

Replace the radio buttons with squares and make it so you can select more than one, and guess what? You've got a check box.

<input type="checkbox" name="checkName" value="Option1" />
<input type="checkbox" name="checkName" value="Option2" />

You can use checkboxes when more than one answer may be valid, such as: hobbies, pets, or software that you own.

Drop Down Menus

Ever had to select what state or country you live in. You probably did it with a drop down menu. These are used when the user should only select one option, but there are so many options that it just doesn't make since to use radio buttons.

<select name="state" size="1">
	<option selected>Alabama</option>
	<option>Alaska</option>
	<option>Arizona</option>
</select>

Start out with the <select> tag. Size changes the number of options displayed at one time without scrolling. You'll then specify each option with the <option> tag. The option that is specified as selected is what shows up first on the drop down, whether it's at the top of your list or not.

Submit and Clear

Once you have placed all the form elements you want on your page, you'll need a way to have the results sent.

<input type="submit" name="submit" value="Click me" />
<input type="reset" value="Reset the Page" />

Here are the two basic button types. Submit sends all the data from your form to whatever action you specified at the top. Value is the text that is displayed on the actual button. If you don't specify a value, the default, “Submit" will appear. The same is true for reset, except it sets the form back to its original state.

<input type="image" src="submit.gif" name="submit" value="Click me" alt="Click me" />

It's also possible to have a submit button that's not a little gray square. By using the above you can set the button to an image, in this case submit.gif.

The End

Well I hope you learned something. This should get you up and creating your first web pages in no time. There are tons more to web design so don't stop here. Not only is there more HTML to study, but there's a ton of other languages that can make your site even better. I recommend learning some style sheets after this so you can set all your text setting and colors in one place (they can do a whole lot more than that too). Keep practicing.

<< Previous