Creating forms on the Web is one of the foundations of HTML coding, and is not too difficult. A few rules have to be followed, but once you learn them, forms are easy to customize, and you're given plenty of tools at your disposal: small text boxes, big text boxes, drop-down menus, checkboxes and more. Learning how to implement all of these to create whatever type of form you want is quick and painless.
Step 1
Open a text editor like Notepad and save a new file to your desktop as "form.html". Include the quotes when you save; this will ensure that the file is saved as an HTML file and not a TXT file.
Step 2
Create a box to house your form with the <fieldset> tag, and give it a title with the <legend> tag. Type the following into your file:
<fieldset>
<legend>My First Form</legend>
</fieldset>
Step 3
Place a set of <form> tags underneath the <legend> tag:
<fieldset>
<legend>My First Form</legend>
<form></form>
</fieldset>
Step 4
Create a simple text field by typing the following in between the <form> tags:
First Name: <input type="text" name="firstname" /><br /><br />
As you see, the <input> tag has two attributes: "type," which in this case is set to "text" to let the browser know it should be a text field, and "name," which is your way of identifying which text field it is. The <br /> tags at the end simply create line breaks to keep things neat.
Step 5
Create radio buttons with <input type="radio">. Radio buttons are form options that are mutually exclusive--you can only choose one out of each choice with the same name:
Which is better?<br />
<input type="radio" name="whichisbetter" value="starwars" /> Star Wars <br />
<input type="radio" name="whichisbetter" value="startrek" /> Star Trek <br /><br />
Step 6
Create checkboxes with <input type="checkbox">. Checkboxes work like radio buttons, except the user can select as many as he wants.
Check everything you like:<br />
<input type="checkbox" name="genre" value="scifi" /> Sci-Fi <br />
<input type="checkbox" name="genre" value="romcom" /> Romantic Comedy <br />
<input type="checkbox" name="genre" value="cartoon" /> Cartoon <br /><br />
Step 7
Create drop-down menus with the <select> and <option> tags. Drop-down menus have the same function as radio buttons: forcing the user to select only one option from a list.
Who's the coolest celebrity?
<select name="celebrities">
<option value="monroe">Marylin Monroe</option>
<option value="smith">Will Smith</option>
<option value="scorsese">Martin Scorsese</option>
</select><br /><br />
Step 8
Create a block of text using the <textarea> tag. Text areas are used for long-form answers:
What's your favorite movie and why?<br />
<textarea rows="5" cols="30" name="favorite">Type your answer in this box.</textarea><br /><br />
Step 9
Create submit and reset buttons with <input type="submit"> and input type="reset">. Submit buttons send all of the information on the form to the server for processing. Reset buttons erase all the information that's been filled out in case the user wants to start fresh.
<input type="submit" value="Submit this Form" />
<input type="reset" value="Reset this Form" />
Step 10
Save your work again. Put together, it should look something like this:
<fieldset>
<legend>My First Form</legend>
<form>
First Name: <input type="text" name="firstname" /><br /><br />
Which is better?<br />
<input type="radio" name="whichisbetter" value="starwars" /> Star Wars <br />
<input type="radio" name="whichisbetter" value="startrek" /> Star Trek <br /><br />
Check everything you like:<br />
<input type="checkbox" name="genre" value="scifi" /> Sci-Fi <br />
<input type="checkbox" name="genre" value="romcom" /> Romantic Comedy <br />
<input type="checkbox" name="genre" value="cartoon" /> Cartoon <br /><br />
Who's the coolest celebrity?
<select name="celebrities">
<option value="monroe">Marylin Monroe</option>
<option value="smith">Will Smith</option>
<option value="scorsese">Martin Scorsese</option>
</select><br /><br />
What's your favorite movie and why?<br />
<textarea rows="5" cols="30" name="favorite">Type your answer in this box.</textarea><br /><br />
<input type="submit" value="Submit this Form" />
<input type="reset" value="Reset this Form" />
</form>
</fieldset>
Go to your desktop and open the file in a web browser. You should see a form similar to the accompanying picture.
Tip
- These instructions teach you how to create a form; to actually grab information from the form and do things with it, you'll need to know a server-side language like PHP that can process forms. See Resources for more information.
