One basic way that visitors can interact with a website is by using a web form. A web form provides boxes where people can enter their information or select from options. You could use a form on your website for any of the following: a contact form, a search engine, an order form. HTML is used to structure the form, but you'll need a different technology to handle what the visitor enters into it. You might have a script (or program) on the server, for example, that returns search results or forwards their message to you by email, or you might use Javascript to update the screen in response to the input. There are several standard elements you can choose from to design a form in HTML. You've almost certainly used them all before when visiting other websites. They are: a texbox, a textarea, radio buttons, checkboxes, select menus, buttons.
| <form>......</form> | Marks the start and end of a form. |
| <label for="id">Label text</label> | Identifies the label for the form element with a given ID. |
| <input type="textbox" id="id" name="name" size="20"> | A one-line text box that accepts 20 characters. The size is optional. Alternative input types include radio, checkbox, submit and button. |
| <textarea id="id" name="name" cols="20" rows="5">Default text in the box</textarea> | A multiline text input box with 20 columns and 5 rows. Anything between these tags becomes the default text in the box. |
| <select id="id" name="name">........</select> | Marks the start and end of a select menu. Options go between the tags. |
| <option value="value"<Option text</option> | Marks up each option in a select menu. |
| HTML code | Appearance of HTML code in web browser | Notes/Comments |
| <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> |
A form with input fields for text | |
| <p>Choose your favorite Web language:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form> |
Choose your favorite Web language: |
A form with radio buttons |
|
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> |
A form with checkboxes | |
|
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> |
A form with a submit button |