You are here: Home » All Posts » HTML Forms » HTML form input examples

HTML form input examples

in HTML Forms

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 <FORM> and </FORM> . Between these two tags, you will fit as many other elements as necessary. Here, each of them will be explained in detail along with examples of exact source code needed to implement them.

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:

Be Sociable, Share!
ellin June 2, 2011 at 12:33 am

I added radio buttons to the sample contact with captcha, which worked fine. When I tried to change the name from “answer” the page would return with the Thank you page, but no email was generated. Is there a way to change this so the email lists the radio button answers as something besides “Answer”?
I’m new to this and any help would be appreciated. Also, I would like to say thank you for offering all of this terrific info. Great site!
Thanks,
ellin

Angel July 22, 2011 at 10:14 pm

hi, how do i include a captha and send teh captcha code to the email owner…
 
please help

Toby October 26, 2011 at 2:50 am

I want to know how to make a login and register html or javascript to copy and paste with an input saying search people here so you can search any paople with another box that say’s Random Person !!!!
 
If you can help That would be great and I hope you find what you are looking for too!

Rustig October 28, 2011 at 1:23 pm

is there a way the inputbox is nummerik?

Prasath February 2, 2012 at 5:25 pm

How can i specify the form width and height… can you help me..

Comments on this entry are closed.

Previous post:

Next post: