HTML form input examples

HTML form input examples

When you are creating an HTML form, there are several different options for input elements to use. If you can efficiently use the non-textbox components as much as possible, you will make your form easier on your users. To start your HTML form, just enter the opening and closing tags

The ’textbox’ form input type

The most common input method on an HTML form is the text box. To add one of these to your form, use the code in this way:

<input name="name" size="15" type="text" />

This creates a single-line box that is 15 characters wide, and allows the user to enter as much text as he wants. When you refer to this box from a form mail script, you will use its “NAME” value.

Multiline textbox

For a text box with multiple lines, use the following code:

<textarea name="address" rows="3" cols="30" ></textarea>

Instead of having just a single line to input on, the user can perform carriage returns to make better formatting of the text. This is also easier if the user will be inputting a large amount of text - address or ‘comments’ for example. It’s much easier to have it all in a large text area, and be able to scroll through it.

The ‘Select’ input type

The next input method is the select menu, which you have surely seen in many other web sites. These allow for a certain number of pre-designated answers to be chosen from. Use the following code:

<select multiple="multiple" name="colors">
<option> red </option>
<option> green </option>
<option> yellow </option>
<option> blue </option>
<option> orange </option>
</select>

You can add unlimited options to this. Create a drop-down list when the user is to select from a big set of values. When the number of options is limited to less than 5, you can consider using radio buttons instead.

Check boxes

You can use check boxes for any Boolean entries that you want your user to make, such as a list of yes or no questions. Use this code:

<input name="color[]" type="checkbox" value="green" /> green
<input name="color[]" type="checkbox" value="red" /> red
<input name="color[]" type="checkbox" value="blue" /> blue

Instead of just being able to choose one color, the user can decide which colors he likes or dislikes from the list. This may not be implemented as much as the others, but it will still come in handy from time to time.

Radio buttons

You can use the radio button when you have clusters of items with circles next to them, and only one circle from each group can be selected at a time. Use this code:

<input checked="checked" name="answer" type="radio" value="true" /> True
<input name="answer" type="radio" value="false" /> False

Any of the radio buttons with the same name will fall into the same cluster, and only allow one at a time to be checked.

Submit button

You need to have a submit button in the form to let the users submit the form. Use the following code to create a submit button:

<input name="Submit" type="submit" value="Submit" />

These are the basic ingredients of an HTML form. Once you have created your form, you need to process the form submission data. The articles below will be helpful:

• PHP form tutorial
• How to get email from HTML form submission
• Using form mail scripts

See Also

• PHP Form Validation Tutorial