Tt
Click this widget to change the font size.
CC
Click this widget to change contrast.

Home Page 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Links | Search | Bio |

Guide to HTML, CSS, and JavaScript (Computer Science 4 All 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 <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 corresponding <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 <input /> provides a way to supply a default value. You should be careful using this since users tend to accept the value that is there and 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" for the user input on the form attribute tells the browser to place an input field that accepts alpha-numeric text.

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 one 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 enhanced 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 first displayed. By default, the browser normally places the cursor 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 when the cursor enters that input field. It can be used to provide a hint for the user about 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 min 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 data list choices.

Input Validation

In addition to the many new form tags and attributes, HTML5 introduced attribute types that tell the browser how to validate a given input field. For the most part, this eliminates 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 validate the 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 telephone number, email address, or URL.

The Validation Pattern

HTML5 introduced 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:gerlanjr@buffalostate.edu?subject=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" aria-label="GenderM" /> Male<br class="clear">
    <label for="GenderF"></label>
    <input type="radio" name="Gender" value="Female" aria-label="Genderf" /> Female<br class="clear">
    </fieldset>
    <fieldset>
    <legend>Interests Information<legend>
    <label for="Cooking">Interests:</label>
    <input type="checkbox" id="Cooking" name="Cooking" aria-label="Cooking" /> Cooking<br class="clear">
    <label for="Movies">:</label>
    <input type="checkbox" id="Movies" name="Movies" aria-label="Movies" /> Movies<br class="clear">
    <label for="Sports">:</label>
    <input type="checkbox" id="Sports" name="Sports" aria-label="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 Internet Explorer (IE) browser does not submit the form data to the mail client. You need to test your form using Chrome, Edge, Firefox, Opera and/or Safari.

Using jimMailer.php for Forms Data

Using the action="mailto:some-email-address" on your <form> tag is not always the best option. The user may not have an email client correctly configured. If they do, the email created send the data in a not very pretty (formatted) message.

I have created jimMailer.php which allows you to send email without worrying about whether the user has their email client configured correctly.

It also formats the message a little nicer.

To use my back-end program you need to change your <form> tag to use this action="" attribute code:

<form id="myForm" name="myForm" method="POST" ACTION="https://jimgerland.com/jimMailer.php">

Then you need to add four (4) hidden data fields to your form (to, subject, return, and source-url) like this:

<input type="hidden" name="to" value="put-your-email-address here" />
<input type="hidden" name="subject" value="put-your-subject-line-here" />
<input type="hidden" name="return" value="put-the-name-of-your-HTML-thank-you-page-here" />
<input type="hidden" name="source-url" value="put-the-name-of-your-HTML-form-page-here" />

Also, the email field of you form needs to have the name="email" and id="email" attributes.

Now, my back-end program (jimMailer.php) will send an email message from the value the user enters into the email field, and a copy to the address you put in the to hidden field.

The message will look something like this:

to: gerland@buffalo.edu
subject: Sample Data Form Submission
source-url: http://buffalo.edu/~gerland/dataform.html
firstName: Jim
middleName: 
lastName: Gerland
address1: 123 Main St
address2: 
city: Anytown
state: NY
zipCode: 12345
email: gerland@buffalo.edu
phone: 1234567890
comments: Here are my comments.
submit: submit
Figure 7-3: Form Data jimMialer.php Email

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-4: 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.
  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. Your page *MUST* also be ADA compliant.

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

Let's Get Started with a Form Web Page!

Help contribute to my OER Resources. Donate with PayPal button via my PayPal account.
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2016-2024 Jim Gerland