Forms

Forms are widely used to allow the user to input data.
This is a very important capability in some web pages.

The user can type into an input area or click to provide informtion.
The elements, where the user can enter information, are sometimes called controls.

Examples:
You filled out a form with personal data when you registered at De Anza.
You fill out a form when you order a book on-line, giving your shipping address and credit card number.

This data can be sent across the Internet to the web server, where it is processed.
It is also possible to do some processing within the user's browser, by using the JavaScript programming language.
Sometimes the processing is a combination of JavaScript processing in the user's browser, then additional processing in the web server.

In this course, we will build forms and form controls.
Processing the data is not covered in this course.

Within the  form  element, the following elements can be used to create a control, where the user can provide input:

• input    - Allows various types of user input.
• select   - Allows the user to select from a list of possiblilities.
• textarea - Allows the user to enter multiple lines of text.
• button   - Allows the user to click, to requist an action.

name attribute

Within the a form, each control element must have a name attribute in order for the element to be processed.
The name attribute values must be unique, except for radio buttons.
All radio buttons in the same set must have the same name.

The form element usually contains all the controls. If a control is not in a form, it cannot be processed by a submit or reset button. A submit button sends everything in the form to the web server, to be processed.

We will NOT be sending forms to a web server and processing the forms in this course. If we were really sending the forms to a web server, there are two very important attributes:

• method - Specifies how the data is sent to the server.
• action - Specifies the server program to process our form.

The method attribute must be method="get" or method="post". Usually method="post" is used.

The action attribute should specify the web server and its form processing program. For example:
action="http://www.example.com/cgi-bin/process-order.pl"
Where www.example.com is the web server domain name, cgi-bin is the directory containing the program, and process-order.pl is the name of the program which will process our form.

form example:
  <form method="post" action="http://www.example.com/cgi-bin/process-order.pl">
      Put the control elements here
  </form>

type of an input elements

The type of an  input  element is specified with the  type  attrubute in the  input  element. The following are values for the types of input:

• text     - Allows one line of text.
• placeholder - Shows a hint to the user before they enter text.
• password - Allows one password.
• checkbox - Provides one box, which can be checked.
• radio    - Provides one radio button, which can be checked.
• button   - Provides one button.
• submit   - Provides one submit button.
• reset    - Provides one reset button.

There are also many additional types of input controls in HTML 5:

The type of a  button  element is specified with the  type  attrubute in the  button  element. The following are values for the types of buttons.
You MUST use one of these three values for the type of a button, or significant problems may arise.

• button   - Same as an input button type.
• submit   - Same as an input submit type.
• reset    - Same as an input reset type.

We will look at the attributes of a  select  element, and the attributes of a  textarea  element, as we look at these controls.

input element with type="text"

An input element with type="text" will provide a text input control, which allows the user to type one line of text.
This type of input element should usually have the following attributes:
name      - some name that is unique within the form
size      - the number of characters shown in the input field.
maxlength - the maximum number of characters,
placeholder - hint for input, which will scroll if larger than the size.
Example:
  <input type="text" name="phone" size="14" maxlength="30" placeholder="your phone number" />

input element with type="password"

An input element with type="password" is exactly like type="text", except it shows *** on the screen when the user types. This prevents someone from reading over the user's shoulder, but provides no other protection.
Example:
  <input type="password" name="pwd" size="12" maxlength="12" />

input element with type="checkbox"

An input element with type="checkbox" provides a check box, which the user can click.
This type of input element should usually have the following attributes:
name  - some name that is unique within the form
value - the value sent if the box is checked.
You may also wish to have the box initially checked, by specifying the attribute and value:
checked="checked"
Example:
  <input type="checkbox" name="wrapping" value="gift-Wrap" />

input element with type="radio"

An input element with type="radio" provides a radio button, which the user can click.
Several radio buttons are used in a set of radio buttons that work together.
Only one radio button is selected within a set of radio buttons; if you select a new radio button, the one that was previously selected is automatically unselected.

This type of input element should usually have the following attributes:
name  - the name must be the same for all radio buttons in the set.
value - the value must be unique within the set of radio buttons.
Every radio button in a set must have the same name.
Every radio button in a set must have a different value.
You may also wish to have ONE radio button initially checked, by specifying the attribute and value:
checked="checked"
Example:
  <input type="radio" name="size" value="3T" />
  <input type="radio" name="size" value="4T" />
  <input type="radio" name="size" value="5T" checked="checked" />

Purpose of a text area

A  textarea  element is used with rows and cols attributes, to provide a multi-line text area.

textarea element required attrubutes

A textarea should have the following attributes:
name - some name that is unique within the form
rows - the number of rows in the text area.
cols - the number of characters in each row.
placeholder - hint for input, Any default text may be within the textarea container element.
Example:
  <textarea name="shipping" rows="6" cols="30" placeholder="shipping instructions"></textarea>
There are few places where extra space has an effect in html. The textarea element is an exception. Any space you put in the textarea element will show up as space before the initial position of the cursor.
To avoid this problem put the closing textarea tag immediatly after the opening textarea tag, with no space between them.

Now you are ready to build your lab 10 web page.
Follow the link on the left to read the lab 10 requirements and build your lab 10 web pages.

Next week we will begin using a new final project topic. You may now select a vacation destination, that is NOT in the state or country you have been using for your lab topic. ( You may include second and third choices, in case your first choice is not available. ) ( If you choose Hawaii, please choose one of the islands. )

You have built your lab 10 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 10 page.
Then, log in to Canvas and submit assignment 10. The submission should provide the following information:

• It should say that you have completed Lab 10.
• Your choices for your final project topic.

Read information that your find relivant from the book you selected.