You can add a Password Input field to your form using a <input> tag. The <input> tag requires a few attributes to work properly:

Let's write an input tag, step by step, to show how an input field is correctly coded.

The type="password" value tells the input tag to treat the information added into the field as a password and mask the characters typed in with asterisks or dots. It is written like this:

The name should always be something unique that identifies what the field is for. Since this field is specifically for passwords, you should probably name it "password" or something similar. For this example, we will use "pass". Add the name like this:

The value field allows you to pre-fill the displayed input field with some text. This is commonly used in fields asking for web url's and so on. Because this is a password field requiring the visitor to add their full password, leave the value field blank:

The size attribute tells the form how many spaces wide the input field should be displayed as. Customize this size value to whatever width you want the field to be.

The maxlength attribute tells the field to limit the number of characters the visitor can add to the field. If you set the limit to 20 characters, as shown above, then only 20 characters can be typed in.

Now let's look at how the complete tag will appear on a webpage. Here is our complete code:

And here is how it will look on a webpage:

Notice that when you enter text into this field it is masked with either asterisks or dots, depending on which browser you are using.

The Bravenet Email Forms service uses standard HTML Form elements to create your actual form, and our special form processing script handles all of the delivery and message processing for you! We provide you with a very basic HTML form which you can customize to suit your own needs with standard HTML form tags.

These tutorials provide a step by step walk-through of how to build each element for your form.

HTML Forms require the use of a <form> tag and a variety of input field tags. The <form> tag determines what the form does with the information provided by a visitor. Some forms will email the information directly to an email address and some forms collect and send information to a database for further use, like a Guestbook.

Regardless of what happens to the information, the actual processing is usually handled behind the scenes by a 'form processor'. Most form processors are small scripts stored on a webserver that are written with specific instructions that process form information in specific ways. The <form> tag defines which form processor script will be used and passes the information to the processing script.

All forms require a <form> tag and some attributes to make it work properly.

Let's write a basic <form> tag, step by step, to show how the tag is correctly coded. First we start with the opening form tag:

Then we need to define the method used to deal with the form data. In this case we are 'sending' or 'posting' the data from the form, to another process.. so we use the post method:

Now we need to specify the way we are going to process the data entered into the form by a visitor. We do this using the action attribute. This tells the form which action to perform on the visitor information.

There are 3 ways we can define the action attribute:

The hosted script uses a script stored on someone else's webserver, processes the form data on the other server and then emails you the results. Bravenet provides hosted form processing scripts to all members. The code that we provide already has the correct action defined for you.

The example below shows a sample of Bravenets Hosted Script complete with the full url and name of the form processing script. The pub number in your code will depend on what pub number is assigned to your member account:

Bravenet forms also require that two extra tags be included in your coding. The usernum and cpv hidden input tags are required and your form will not work if you remove them from the form coding. Your full Bravenet form tag(s) will look like this:

The mailto action takes all of the raw data from your form and emails it, as is, to the email address you specify. (Note: The mailto form action does not work in all browsers. ) It is coded like this:

The server script uses a small form processing script stored on your webserver to process and format the information your visitors have provided, in a more organized and readable format than the basic mailto option shown above.

To use a script stored on your webserver just add the path to the server script, and add the filename of the processor script. In the example below, the script is stored in a folder called 'cgi-bin' and the script is called myscript.pl. It is coded like this:

Let's write an input tag, step by step, to show how an input field is correctly coded.

The type="text" value tells the input tag to treat the information added into the field as text. It is written like this:

The name should always be something unique that identifies what the field is for. If you were gathering street addresses in this field, for example, you could give this field a name like "address" or "street_address". Add the name like this:

The value field allows you to pre-fill the displayed input field with some text. This is commonly used in fields asking for web url's. Webmasters will often pre-fill the 'http://' portion of the url since all url's have that. If you do not wish to pre-fill the field leave the value field blank:

The size attribute tells the form how many spaces wide the input field should be displayed as. Customize this size value to whatever width you want the field to be.

The maxlength attribute tells the field to limit the number of characters the visitor can add to the field. If you set the limit to 20 characters, as shown above, then only 20 characters can be typed in.

Now let's look at how the complete tag will appear on a webpage. Here is our complete code:

And here is how it will look on a webpage:

Note: The text in the text box is not affected by font tags or other HTML formatting codes, it is always displayed in the default browser font as shown above. (You can use CSS coding to alter the look and color of text in this field)

The Hidden Input field is not displayed on the page, so it does not allow visitors to add anything into it. The Hidden Input allows you, the webmaster, to add specific information to a form, to be passed through the form processor along with the data entered by the visitor.

For example, if you have several forms on different pages on your website, you could use a Hidden tag, in each form, that identifies which page the visitor was on when they filled out the form.

You can add a Hidden Input field to your form using a <input> tag. This <input> tag requires a few attributes to work properly:

Let's write a hidden input tag, step by step, to show how it is correctly coded.

The type="hidden" value tells the input tag to pass the information in the tag through the form processor without displaying an input box on the webpage. Define the hidden input like this:

The name should always be something unique that identifies what the field is for. Since this field is hidden you should name it something relevant to the information it passes. For this example, we will use "page". Add the name like this:

The value field allows you to add the information to be passed with the visitors data. In our example, we want to tell the form that the visitor is using the form on page 3 of our website, so we enter "page 3 form" as our value.

This tag does not display anything on the page, and you are passing pre-written information, so the usual size and maxlength attributes are not required for this tag, so let's look at our completed code:

Since the Hidden Input tag is...well... hidden, we can't really show you how it looks, but it works!

The <textarea> tag creates a multi-line input text field that allows visitors to add a lot more text than the normal <input> fields will allow. This is useful when you want visitors to send long answers to questions, or provide more details about a topic, and so on.

The <textarea> tag is made up of both an opening and closing tag. It has several attributes that should be defined for best results:

Let's write a basic <textarea> tag, step by step, to show how the tag is correctly coded. First we start with the opening textarea tag:

The name should always be something unique that identifies what the field is for. If you were gathering street addresses in this field, for example, you could give this field a name like "address" or "street_address". Add the name like this:

The rows attribute allows you to define how many rows high the text box will be displayed as. Usually, 3 or 4 rows will be sufficient to allow visitors to enter a lengthy answer, but you can choose a bigger box if you need it, by increasing the number of rows. For our example, lets build our text box 4 rows high:

The cols attribute allows you to define how many columns wide the text box will be displayed as. The only drawback to using this setting is that column widths are slightly different from one browser to the next, so your text box will appear slightly differently in different browsers. For our example, let's build our text box 30 columns wide:

Now, here is our finished <textarea> code, complete with its required closing tag:

And here is how it will appear on a webpage:

If you want to pre-fill the text box with some text, add your text between the opening and closing text area boxes:

This will be displayed on your page like this:

Note: The text in the text box is not affected by font tags or other HTML formatting codes, it is always displayed in the default browser font as shown above. (You can use CSS coding to alter the look and color of text in this field)

The checkbox input form element allows visitors to choose many options from a list with many options. This is handy for surveys and polls where a question can have more than one possible answer.

The checkbox uses a standard <input> tag defined with its own special 'type'. It has several attributes that should be defined for best results:

Let's write a basic checkbox input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:

Next we need to define what sort of input field we want to use. In this case we are coding a checkbox, so we enter "checkbox" as the type:

Checkboxes help us create a list of choices a visitor can choose multiple answers from. Unlike radiobuttons, which get grouped together by setting the name to a common topic, checkboxes are usually grouped by setting the value as a common result:

This checkbox will be presented as one choice of several. Now that we have given the checkbox a common result, we have to define what the box specifically represents within the common result:

The checkbox code is now complete and correct, lets add some text so that the visitor will know what the checkbox represents:

Here is how the checkbox will appear on a webpage:

Let's group several checkboxes together into a list of choices. The common result we have defined is 'yes' so let's create a form and code up some extra choices for the list:

The list will display the selections and allow visitors to click any or all of the boxes in the group and add a check to each box. Here is how the list will appear on a webpage, try clicking the boxes to see how they behave:

The list is almost complete, but we want a couple of choices from the list to be displayed as pre-selected when the visitor first views the list of choices. We can do that easily by adding the word checked to the tags we want to show as selected, in the group:

Now the list is complete and it will appear on the webpage like this:

If you have more than one question requiring multiple answers for your form, add the new group of choices and change the common result for each group of check boxes. Add your questions and the coding is finished:

Your checkboxes will now be displayed in your browser like this:

What animals are the coolest?
Bears Lions Tigers Giraffes

The radiobutton is used to give a visitor the ability to choose one option from a selection of many options. This is very handy for creating polls, surveys and anything else that requires visitors to choose one option from a list of pre-defined choices.

The radiobutton uses a standard <input> tag defined with its own special 'type'. It has several attributes that should be defined for best results:

Let's write a basic radiobutton input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:

Next we need to define what sort of input field we want to use. In this case we are coding a radiobutton, so we enter "radio" as the type:

Radiobuttons help us create a list of choices a visitor can choose from. In order to 'group' the choices together we need to assign a common name to all of the radiobuttons in one common group:

This radiobutton will be presented as one choice of several. Now that we have assigned the button to a common group, we have to define what the button specifically represents within the common group:

The radiobutton code is now complete and correct, lets add some text so that the visitor will know what the radiobutton represents:

Here is how the radiobutton will appear on a webpage:

Let's group several radiobuttons together into a list of choices. The common group we have defined is 'fruit' so let's create a form and code up some fruit choices for the list:

The list will display the selections and allow visitors to click any single radio button in the group and add a dot to it. Only one button in a group can be selected at one time. Here is how the list will appear on a webpage, try clicking the buttons to see how they behave:

The list is almost complete, but we want one choice from the list to be displayed as pre-selected when the visitor first views the list of choices. We can do that easily by adding the word checked to the tag we want to show as selected, in the group:

Now the list is complete and it will appear on the webpage like this:

Finally, let's code up two common groups of choices and add them to the same form.

<input type="radio" name="veggies" value="carrots" checked> Carrots
<input type="radio" name="veggies" value="peas"> Peas
<input type="radio" name="veggies" value="corn"> Corn
<input type="radio" name="veggies" value="beans"> Beans
</form>

Now when our two groups appear on the page, the visitor can select one individual item from each common group of items. Try selecting items in each group shown below:

Carrots Peas Corn Beans

The dropdown menu displays a list of selectable options in a small input field that can be dropped down to reveal multiple options. The dropdown format is handy for saving space in a form as the input field is only one line in height and it can be used to 'hide' long lists of menu options.

The dropdown menu form element is similar to an HTML Table since it uses more than one tag to build the dropdown list. The dropdown menu is coded using the <select> tag for the main input field, and the <option> tag to define each item to be added to the list.

Let's write a basic dropdownmenu input tag, step by step, to show how the tag is correctly coded. First we start with the opening select tag:

Dropdown menus create a compact list of choices a visitor can choose answers from. In order to properly group the items into one menu, we need to give the menu a unique name:

Now we need to add the individual menu items to the menu. We use the <option> tag for each item. Each menu item must have a value defined,some text for the visitor to see and a closing </option> tag to be complete:

Now let's add a few more menu items to our list and close the list by adding the closing </select> tag, like this:

The dropdown menu code is now complete. Click the down arrow shown in the example below and the menu options you have coded will be displayed in a small dropdown list. The look of the text and colors of the list and it's box cannot be changed with basic HTML, but you can modify these areas with special CSS code (the subject of another tutorial). The dropdown displays in your browser like this:

The <option> tag also allows you to choose any of the options to be displayed in the input box as the default selected item. Just add the word selected to the option tag of your choice, like this:

<option value="bears" selected>Bears</option>

<option value="giraffes">Giraffes</option>
</select>

The dropdown menu, with the new default item is displayed in a browser like this:

You can also create a scrollable menu box just by adding a special size attribute to the <select> tag. The size attribute will change the number of lines that the menu initially displays from 1 to whatever number you specify in the code. Adding a size of any number greater than 1 will produce a scrollable menu.

This option works best with long lists of menu items so lets add some items to the list and change the size of the displayed dropdown box:

</select>

The scrollable menu coding is now complete. We chose a size value of 3 for our menu, so now 3 menu items will be displayed when visitors view this input field. The rest of the list can be viewed by scrolling through the menu items. It will appear in your browser like this:

The final step in building a form is providing visitors with a button they can click on that will submit the information they have added to your form. This is done by adding a special <input> tag called a 'submit' tag.

When a visitor clicks the submit button, the form is activated and processed using the action defined in the opening form tag. The submit button uses a standard <input> tag defined with its own special 'type'. It has a couple of attributes that should be defined for best results:

Let's write a basic submit button input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:

Next we need to define what sort of input field we want to use. In this case we are coding a submit button, so we enter "Submit" as the type:

The final step in creating your submit button is to include the text that you wish to display on the button, by adding the text to the value attribute, like this:

Here is how the submit button will appear in a form on a webpage:

The text displayed on the button can be anything you like. Here are some common examples of text used on submit buttons:

The buttons coded above will display in a browser, like this:

The Reset button is a handy option you can give to visitors so they can easily clear your form if they have made a mistake and want to start over. This is not a required form element.

When a visitor clicks the reset button, the form is cleared and all information added by the visitor is removed from every field in the form and any selections returned to their default values.

Let's write a basic reset button input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:

Next we need to define what sort of input field we want to use. In this case we are coding a reset button, so we enter "Reset" as the type:

The final step in creating your reset button is to include the text that you wish to display on the button, by adding the text to the value attribute, like this:

Here is how the reset button will appear in a form on a webpage:

You can replace the standard HTML submit button with your own button image using a variation of the standard <input> tag.

Instead of using a type="submit" attribute, use type="image":

Now add the actual information for the image, in the exact same way you would for a standard image tag:

The standard HTML submit button will now appear as the image you have defined in the tag above.