Ken Walsh

Web Page Design Foundations

8. Introduction to HTML Forms


An HTML form is a way to capture data from the user of a web page. It may be information about the user to register them in the system or it could be order data about something they want to purchase.


A Simple Form


The form section of an HTML document will be delimited with form tags. Within the open form tag will be parameters for name, action, and method. The name is unique name for the form that can be referenced in the DOM. The action is the URL of the page that will be called when a user hits the submit button on the form. This URL normally points to a page that can process the data entered on the form because all of the data will be sent to that page when called. The method can be set to Get in order to send data to the file specfied in the action parameter.


Between the begin and end form tags that delimit the form as a whole will be any number of input tags. The input tags specify the particular fields of information being requested on the form such as first name or shoe size. The fields can have different type depending on what type of inuput is being requested. Text is the most common type and presents a text box for the user to type into. Another input type is radio which is input tool that lets the user select one alternative from a list. The following example includes those two type of inputs.


This Introduction to HTML Forms video shows the use of the form and input tags.


The forms used in the video are availble at Introduction to Forms Example. Make sure to click submit to se the file that receives the data. Right click and select show source to to see the code that created those pages.


Other input types include number, email, and tel and date.


A Form with Formatting


Forms can be used within and other HTML foratiing the page is using. For example, if div tags are used to define the look of sections or columns within the document, forms can be placed within those divs.


Further, the label, fieldset, and legend tags are form specific tabs that helps with formatting the form. The label tag defines a label that will tell the user what information is being requested in a particular field. The fieldset tags define a set of fields that are closely related and draws a box around them to make them look like a set of related fields. The legend tag works in conjunction with the fieldset tag to put a heading on the box of related fields describe a name for that group.


This HTML Forms Formatting video shows how to use the label, fieldset, and legend tags along with div tags to format a form. The HTML file that receiving file show how to use a JavaScript if statement to make a choice on what to present based on the input.


The forms use in the video are at Camp Sunny Example. The CSS file used in the example is as CampSunny.css


Back to Table of Contents