How to Build a Website With Forms

In XHTML, a form is part of the HTML document that provides a means for the end-user to provide input to the web or mail server of the author of the web site. In order to accomplish this task, a form contains control elements such as menus, check boxes, radio buttons, and text areas. Once the user fills out the required portions of the form and submits the information is transmitted to the server. Forms have played a key role in the development of the web by providing a means for the consumer to give information and feedback to website authors. A common use of a form is to create a basic feedback means for a user to send his or her identifying information, email address, and general comments to the web master.

Things You'll Need

• Web editing software Internet access

Instructions

1. 

   Open your web page authoring software and create a blank web page.

2. Create the opening and closing form tags.

   <form action="" method="get" enctype="application/x-www-form-urlencoded">

3. Insert three radio buttons for the user to select his or her title. The input type attribute is set to "radio" in order to determine the input type. The radio buttons are placed after the opening form tag in the HTML document.
   Mr. <input type ="radio" name="title" value="Mr."/>
   Mrs. <input type="radio" name="title" value="Mrs."/>
   Ms. <input type="radio" name="title" value="Ms."/>

4. Next, input text inputs to the form to get the user's name and email address. The input type attribute is set to text.

   Name: <input type="text" name="name" size="20"/>
   <br/>
   Email Address: <input type="text" name="email" size="20"/>

5. Create a drop-down menu for the user to choose the quality of service experienced. Note the syntax for this input type of a form differs from those of radio buttons and text area input in that the option value tag is used.

   Response: <select name="response">
   <option value="excellent"> Excellent Service. </option>
   <option value="ok"> OK service. </option>
   <option value="Bad"> Bad Service. </option>
   </select>

6. Input a text area for the user to provide comments and feedback by using the textarea tag.

   Comments: <textarea name = "Comments" rows="3" cols="30"></textarea>

7. 

   Create a form submission button for the web page.
   <input type="submit" name="submit" value = "Send Feedback"/>

8. 

   View the completed form.

Tips & Warnings

• Research advanced forms to see why the post method is more commonly used than the get method for form data.

Resources

• W3C International Standard Definition and conformance information for HTML Forms.
• HTML Web Authoring Resources