back to the Agenda | Assignment #6

Making Pages Interactive

Many pages on the web have buttons to click, textboxes to type into, and menus to choose from. The front-end for forms can be written using HTML. (We will be using PHP later in this course to use the submitted data.) Below you will find examples of each type of form element. Read this page both in its 'normal' view and read the source code for this page. There are comments contained within the source code to help you.

Inputting Text

This is a textfield named nickname, 35 characters wide (the default is 20), and is filled initially with the warning,"Do NOT enter your nickname".


This is a password field. When you type in it, it shows bullets rather than the letters you typed. Notice in the code that it has a maxlength property that will not allow you to type more than 8 characters.

Special Types of Inputs!

HTML5, which is 'relatively recent', added some super sweet new "type"(s) for input elements, including:
  1. number -
  2. date/datetime
  3. email
Check these out online when working on this assignment. Make sure you look at the source code to also see some of their attributes!

This input space is called a text area. You can specify the visible size by using rows= and cols=. You would generally want the text typed into the box to wrap. Be sure to use the /textarea tag.

Making Choices

What is your favorite instrument?
Drums
Flute
Piano
Recorder
Trumpet

Above is a selection construct called "radio buttons". Click on one of the selections and a dot appears before it. If you click on another one, the dot disappears from the first. This insures that only one choice can be made. If you want one of the choices to be the default, checked is added within the input tag. If you wanted to ask a question that has more than one answer, you would use the check box construct below.



Which of these instruments do you like?
Check all that apply:
Drums
Flute
Piano
Recorder
Trumpet


Notice when you click on one of the boxes, the check remains. You can remove it by clicking on it again.

To create a drop-down menu, you use the the "select" type. Like the textarea above, you have both a begin and /end tag. Each option has a value and the one to be displayed has the word "selected" included in the option tag.



Which name is easiest to spell for you?

LET'S THINK

How to know when to choose between radio buttons and a dropdown!?
(PS. There is a way to select MORE than one option in a dropdown - we'll talk about that in the future.)

Clicking Buttons

Finally, you can place buttons on your page. They can be used to submit the information on the page or reset the page (return the form to its original state). The first button below will create a message and the second will reset the form. I've put them in a table here BUT!!! that generally is NOT what we want to do. Rather - we'll want to use the Boostrap grid system. (Coming soon. :p)

Assignment 6

For this assignment:
  1. Choose a topic from your special interests mentioned earlier in your HTML pages and create a questionaire/survey.
  2. Use at least six of the special input elements from forms.
  3. There should be places to enter text, choices and a reset button.
  4. Save this page as a6.htm and link it to your third page by putting a link on an invitation to take the survey.