Class 11

The Week’s Topics

Final Project assignment
Quiz 4 
Form best practices
HTML for forms
Styling Forms
HTML 5 Forms
Assignment: Create an HTML Form

Assigned Reading:
Chapter 5: Writing for the Web


Assignment 9: Due Monday, May 14

1. Create an HTML Form following the exercise in the notes below. Continue to build the rest of the form from the point we left off  in the class demonstration. Add the “Banana Info” and “Send it to us” sections. Modify the form so that’s it’s different than the form from the textbook.

For text file and background image:
Download this!  (left-click or control-click to download and save file to desktop)

For more information on how to download a zipped file:
http://www.ehow.com/how_5541697_download-zip-file.html

You should use a combination of the following resources:

This exercise is going to require that you find resources online to build and style the form. This is a great problem-solving exercise.

Upload your final files to your Class 11 folder up on the class server.

2. If you want to go the extra mile, embed a font(s) into your HTML form.

3. After reading through the Better Restaurant Websites, start researching restaurants and post the following to your WordPress site:

  • 2 poorly-designed restaurant websites
  • 2 well-designed restaurant websites

4. Choose a restaurant website to redesign for your final project.


Final Project Assignment

For final project assignment, see the final project page: http://www.classes.jamiecavanaugh.com/grdes66/final-project/


Quiz 4

Click here to take the Quiz


Forms

Best Practices
.
  • Think carefully about what data you need to collect, and how to ask for it.
  • Plan your form on paper first.
  • Be flexible in accepting different data formats.
20 Excellent examples of Forms

http://webdesignledger.com/inspiration/20-excellent-examples-of-forms-in-web-design

Step 1: The form tag
<form action="processing-script.php" method="post">

<!-- All your form contents go here -->

</form>
  • action: This attribute defines the server-side script that will process the data after it has been submitted (see the “Submitting the data” section later on), for example validating the data or storing it in a database.
  • method: Defines how the data will be submitted to the server-side script— the two possible values are post and get.

The “post” method submits post data inside the header of the request that is sent to the server when the data is submitted.

The “get” method” submits the data as name/value pairs inside the URL of the page upon submission. (When you are using the Web next, keep a lookout for big, long chains on the end of the URL you are browsing along the lines of: country=uk&city=London&shop=hairdressers.)

Step 2: Add your form elements

Single line text inputs

The most common form element you’ll use is the humble single line text input:

<li><label for="email">Email Address:</label> <input type="text" name="email" id="email" value=""></li>

The <input> element can take many different values for its type attribute, which can turn it into many different things; a value of text turns it into a single line text input.

The others are as follows:

  • name: This specifies the identifying name of the data entered into this form element after the form is submitted. It will be used during processing of the data, for example when inserting it into a database on the server.
  • value: Specifies a default value for the form element to contain once the form first loads in the browser. I have left mine blank, as I don’t want any default values in this case.
Checkboxes

If you want to give site visitors the option of saying yes or no to different options, you can include checkboxes for the user to toggle between checked and unchecked like so:

<li><input type="checkbox" name="peeling" id="peeling" value="peeling">
<label for="peeling">Peeling</label></li>
Radio buttons

Radio buttons provide the user with many options to choose from for a single value choice—you can only choose one option from those presented in each set. The name comes from old-fashioned radios or TVs, which had physical push buttons to press to choose the channels, only one of which could be depressed at a time.

<li>
<input type="radio" name="agerange" value="under18" id="au18"> <label for="au18">Under 18</label>
</li>

Tip: With radio buttons and checkboxes, there is a way to cause one (one or more in the case of checkboxes) of the choices to be selected by default when the form is first loaded in the browser. You simply include the attribute checked=”checked” on the <input> element.

File uploads

This next input type creates a file chooser so the user can choose a file to upload:

<input type="file" name="image_upload">
Multiple line text inputs

Sometimes you will want to collect textual data that spans more than one line, for example a biography, or a comment on a feedback form. The element to allow this—<textarea>—looks different from what we have seen so far:

<textarea name="banana_col" id="banana_col" cols="30" rows="6"></textarea>

The cols and rows attributes specify how many columns and rows in size the text input should be. Even though these values only set the size of the <textarea> on the screen, and don’t limit the amount of text the user is allowed to enter, you should still leave enough space to allow most users to say what they want to say without fi lling up the space and making scrollbars appear.

Drop-down selection lists

If you want your users to choose from a list of options, but you want to save space, a good choice is a drop down.

<select> list—by default it appears as a single line, but clicking causes it to expand to show the options it holds. If there are many options, a scrollbar will appear

<select id="country" name="country">
<option value="">Select country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<!-- Actual code has 245 additional options -->
</select>

The value attributes contain the data values of each option in the <select> list. Note the very top value, which has a blank value attribute and is labeled Select country. This is a common technique used to provide some more guidance for the user. You can guarantee that this option will always appear by default, as it is at the top of the <options> list.

Obviously for a <select> list of such magnitude, writing this out from scratch would be a huge task. I would advise you to use a ready-made template from a code-sharing site of some kind (feel free to adapt the one in my example.)

Improving accessibility with <label>

I have included <label> elements in the code, like so:

<li><label for="email">E-mail address:</label> <input type="text" name="email" value=""></li>
Adding structure with <legend> and <fieldset>

The final HTML feature I have used is a combination of <fieldset> and <legend> elements to structure the form into three logical groups of data: Login details, Personal details, and Banana info. This mainly serves to make data management easier, but it is worth doing for extra styling hooks and extra information also. <fi eldset> wraps each logical grouping, while <legend> provides the title, or heading, for each group:

<fieldset>
<legend>Login details</legend>
<!-- Rest of form section... -->
</fieldset>
Step 3: Be sure to add your Submit button
Submitting the data

This is the last <input> element type we’ll cover. The classic Submit button should always be found at the bottom of your form, and clicking it will send the data to the data processing file you specified in the action attribute of the <form> element

<input type="submit" value="Submit">

In this case, the value attribute controls the label on the button. You can have this set to anything you like but it is often a good idea to set it to something intuitive and appropriate to your form, such as Send email or Place my order.

Step 4: General styling for forms
General styling
body {
 font-size: 62.5%;
 font-family: Helvetica, Arial, sans-serif;
 line-height: 1.7em;
 }

#wrapper {
width: 480px;
margin: 0 auto;
}

h2 {
 font-size: 1.5em;
 }
Step 5: Aligning the labels and inputs
label {
 float: left;
 clear: left;
 width: 200px;
 text-align: right;
 }

input {
 margin-left: 1em;
 }

p {
 margin-left: 1.1em;
 }

li {
 list-style-type: none;
 margin-bottom: 15px;
 margin-left: -50px;
 }

Create The Banana Club Form

Before getting started
  1. Insert a wrapper in the body
  2. Add your h1 heading before the form wrapper
Step 1: The form wrapper
<form action="processing-script.php" method="post">

<!-- All your form contents go here -->

</form>
Step 2: Add your form elements

Add you fieldset first. This will create the first block of the form called Personal Information.

<fieldset>
      <legend>Personal information</legend>
      <h2>Provide your personal information</h2>
</fieldset>

Add unordered list for the text input elements for the Personal Information section.

Add the Provide your personal information fields based on this:

<li><label for="fname">First Name:</label> <input type="text" name="fname" id="fname" value=""></li>

Add the Select age range radio buttons based on this:

 <h2>Select age range</h2>
<li><input type="radio" name="agerange" value="under18" id="au18"> <label for="au18">Under 18</label></li>

Same for mailing address:

<h2>Mailing Address</h2>
<li><label for="address">Address:</label> <input type="text" name="address" id="address" value=""></li>
<li>...add others here...</li>
 <li><label for="country">Country:</label></li>
 <li>
 <select name="country" id="country">
 <option value="">Select country</option>
 <option value="AF">Afghanistan</option>
 <option value="AX">Aland Islands</option>
 <option value="AL">Albania</option>
 <option value="DZ">Algeria</option>
 <option value="AS">American Samoa</option>
 <option value="AD">Andorra</option>
 <option value="AO">Angola</option>
 <option value="AI">Anguilla</option>
 <option value="AQ">Antarctica</option>
 <option value="AG">Antigua And Barbuda</option>
 <option value="AR">Argentina</option>
 <option value="AM">Armenia</option>
 <option value="AW">Aruba</option>
 <option value="AU">Australia</option>
 <option value="AT">Austria</option>
 <option value="AZ">Azerbaijan</option>
 <option value="BS">Bahamas</option>
 <option value="BH">Bahrain</option>
 <option value="BD">Bangladesh</option>
 <option value="BB">Barbados</option>
 <option value="BY">Belarus</option>
 <option value="BE">Belgium</option>
 <option value="BZ">Belize</option>
 <option value="BJ">Benin</option>
 <option value="BM">Bermuda</option>
 <option value="BT">Bhutan</option>
 <option value="BO">Bolivia</option>
 <option value="BA">Bosnia And Herzegovina</option>
 <option value="BW">Botswana</option>
 <option value="BV">Bouvet Island</option>
 <option value="BR">Brazil</option>
 <option value="IO">British Indian Ocean Territory</option>
 <option value="BN">Brunei Darussalam</option>
 <option value="BG">Bulgaria</option>
 <option value="BF">Burkina Faso</option>
 <option value="BI">Burundi</option>
 <option value="KH">Cambodia</option>
 <option value="CM">Cameroon</option>
 <option value="CA">Canada</option>
 <option value="CV">Cape Verde</option>
 <option value="KY">Cayman Islands</option>
 <option value="CF">Central African Republic</option>
 <option value="TD">Chad</option>
 <option value="CL">Chile</option>
 <option value="CN">China</option>
 <option value="CX">Christmas Island</option>
 <option value="CC">Cocos (keeling) Islands</option>
 <option value="CO">Colombia</option>
 <option value="KM">Comoros</option>
 <option value="CG">Congo</option>
 <option value="CD">Congo, The Democratic Republic Of The</option>
 <option value="CK">Cook Islands</option>
 <option value="CR">Costa Rica</option>
 <option value="CI">Cote D'Ivoire</option>
 <option value="HR">Croatia</option>
 <option value="CU">Cuba</option>
 <option value="CY">Cyprus</option>
 <option value="CZ">Czech Republic</option>
 <option value="DK">Denmark</option>
 <option value="DJ">Djibouti</option>
 <option value="DM">Dominica</option>
 <option value="DO">Dominican Republic</option>
 <option value="EC">Ecuador</option>
 <option value="EG">Egypt</option>
 <option value="SV">El Salvador</option>
 <option value="GQ">Equatorial Guinea</option>
 <option value="ER">Eritrea</option>
 <option value="EE">Estonia</option>
 <option value="ET">Ethiopia</option>
 <option value="FK">Falkland Islands (malvinas)</option>
 <option value="FO">Faroe Islands</option>
 <option value="FJ">Fiji</option>
 <option value="FI">Finland</option>
 <option value="FR">France</option>
 <option value="GF">French Guiana</option>
 <option value="PF">French Polynesia</option>
 <option value="TF">French Southern Territories</option>
 <option value="GA">Gabon</option>
 <option value="GM">Gambia</option>
 <option value="GE">Georgia</option>
 <option value="DE">Germany</option>
 <option value="GH">Ghana</option>
 <option value="GI">Gibraltar</option>
 <option value="GR">Greece</option>
 <option value="GL">Greenland</option>
 <option value="GD">Grenada</option>
 <option value="GP">Guadeloupe</option>
 <option value="GU">Guam</option>
 <option value="GT">Guatemala</option>
 <option value="GG">Guernsey</option>
 <option value="GN">Guinea</option>
 <option value="GW">Guinea-bissau</option>
 <option value="GY">Guyana</option>
 <option value="HT">Haiti</option>
 <option value="HM">Heard Island And Mcdonald Islands</option>
 <option value="VA">Holy See (vatican City State)</option>
 <option value="HN">Honduras</option>
 <option value="HK">Hong Kong</option>
 <option value="HU">Hungary</option>
 <option value="IS">Iceland</option>
 <option value="IN">India</option>
 <option value="ID">Indonesia</option>
 <option value="IR">Iran, Islamic Republic Of</option>
 <option value="IQ">Iraq</option>
 <option value="IE">Ireland</option>
 <option value="IM">Isle Of Man</option>
 <option value="IL">Israel</option>
 <option value="IT">Italy</option>
 <option value="JM">Jamaica</option>
 <option value="JP">Japan</option>
 <option value="JE">Jersey</option>
 <option value="JO">Jordan</option>
 <option value="KZ">Kazakhstan</option>
 <option value="KE">Kenya</option>
 <option value="KI">Kiribati</option>
 <option value="KP">Korea, Democratic People's Republic Of</option>
 <option value="KR">Korea, Republic Of</option>
 <option value="KW">Kuwait</option>
 <option value="KG">Kyrgyzstan</option>
 <option value="LA">Lao People's Democratic Republic</option>
 <option value="LV">Latvia</option>
 <option value="LB">Lebanon</option>
 <option value="LS">Lesotho</option>
 <option value="LR">Liberia</option>
 <option value="LY">Libyan Arab Jamahiriya</option>
 <option value="LI">Liechtenstein</option>
 <option value="LT">Lithuania</option>
 <option value="LU">Luxembourg</option>
 <option value="MO">Macao</option>
 <option value="MK">Macedonia, The Former Yugoslav Republic Of</option>
 <option value="MG">Madagascar</option>
 <option value="MW">Malawi</option>
 <option value="MY">Malaysia</option>
 <option value="MV">Maldives</option>
 <option value="ML">Mali</option>
 <option value="MT">Malta</option>
 <option value="MH">Marshall Islands</option>
 <option value="MQ">Martinique</option>
 <option value="MR">Mauritania</option>
 <option value="MU">Mauritius</option>
 <option value="YT">Mayotte</option>
 <option value="MX">Mexico</option>
 <option value="FM">Micronesia, Federated States Of</option>
 <option value="MD">Moldova, Republic Of</option>
 <option value="MC">Monaco</option>
 <option value="MN">Mongolia</option>
 <option value="ME">Montenegro</option>
 <option value="MS">Montserrat</option>
 <option value="MA">Morocco</option>
 <option value="MZ">Mozambique</option>
 <option value="MM">Myanmar</option>
 <option value="NA">Namibia</option>
 <option value="NR">Nauru</option>
 <option value="NP">Nepal</option>
 <option value="NL">Netherlands</option>
 <option value="AN">Netherlands Antilles</option>
 <option value="NC">New Caledonia</option>
 <option value="NZ">New Zealand</option>
 <option value="NI">Nicaragua</option>
 <option value="NE">Niger</option>
 <option value="NG">Nigeria</option>
 <option value="NU">Niue</option>
 <option value="NF">Norfolk Island</option>
 <option value="MP">Northern Mariana Islands</option>
 <option value="NO">Norway</option>
 <option value="OM">Oman</option>
 <option value="PK">Pakistan</option>
 <option value="PW">Palau</option>
 <option value="PS">Palestinian Territory, Occupied</option>
 <option value="PA">Panama</option>
 <option value="PG">Papua New Guinea</option>
 <option value="PY">Paraguay</option>
 <option value="PE">Peru</option>
 <option value="PH">Philippines</option>
 <option value="PN">Pitcairn</option>
 <option value="PL">Poland</option>
 <option value="PT">Portugal</option>
 <option value="PR">Puerto Rico</option>
 <option value="QA">Qatar</option>
 <option value="RE">Reunion</option>
 <option value="RO">Romania</option>
 <option value="RU">Russian Federation</option>
 <option value="RW">Rwanda</option>
 <option value="BL">Saint Barthelemy</option>
 <option value="SH">Saint Helena</option>
 <option value="KN">Saint Kitts And Nevis</option>
 <option value="LC">Saint Lucia</option>
 <option value="MF">Saint Martin</option>
 <option value="PM">Saint Pierre And Miquelon</option>
 <option value="VC">Saint Vincent And The Grenadines</option>
 <option value="WS">Samoa</option>
 <option value="SM">San Marino</option>
 <option value="ST">Sao Tome And Principe</option>
 <option value="SA">Saudi Arabia</option>
 <option value="SN">Senegal</option>
 <option value="RS">Serbia</option>
 <option value="SC">Seychelles</option>
 <option value="SL">Sierra Leone</option>
 <option value="SG">Singapore</option>
 <option value="SK">Slovakia</option>
 <option value="SI">Slovenia</option>
 <option value="SB">Solomon Islands</option>
 <option value="SO">Somalia</option>
 <option value="ZA">South Africa</option>
 <option value="GS">South Georgia And The South Sandwich Islands</option>
 <option value="ES">Spain</option>
 <option value="LK">Sri Lanka</option>
 <option value="SD">Sudan</option>
 <option value="SR">Suriname</option>
 <option value="SJ">Svalbard And Jan Mayen</option>
 <option value="SZ">Swaziland</option>
 <option value="SE">Sweden</option>
 <option value="CH">Switzerland</option>
 <option value="SY">Syrian Arab Republic</option>
 <option value="TW">Taiwan, Province Of China</option>
 <option value="TJ">Tajikistan</option>
 <option value="TZ">Tanzania, United Republic Of</option>
 <option value="TH">Thailand</option>
 <option value="TL">Timor-leste</option>
 <option value="TG">Togo</option>
 <option value="TK">Tokelau</option>
 <option value="TO">Tonga</option>
 <option value="TT">Trinidad And Tobago</option>
 <option value="TN">Tunisia</option>
 <option value="TR">Turkey</option>
 <option value="TM">Turkmenistan</option>
 <option value="TC">Turks And Caicos Islands</option>
 <option value="TV">Tuvalu</option>
 <option value="UG">Uganda</option>
 <option value="UA">Ukraine</option>
 <option value="AE">United Arab Emirates</option>
 <option value="GB">United Kingdom</option>
 <option value="US">United States</option>
 <option value="UM">United States Minor Outlying Islands</option>
 <option value="UY">Uruguay</option>
 <option value="UZ">Uzbekistan</option>
 <option value="VU">Vanuatu</option>
 <option value="VE">Venezuela</option>
 <option value="VN">Viet Nam</option>
 <option value="VG">Virgin Islands, British</option>
 <option value="VI">Virgin Islands, U.S.</option>
 <option value="WF">Wallis And Futuna</option>
 <option value="EH">Western Sahara</option>
 <option value="YE">Yemen</option>
 <option value="ZM">Zambia</option>
 <option value="ZW">Zimbabwe</option></select>
 </li>
Step 3: Be sure to add your Submit button

Skipping this, you will do this for your homework

Step 4: General styling for forms
body {
 font-size: 62.5%;
 font-family: Helvetica, Arial, sans-serif;
 line-height: 1.7em;
 }

#wrapper {
 width: 480px;
 margin: 0 auto;
 }

h2 {
 font-size: 1.5em;
 margin-left: 0.8em;
 color: #a07701;
}
Step 5: Aligning the labels and inputs
li {
list-style-type: none;
margin-bottom: 15px;
margin-left: -50px;
}

label {
display: block;
float: left;
clear: left;
width: 200px;
text-align: right;

}

input {
margin-left: 1em;

}

p {
margin-left: 1.1em;
}

Fix Select

/* fixing the select drop down */

select {
margin-left: 10px;
width: 200px;
}

/* specific color rules */

fieldset {
background-color: #fbcb42;
margin-bottom: 20px;
border: 4px solid #a07701;
}

legend {
background-color: #a07701;
padding: 7px 10px 5px 10px;
font-size: 1.3em;
}

/* specific color for border of input boxes */

input, textarea, select {
border: 2px solid #a07701;
background-color: white;
}

/* specific color for border of input boxes when hover */

input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus {
background-color:#f7b704;
}

/* specify rounded corners for border of input boxes */

input[type=text], input[type=submit], input[type=file], input[type=password],
input[type=radio], textarea, legend, fieldset, select {
border-radius : 5px;
-o-border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
Lastly,

Add background image to body:

background-image: url(images/banana_bg.jpg);
Now, add the rest of the sections; the “Banana Info” and “Send it to us.”


Comments

  1. jamie May 6th


  2. Jeanette Simatauw May 7th

    Comment Arrow

    Hi Professor,
    What do you think of this websites for my final?

    http://www.thelobster.com/contact-the-lobster/gift.html

    or

    http://www.singaporesbananaleaf.com/

    Thank you

    Jeanette Simatauw


  3. Kristina Hanson May 8th

    Comment Arrow

    Hi Jamie,

    I uploaded my assignment 7 to the server. Just wanted to make sure I get credit for it, since I didn’t know I was supposed to upload it.

    Thanks!


  4. Jamie Cavanaugh May 9th

    Comment Arrow

    Thanks Kristina!


  5. jamie May 10th

    Comment Arrow

    Hi Jeanette,

    I think the Lobster restaurant would be a good one to redesign.


  6. hector rodriguez May 14th

    Comment Arrow

    I think i want to redesign this site. not completely sure just yet but this is in the lead: http://www.westendbistrodc.com/index.php


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66