How to Create Online Forms for a Web Page

A check box is one of the many input types on a form.

Using forms on your website can be a useful tool to gather information from your users. They are commonly used for new user registration, surveys and "contact us" forms. Forms are made using HTML, so it will help to know a little bit about how to write HTML before you begin. When a user submits the information on a form, you can control where that information goes. In this example, we will learn how to either send it to another web page or as an e-mail. Which method you choose depends on what you want to do with the information.

Instructions

1. Open the HTML file for the page you want to add a form to. If you want it to stand alone, you can create a new file. You can use an HTML editing program (such as Adobe Dreamweaver) if you have it, but a simple text editing program like Notepad (on PC) or Text Edit (on Mac) works just as well for this exercise.

2. Add the <form> element where you want the form to appear on the page.

   It should look like this:

   <form>

   </form>

3. Decide what information you need to gather, and decide which types of input elements you need to use.

   Input types include:

   Text fields: For short bits of text, such as a name or e-mail.

   Text areas: For longer chunks of text, such as a paragraph.

   Password fields: Input is hidden, characters display as asterisks or dots.

   Radio buttons: For multiple choice options; only one selectable at a time.

   Check boxes: For multiple choice options; more than one is selectable at a time.

   Drop-down lists: One choice is displayed at a time; click the arrow to view and select from full list.

4. Add the input fields that you want on your form. For each one, you will need to specify the type and give it a name. Radio buttons and check boxes also require a value attribute, and drop-down lists are a bit different, but there are examples of the code for each type below.

   Keep in mind that nothing you type inside the input tag will show up, so you will need to add some text before or after to tell the user what they should type there or what the choices are.

   It should look like this:

   <form>

   Name: <input type="text" name="username" /><br />

   Password: <input type="password" name="pw" /><br />

   Age: (radio buttons)<br />

   <input type="radio" name="age" value="male" /> Under 18<br />

   <input type="radio" name="age" value="female" /> 18 to 34<br />

   <input type="radio" name="age" value="female" /> 35 or older<br />

   Interests: (check boxes)<br />

   <input type="checkbox" name="interests" value="Sports" /> Sports<br />

   <input type="checkbox" name="interests" value="Music" /> Music<br />

   <input type="checkbox" name="interests" value="Fashion" /> Fashion<br />

   <input type="checkbox" name="interests" value="News" /> News<br />

   Subscription type: (drop-down list)<br />

   <select name="subscription">

   <option value="digital">Digital Only</option>

   <option value="print">Print Only</option>

   <option value="standard">Standard (print & digital)</option>

   <option value="deluxe">Deluxe (print, digital & membership)</option>

   </select>

   </form>

5. Add a "submit" button using the following code:

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

   Whatever you put as the value is what will appear on the button.

6. Add an action attribute to your <form> tag to tell the server what to do with the information when someone hits the "submit" button.

   If you want the information to be displayed on a web page, then type the name of that file in the action attribute. For example, it may look like this:

   <form name="input" action="subscriber.asp" method="get">

   If you want the information to be sent to a certain e-mail address, then type that in the action attribute instead, preceded by "mailto:"

   <form action="MAILTO:[e-mail]" method="post">

Tips & Warnings

• Use the W3 TryIt Editor in the Resources section to test your code and see what it will look like on a Web page.

• The form we created in this example looks very plain, but you can adjust the style using CSS, or Cascading Style Sheets.

• There is also a lot more you can do with the information from a form, using server-side programming.

References

• W3 Schools HTML tutorial

Resources

• W3 Schools TryIt Editor