Guide to HTML, CSS, and JavaScript (Buffalo State University 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.
<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>
<form> CodeThe code above would advise the web browser to render a form like this:
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
jimMialer.php EmailCSS Styles for Forms
Here is an example of the CSS styles to you might use to line up the fields on your form:
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>
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:
- 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. <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
- 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.
