Guide to HTML, CSS and JavsScript (University at Buffalo Version)


Chapter 7: Creating a Web Form

Web page forms are very useful and can be used in many web page applications. You have probably filled in many web page forms ranging from login boxes to search boxes to profile settings and web purchases, etc. Web forms are easy to create. The problem that arises is "what do you do with the data you’ve collected from your web form?" In most cases, you would have some back end (server-side) program written in *ASP.NET* or *PHP* that will take the data and do something with it, such as store it in a database or create a purchase and receipt, etc. Since this is an introductory guide we will present how to create a web form that simply sends the data via an email message to someone.

Web forms use the <form></form>, <fieldset></fieldset>, <legend></legend>, <input>, <select></select>, and other form related tags to create and display a form and provide an action for the web browser when the form is submitted.

The <form></form> Tags

The <form> tag is used to begin a web form and the </form> tag is used to end a web form.

The <form> tag has a few attributes such as id="" to give your form an identifier that can be used by JavaScript code to manipulate the form.

Another is the method="" attribute which tells the browser how to send the form data. Using method="POST" tells the browser to encrypt the data (a good idea for security). The method="GET" sends the data in clear text as part of the URL address field

The action="" attribute tells the browser what to do when the user clicks the Submit button. As I mentioned above, in most "real world" web forms the data is sent to the server to be processed by a back-end language such as ASP.NET or PHP. For this course we will use the action="mailto:your-email-address?subject=some subject line" attribute value which tells the browser to try and execute the mail client on the user's machine to create an outgoing email message with the form data. Not all users will be able to send the data via email. The user needs to configure their browser to open up their email client with a new message containing the data. In fact, the Internet Explorer browser will not put the form data in the email message even if it is configured correctly. You should use Chrome, Firefox, Opera, or Safari when testing your form.

In the Adding JavaScript Validation to Your Web Form Page chapter we will look at the onsbmit="" attribute for using JavaScript to validate your form fields user input.

The <fieldset></fieldset> Tags

The <fieldset> tag is used to group sections of web form and the </fieldset> tag is used to end a web form section.

The <label> Tag

The %lt;label> tag is used to provide a word or phrase that should be placed along with the input field. It uses the for="" attribute to associate the label with the field id=" identifier attribute in the correspondng <input&t; tag.

Tags for Accepting Form Input

There are quite a few HTML tags that can be used to place fields on your form where you can accept various types of input.

The <input /> Tag

The <input /> tag tells the browser to place a control on the web form where the user can enter some information. These controls can be text boxes radio buttons check boxes, or submit buttons.

The value="" Attribute

The value="" attribute on the %lt;input /%gt; provides a way to supply a default value. You should be careful using this since users tend to accept the value tht is there aand that may not be what they intended for their input.

The required Attribute

The required attribute is new to HTML5 and tells the browser that the field must be supplied by the user and, if it is missing, to display a message (title="") notifying the user about the required field.

The title="" Attribute

The title="" attribute is new to HTML5 and provides a message for the browser to use if the user input is missing or does not match the pattern="" attribute, notifying the user about the required field or incorrect syntax.

The id="" Attribute

The id="" attribute provides a way to uniquely identify a field which can then be used as a variable in JavaScript.

The name="" Attribute

The name="" attribute provides a way to identify a field which can then be used as a variable by the back-end processing (PHP, ASP, etc.).

The type="text" Attribute

The type="text" afor the user input on the form.ttribute tells the browser to place a text field

The type="radio" Attribute

The type="radio" attribute tells the browser to display a set of radio buttons (circles) and allow the user select ONLY ONE of the choices

The type="checkbox" Attribute

The type="checkbox" attribute tells the browser to display a set of check boxes (squares) and allow the user to select select ZERO or MORE of the displayed choices

The type="password" Attribute

The type="password" attribute tells the browser to display asterisks (* as the user types their password so it is not displayed in plain text for someone else to see.

The type="button" Attribute

The type="button" attribute tells the browser to display a button and use the value="" value to display on the button giving the user a way to submit a form.

The <select> ... </select> Tags

The <select> ... </select> tags tell the browser to display a dropdown list of choices. The multiple attribute can be used to allow the user to make more than one choice.

The <option> ... </option> Tags

The <option> ... </option> tags provide a list of choices for the <select> tag. The value="" can be used to supply a value for that choice for the back-end processor. The word or phrase placed between the <option> and </option> tags are displayed for the user to make their choice(s).

The <selected> Attribute

The <selected> attribute allows you to provide a default choice from the list of choices for the <select> tag.

The <optgroup> ... </optgroup> Tags

The <optgroup> ... </optgroup> tags provide a way to group the list of choices for the <select> tag. For example, a group of US States or Canadian Provinces.

The <textarea> ... </textarea> Tags

The <textarea> ... </textarea> tags are used to display a text input field with more than on line. The cols="" and rows="" tell the browser how many columns and rows you want in the text field. The wrap="hard" attribute tells the browser to preserve any newline characters when the data is submitted.

The type="submit" Attribute

The type="submit" attribute tells the browser to display a "submit" button for the form.

HTML5 Form Features

HTML5 introduced a large number of new and enhaced features for creating forms and form controls and validating user input.

The type="number" Attribute

The type="number" attribute is new to HTML5 and tells the browser that the field must be a number.

The type="range" Attribute

The type="range" attribute is new to HTML5 and tells the browser to display a range selector. This attribute is not yet supported by all browsers.

The type="date" attribute is new to HTML5 and tells the browser to display a date picker control. This attribute is not yet supported by all browsers.

The type="color" Attribute

The type="color" attribute is new to HTML5 and tells the browser to display a list of colors. This attribute is not yet supported by all browsers.

The type="date" Attribute

The type="date" attribute is new to HTML5 and tells the browser to display an input field that should contain a date. Depending on browser support, a date picker might show up in the input field. This attribute is not yet supported by all browsers.

The autofocus Attribute

The autofocus attribute tells the browser to place the cursor in that field when the form is firsst displayed. By default the cursor is placed in the first field.

The placeholder="" Attribute

The placeholder="" attribute is new to HTML5 and tells the browser to display some text in the input field. The browser should remove the text one the cursor enters that input field. It can be used to provide a hint for the user abot what data is expected in that field.

The min="" and max="" Attributes

The min="" and max="" attributes are new to HTML5 and tells the browser that the field must be between the miin and max values (inclusive).

The <datalist></datalist> Tags

The <datalist></datalist> tag is new to HTML5 and tells the browser that the field must be

The <option/> Tag

The <option/> tag provides a way to display the datalist choices.

Input Validation

In addtion to the many new form tags and attribubtes, HTML5 introduced attribute types that tell the broswer how to validate a given input field. For the most part, this elimanates the need to create JavaScript validation functions.

The type="tel", type="email" and type="url" Attribute

The type="tel", type="email" and type="url" attribute tell the browser to vlidate syntax of the input field as either a telephone number, an email address, or a web page URL. It does not validate whether the input data is a real telehone number, email address, or URL.

The Validation Pattern

HTML5 intruduced a way validate the syntax of any field which could be syntactically correct using regular expression (regex) patterns. For example Social Security Numbers (pattern="^d{3}-d{2}-d{4}$") or US Zip Codes (pattern="\d{5}-?(\d{4})?").

A Sample Web Page Form

Here is the code and output for a sample web page form.

  <form id="mySampleForm" method="POST" action="mailto:gerland@buffalo.edu?your subject line">
    <fieldset>
    <legend>Personal Information<legend>
    <label for="Name">Name:</label>
    <input id="Name" name="Name" type="text" placeholder="Enter your name"/><br class="clear">
    <label for="State">State:</label>
    <Select id="State" name="State">
      <option value="NY">NY</option>
      <option value="OH">Ohio</option>
    </select><br class="clear">
    <label for="GenderM">Gender:</label>
    <input type="radio" id="Gender" name="Gender" value="Male"/> Male<br class="clear">
    <label for="GenderF"></label>
    <input type="radio" name="Gender" value="Female"/> Female<br class="clear">
    </fieldset>
    <fieldset>
    <legend>Interests Information<legend>
    <label for="Cooking">Interests:</label>
    <input type="checkbox" id="Cooking" name="Cooking"/> Cooking<br class="clear">
    <label for="Movies">:</label>
    <input type="checkbox" id="Movies" name="Movies"/> Movies<br class="clear">
    <label for="Sports">:</label>
    <input type="checkbox" id="Sports" name="Sports"/> Sports<br class="clear">
    </fieldset>
    <label for="submit"></label>
    <button id="submit" name="submit" type="submit" value="Do it!"/>Do it!</button><br class="clear">
  </form>

Figure 7-1: HTML <form> Code

The code above would advise the web browser to render a form like this:

Personal Information

Male
Female
Interests Information Cooking
Movies
Sports



Figure 7-2: HTML Form

When the form is filled out and the "Do it!" button is clicked the browser will attempt to open the default email client on the user's computer and create an outgoing email to send the form data the address listed in the action= attribute with this content:

Name=Jim+Gerland&Gender=Male&Movies=on&Sports=on

Note: The Microsoft Edge and Internet Explorer (IE) browsers do not submit the form data to the mail client. You need to test your form using Chrome, Firefox, Opera and/or Safari.

The University at Buffalo provides a form processor, Wings Mailer, written in PERL that allows you to send the form data in a more reasonable (prettier) format via an email message. See http://wings.buffalo.edu/help/wingsmail.php for more information.

CSS Styles for Forms

Here is an example of the CSS styles to you might use to line up the fields on your form:

<style>
form {
  margin: 0 auto;
  padding: 2% 0;
  width: 40%;
}
input, label {
  display: block;
  float: left;
  margin: 1px 2px;
  text-align: left;
}
input[type=checkbox], input[type=radio] {
  clear: right;
  display: inline;
  float: left;
  margin: 2px 2px;
  width: auto;
}
label {
  font-weight: bold;
  text-align: right;
  width: 30%
}
input {
  width: 60%;
}
.clear {
  clear: both;
}
fieldset {
  background-color: #CCC;
  border-radius: 11px;
  color: navy;
  margin: 2px;
  width: 80%;
}
legend {
  color: #F00;
    font-weight: bold;
    width: 80%;
}
</style>

Figure 7-3: Form CSS Code

Task - Create a Form Web Page

For this task you will create a new web page (*form.html*) in your web server *public_html* folder, just as you did in previous tasks. This web page should utilize the following HTML tags and include the following:

  1. A <form> tag that has an action value of *mailto:your-email-address* so that the results of what the user enters gets sent to your email address when it gets submitted. You may want to utilize the Wings Mailer instead.
  2. <input/> tags that allow the user to enter their:
    • First Name
    • Last Name
    • Address
    • City
    • State/Province (this should use a <select> tag with <option> tags for each state name and state abbreviation)
    • Zip/Postal Code
    • Phone
    • Email Address
  3. An <input/> tag that creates a *submit button* that says: *OK Send My Data*

If you want to utilize the new HTML5 form tag features, use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for "html5 forms" (no quotes) to find lots of helpful information.

This web page should also have a link back to your Home Page web page.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.

You should then add an <a> (anchor) tag to your Home Page web page that opens your Form web page.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland