HTML/CSS Forms

HTML/CSS: Forms

Form Basics | Selections | Styling Forms

Lesson Goals

Lesson

Goals

Video Lecture

Video

Lecture

Sample Code

Sample

Code

Lecture Slides

Lecture

Slides

Practice Problems

Practice

Problems

Files & Links

Files &

Links

Form Basics

Forms allow web sites to collect information from users. They are the first truly interactive piece of a website that we have built. That being said, with only HTML, forms will not do anything. They typically need javascript to interact with the users and a server side script (PHP, JSP, ASP, etc) to transfer data between pages. For now, we will be focusing on building forms that look nice, though they will not actually collect any information.

NOTE: It is important for all form elements to have BOTH an id and name attribute. The id's are used in JavaScript for validation and names are used when passed on to other pages.

The <form> tag is the parent tag for any form. All elements of the form must occur WITHIN the opening and closing form tags. The form tag has several attributes including id, name, method, and action.

The action attribute is used to direct users to a new page when they submit the form, like a thank you page or order summary.
The method attribute is the process in which the information is sent. The basic options are GET and POST. POST sends the information behind the scenes and GET appends the information to the address contained in the action attribute. When using GET, the variables and their values are visible to the user and can be accessed by JavaScript. POST variables are not visible and require a server side scripting language to access.

<form method='GET' action='targetPage.html'>
	<!-- form elements here -->
</form>

The Input Tag

The most common tag used in a form. It is a singleton tag so the appropriate use is <input /> The input tags most important attribute is type.

<form method='GET' action='targetPage.html'>
	<input type='email' id='useremail' name='useremail' size='50' maxlength='50' placeholder='email address' required='required' /> 
</form>

Here are descriptions of the attributes for the input tag. The bold attributes should be in every input tag:

type - the type of information you are taking from the user (text|email|phone|number|date|time|color|password|etc) - more information below
id - used for css styling as well as Javascript validation code. Must be unique on the page and should be self identifying. Can be the same value as the name. Is also used as the target for element labels.
name - used for sending information to server side scripts.. Must be unique in the form and should be self identifying
size - changes the size of an input box
maxlength - sets a maximum number of characters for a users input in an input box
placeholder - this HTML 5 attribute allows the programmer to enter sample text or directions that disappear when the element gains focus. This is different from a value.
required - this HTML 5 attribute forces the user to complete the information before the form is submitted (set required=required).
*value - the default value for the input * - not shown in code
*pattern - this HTML 5 attribute allows the use of regular expression pattern matching to force data into certain formats. See link for common patterns you can copy and paste. * - not shown in code

The type attribute of the input tag is what makes input so versatile. HTML5 added even more type values. Should an old browser try to access one of these types that it doesn't recognize, it will simply render the input as a basic text input (the default type) so users will still e able to enter their information. Below, you will find code examples of a variety of input type value with a brief explanation.

<input type='text' id='firstName' name='firstName' placeholder='First Name' />

single line plain text to be used for a variety of purposes (name, street address, etc).
Code Example:

<input type='password' id='pass' name='pass' placeholder='Password' />

same as text, but the characters are hidden from the user as they type
Code Example:

<input type='email' id='email' name='email' placeholder='email@location.com' />

only accepts information in the form of an email address. It does NOT check to see if the email is valid.
Code Example:

<input type='url' id='homepage' name='homepage' placeholder='Home Page Address' />

only accepts information in the form of a url - requiring http:// - It does NOT check to see if the url is valid or active.
Code Example:

<input type='date' id='meeting' name='meeting'  />

pops up a date picker in most browsers
Code Example:

<input type='number' id='age' name='age' placeholder='Age' min='1' max='110' />

only accepts numeric characters. Can be used in conjunction with the min, max and step attributes.
Code Example:

<input type='tel' id='homephone' name='homephone' placeholder='Home Phone'  />

places no formatting on the phone number (see pattern attribute below) but will trigger the phone input pad on some mobile devices
Code Example:

<input type='color' id='favColor' name='favColor'  />

Provides a color chooser for the user. This example is set to start with a default color of #0000ff(blue).
Code Example:

Labels

The <label> tag is used to label input elements with the desired content (sometimes instead of using a placeholder). The label tag has an attribute called for that is set to the id of the input element it is labeling. On some elements, using a label allows the user to toggle focus by clicking on the label as well as the component.

<label for='username'>Username:</label> <input type='text' id='username' name='username' />

Clicking on the input brings focus to the input box, allowing the user to type. Additionally, if the input does not have focus (no blinking cursor), clicking on the label brings focus to the input box due to the use of the for attribute.
Code Example -> Username:

Buttons

The <button> element creates a clickable button. Buttons can also be included on web pages NOT in a form. This capability, along with some javascript coding knowledge, allows for a variety of user interactions.

<button>Click Me<button>

ANY BUTTON IN A FORM AUTOMATICALLY ACTS AS A SUBMIT BUTTON. If the form has no action attribute, the current page will simply be reloaded; otherwise, the action target is loaded into the browser.

Selections

There is one basic decision to make when giving users selection choices: are the choices mututally exclusive or coexistable? Mutually exclusive choices are things that cannot happen at the same time - e.g. It CANNOT be both Monday AND Tuesday. On the other hand, coexistable options are things where multiple choices can be true at the same time - e.g. my favorite subjects are Math and Science. For each option, there are two ways to implement the choices:

Coexistable Options: Checkboxes or a list

Mutually Exclusive Options: Radio Buttons or a Dropdown

CheckBoxes (Coexistable)

Coding standards dictate that if you present a user with a set of checkboxes, they should expect to be able to select zero, one or more of those checkboxes. In other words, multiple options could be true at the same time (coexistable). Checkboxes use the input and label elements for creation. It is important that each checkbox have a unique id and name AND that each checkbox be assigned a value attribute for processing.

<input type='checkbox' id='pepperoni' name='pepperoni' value='pepperoni' /> <label for='pepperoni'>Pepperoni</label>	
<input type='checkbox' id='sausage' name='sausage' value='sausage' /> <label for='sausage'>Sausage</label>
<input type='checkbox' id='onions' name='onions' value='onions' /> <label for='onions'>Onions</label>
<input type='checkbox' id='pineapple' name='pineapple' value='pineapple' /> <label for='pinapple'>Pineapple</label>

Choose your toppings:
Pepperoni
Sausage
Onions
Pineapple

Using the label element with the for attribute allows the word to also act as a clickable option. The value attributes are the information that will be sent along to the action target page.

Radio Buttons (Mutually Exclusive)

Radio buttons are used to allow users to select ONLY ONE item. Radio buttons are created using the input tag and type=radio. Radio buttons typically have a unique id and share a common name attribute, forcing them to be viewed as a button group, thus making the buttons mutually exclusive. If the radio buttons have different name values, then they will act like checkboxes. Radio buttons need values to be processed. Labels help with radio buttons the same way as with checkboxes.

<input type='radio' id='vader' name='favorite' value='vader' checked='checked' /> <label for='vader'>Darth Vader</label>	
<input type='radio' id='luke' name='favorite' value='luke' /> <label for='luke'>Luke Skywalker</label>
<input type='radio' id='leia' name='favorite' value='leia' /> <label for='leia'>Princess Leia</label>

Who is your favorite Skywalker?
Darth Vader
Luke Skywalker
Princess Leia

You can initially load a radio button or checkbox as checked using the attribute checked='checked' as shown in the Darth Vader radio input above.

Dropdown (Mutually Exclusive)

Dropdown choices use the <select> element. The select element is a paired tag, meaning it has an opening and closing part, like a div or span. The select tag gets the id and name and is then populated with <option> tags. Each option element represents a choice in the dropdown. Additionally, each option tag should have a value attribute, representing the value of the selection when processed.

<select id='favSky' name='favSky'>
	<option value='-1'>Choose your favorite Skywalker:</option>
	<option value='vader'>Darth Vader</option>
	<option value='luke'>Luke Skywalker</option>
	<option value='leia'>Princess Leia</option>
</select>

Note that the addition of a general option at the top (with value -1) allows the programmer to give a prompt without having to write any other text or labels. This is not required, but is an option.

List (Coexistable)

A list allows users to select multiple options as an answer. A list is coded exactly the same as a dropdown, except we add two attributes:

multiple='multiple' allows multiple things to be selected

size='4' generates the number of elements that will be displayed. If there are more, scrollbars are automatically applied

<select id='toppings' name='toppings' multiple='multiple' size='4'>
	<option value='pepperoni'>Pepperoni</option>
	<option value='sausage'>Sausage</option>
	<option value='onions'>Onions</option>
	<option value='pineapple'>Pineapple</option>
</select>

Choose your toppings:

Basic controls are:

Single click - select or de-select an option
Shift+Click - click on an item and then shift+click on another item to select all items between, inclusive.
Ctrl+Click - click on an item and ctrl+click on another item to select multiple, non-consecutive items.

Experiment with these controls on the example.

Styling Forms

Styling a form well is comprised of a solid HTML structure, supported by effective CSS styles (the same is true for styling pages as well).

Imagine that we want to get the following information from a user: full name, birthday, and home address (street, city, state and zip). This is a small form, but will still be better served by breaking the information up into parts. We will have two parts to our form:

Personal information: first name, last name, birthday
Contact information: street, city, state, zip

For ease of styling, each of those parts will utilize a section element (lines 2 & 8). Next, within each section, we will separate the lines using li (lines 4-6, 10-11) tags, as they are block level elements with a built in line break.

Within each li will be an input, either with a label or without (using placeholder).

<form method='GET' action='result.html'>
	<section>
		<h2>Personal Information</h2>
			<li><label for='firstName'>First Name:</label><input type='text' id='firstName' name='firstName' /></li>
			<li><label for='lastName'>Last Name:</label><input type='text' id='lastName' name='lastName' /></li>
			<li><label for='birthday'>DOB:</label><input type='date' id='birthday' name='birthday' /></li>
	</section>
	<section>
		<h2>Home Address</h2>
			<li><input type='text' id='street' name='street'  size='24' placeholder='123 My Street' /></li>
			<li> 
				<input type='text' id='city' name='city' placeholder='City' />
				<input type='text' id='state' name='state' placeholder='State' size='2' />
				<input type='text' id='zip' name='zip' placeholder='zip' size='5'/>
			</li>
	</section>
	<button >Submit</button>
</form>

Personal Information

First Name:

Last Name:

DOB:

Home Address

Since all of these items are inside the form tag, all of our styles will start with form, so that we don't affect other elements on the page. All of the styling below is simply suggestions, but shows how a form might be styled. Feel free to create your own styles using your knowledge of CSS.

form{
	width:50%;
}

Sets the width of the form to only take up half of the page.

form section{
	background-color:#f1f1f1;
	padding:10px;
	margin-bottom:12px;
	border-radius:5px;
}

Gives each section its own background color, padding between the borders and content, space below it to avoid the need for line breaks and slightly rounded corners.

form section h2{
	background-color:#4494c9;
	color:#ffffff;
	font-size:1.1em;
	padding: .3em .1em;
	border:solid 1px #d4d4d4;
	border-radius:5px;
	text-transform:uppercase;
	text-shadow:#9fbeb9 1px 1px 1px;
	box-shadow: #cccccc 3px 3px 3px;
}

Styles the section headings, giving them their own backround color, border, and makes the font size slightly larger. Addtionally, the shadow styles (not required in this course) provide drop shadows on the text and on the box.

  form section li{
	list-style:none;
	margin:5px;
  }

Styles the lines (controlled by li) to have no list style on them and to have some space (5px) around them, specifically on the top and bottom, but it also causes a slight left indent.

At this point our form looks as follows:

These forms are not responsive and will look best on larger devices.

Personal Information

First Name:

Last Name:

DOB:

Home Address

form section li input{
	  border-radius:5px;
  }

Rounds the edges of the input boxes.

form section li label{
	display:inline-block;
	width:80px;
	text-align:right;
	padding:3px 6px;
	font-family:Arial;
	font-size:.9em;
}

Allows the label and input to be on the same line while giving the label box properties (display:inline-block). Also, by setting a width on the label element, we get the inputs boxes to line up vertically.

form button{
	border:  solid 3px #444444;
	background-color: #4494c9;
	color:white;
	border-radius:5px;
}

Styles the button to not be boring gray with square corners.

  form button:hover{
	border-color:#666666;
	background-color:#66B6EB;
  }

Creates a rollover effect on the button.

Our final form looks like this:

Personal Information

First Name:

Last Name:

DOB: