Web Forms
Web form: a collection of text boxes, buttons, etc., that a visitor uses to provide
information.
Example
All forms work the same way. The user enters information and clicks on a button.
When he clicks on the button, the information that was entered gets sent to the
server where it is processed. We will worry about server processing later in the term.
Traditional HTML forms
The <form> tag
The <form> tag is used to create an HTML form:
<form>
input elements
</form>
Note that in all of the following examples, the sample code must be inside of a
<form> element.
The <input> tag
The most important form element is the <input> element. The <input> element is
used to collect user information. The input tag can display many different types of
input controls.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Document1
1
3/23/2016
Password Field
<input type="password"> defines a password field.
Password: <input type="password" name="pwd"><br>
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY
ONE of a limited number of choices. The buttons are grouped by using the name
attribute.
<input
<input
<input
<input
type="radio"
type="radio"
type="radio"
type="radio"
name="sex" value="male">Male<br>
name="sex" value="female">Female<br>
name="status" value="student">Student<br>
name="status" value="alumnus">Alumnus<br>
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices. The check boxes are grouped by using
the name attribute.
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
Submit Button
<input type="submit"> defines a submit button. A submit button is used to send
form data to a server. The data is sent to the page specified in the form's action
attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user"><br>
<input type="submit" value="Submit">
</form>
Lists
To create a drop-down list (or "combo box"), use the <select> tag. Note that this is
not an attribute of the <input> tag as the other examples are.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The text is what will appear on the screen, but the value is what will be sent to the
server. The value can be the same as the text, or it can be whatever you want.
Document1
2
3/23/2016
Lists with a pre-selected value
Note that the selected attribute has been added to the Fiat option below.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select><br>
Text areas (multi-line text boxes)
To create a larger text box for free-form input:
<textarea rows="10" cols="30">
This is where you can put 10 rows of text.
</textarea><br>
Buttons
There are four types of buttons:
1.
2.
3.
4.
submit
image
reset
button
Submit: collects the form data and sends it to its destination.
Image: does the same as a submit button, but lets you display a clickable picture
instead of a standard text button.
Reset: clears all of the input controls.
Button: doesn't do anything unless you add some JavaScript code to process it.
Image button example
<input type="image" src="../images/email.png" alt="Email" height="40"
width="100"><br>
Reset button example
<input type="reset"><br>
Document1
3
3/23/2016
The fieldset: grouping data
To group the data within a form into logically-related fields, use the <fieldset> tag.
Use the <legend> tag to put a label on the fieldset.
Example
<fieldset>
<legend>Personal information:</legend>
First Name: <input type="text" size="30"><br>
Last Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="40"><br>
Cell Phone: <input type="text" size="12"><br>
</fieldset>
Labeling your input controls
You can label your controls with the <label> tag. To use the label tag, you must
create a name for the input element that you want it to be associated with.
For the <input> element, include a name attribute.
For the <label> element, include a for attribute which must be the same as the id
attribute of the <input> element that the label is associated with. Using a <label>
element allows the user to click on the label as if it were the <input> element.
<label
<input
<label
<input
for="male">Male</label>
type="radio" name="sex" id="male" value="male"><br>
for="female">Female</label>
type="radio" name="sex" id="female" value="female"><br><br>
<input
<label
<input
<label
type="checkbox" name="vehicle" id="bike" value="Bike">
for="bike">I have a bike</label><br>
type="checkbox" name="vehicle" id="car" value="Car">
for="car">I have a car</label><br><br>
Document1
4
3/23/2016
HTML5 New Input Types
Create a new HTML document called Page0502HTML5Input.htm.
HTML5 has several new input types for forms. These new features allow better input
control and validation. The new input types are:













color
date
datetime *
datetime-local *
email
month *
number
range
search
tel
time
url
week *
Color
Lets the user select a color.
Select your favorite color: <input type="color" name="favcolor">
<br><br>
Date
Lets the user select a date.
Birthday: <input type="date" name="bday"><br><br>
EMail
Lets the user input an email address.
E-mail: <input type="email" name="useremail"><br><br>
Number
Lets the user input a number (any type, float or int).
Quantity (between 1 and 5): <input type="number" name="quantity"
min="1" max="5"><br><br>
Attributes
 max: specifies the maximum value allowed
 min: specifies the minimum value allowed
 step: specifies the legal number intervals
 value: Specifies the default value
Quantity (a multiple of 10 between 0 and 100): <input type="number"
name="quantity" min="0" max="100" step="10" value="50"><br><br>
Document1
5
3/23/2016
Range
Lets the user enter a number using a slider.
<input type="range" name="points" min="1" max="10"><br><br>
Tel (telephone number)
Lets the user enter a phone number.
Cell phone: <input type="tel" name="cellPhone"><br><br>
Time
Lets the user enter a time (local, not universal).
Meeting time: <input type="time" name="meetingTime"><br><br>
URL
The url type is used for input fields that should contain a URL address. The value of
the url field is automatically validated when the form is submitted.
Enter your homepage: <input type="url" name="homepage"><br><br>
Giving hints
Adding placeholders
You can add a placeholder (hint) to a text box by using the placeholder attribute.
<label
<input
<label
<input
for="name">Name</label>
type="text" id="name" placeholder="Firstname lastname"><br>
for="phone">Phone</label>
type="text" id="phone" placeholder="(xxx) xxx-xxxx"><br>
Adding tool tips
You can also add tool tips by giving the title attribute a value.
<input type="text" id="phone" placeholder="(xxx) xxx-xxxx"
title="Enter your cell phone number"><br>
Setting the focus
You can set the focus (where the cursor goes when the page is opened) by using the
autofocus attribute. The autofocus attribute is a boolean. It is true if present, and
false if absent.
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"><br>
Document1
6
3/23/2016
Validation of input: stopping errors
Validation of the input can be done in two places: either the client side, or the server
side. You should always do server side validation. And if you do client side validation,
the user can identify input errors without waiting for a round-trip to the server.
Required fields
To make a field required, add the required attribute. Modify our existing first name,
last name, and email fields to make them required.
First name:<input type="text" name="fname" autofocus required><br><br>
Last name: <input type="text" name="lname" required><br><br>
E-mail: <input type="email" name="email" required><br><br>
Turning Validation off
If you want to test your server-side validation, you may want to turn client-side
validation off. You can do so by adding the novalidate attribute to the form tag.
<form novalidate>
Validating with regular expressions
HTML uses regular expressions. So does Word. Here is an overview of regular
expressions in Word: http://word.mvps.org/faQs/General/UsingWildcards.htm
Phone numbers
If you want the user to enter a phone number like this: 999-999-9999, use this
regular expression:
[0-9]{3}-[0-9]{3}-[0-9]{4}
If you want the user to enter a phone number like this: (999) 999-9999, use this
regular expression:
\([0-9]{3}\) [0-9]{3}-[0-9]{4}
The backslashes are required because the parentheses are special characters in
regular expressions.
If you want the user to enter a license number that consists of 3 digits followed by 3
capital letters, use this regular expression:
[0-9]{3}[A-Z]{3}
If you want to allow the user to enter a date where the format is mm/dd/yyyy
(meaning that the month and day must be 2 digits and the year must be 4 digits),
use this regular expression:
[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}
If you want to allow the user to enter a date where the format is m/d/yyyy (meaning
that the month and day can be 1 or 2 digits, but the year must be 4 digits), use this
regular expression:
Document1
7
3/23/2016
[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}
CSS for form fields
Validation
You can use CSS to help with validation. To change the border color of all required
input elements:
input:required{
border-color: red;
}
Focus
Highlighting the current element (the element with the focus)
input:focus{
background-color: yellow;
}
Styling input boxes
You can select input elements (or any other type of element) based on their
attributes. For example, to choose only those input elements that have a type
attribute with the value "text", use the following CSS selector:
input[type="text"]{
border-radius: 5px;
box-shadow:2px 2px 2px black;
}
Document1
8
3/23/2016