Web Form

All our web pages thus far have had a one-way flow of information, from us to our web visitors.  Now we’ll see how our visitors can send information back to us via a web form.  There are a number of reasons we might want our audience to fill out a form on our site:

  • Survey or poll
  • Contact us
  • Sign up for an email newsletter
  • Register for an event
  • Submit comments or feedback about our site
  • Log in to a members-only section of the site

The <form> Element
To create a web form on a page, we use the opening and closing <form> and </form> tags:form The method attribute determined in which format the submitted data will be sent.  The two possible values are “post” and “get”.
The action attribute declares which file will receive and process the data once submitted.  This will be a file written in a scripting language, such as PHP or ASP.

Text Box
Let’s begin adding some form elements.  The most versatile component of a form is the <input> element.  Here we are adding two text fields:text-boxThe type attribute determines which kind of input the field will be.  A value of “text” creates a single-line text box with the size attribute determining the width in characters.text-box-note

Radio Buttons
By changing the type attribute to “radio”, we can create a set of options, of which the user can choose only one:radio-buttonNotice that each radio option has its own input element, with the identical name attribute.  Only the value attribute differs.radio-note

Another possible type attribute is “checkbox”, which differs from radio buttons in that none, some, or all of the options can be selected:checkbox

Drop-down List
We can use the select and option elements together to create a drop-down list of options on our form:drop-down-listThe name attribute is applied to the select element, not the individual option elements.drop-down-note

Large Text Box
If a single-line text box isn’t big enough, we can use the textarea element to present a larger, expandable box that can hold a lot of text:lg-text-boxThe width and height of the box that displays on the web page is controlled by the rows and cols attributes, respectively.checkbox-note

Submit Button
Once we’ve built all the fields for our web visitor to fill out, we need to provide them a way to submit their answers to us.  We do this by including a button for them to click:submit

Fieldset and Legend
We can group form fields together and caption them using the <fieldset> and <legend> elements:

CSS Form Styling
With CSS styling, we can make our form more presentable to our visitors:form-css