HTML PRIMER

by Jim Gordley
2008-2016

Introduction to Forms

Forms allow interaction with your web site. Collecting user information is key to keeping up with users of your web sit. If you have ever bought anything online then most likely you have used of form to provide information about you. Forms are made up of a variety of input fields. Each field is designed to collect specific information. Information enterd into theses fields is then processed by a web server.

SAMPLE FORM

First Name
Last Name
Gender     Male      Female
E-mail:
Your comments are welcome:

 

INPUT FIELDS
TYPE ATTRIBUTE APPEARANCE DESCRIPTION
text Accepts a single line of text.
password Accepts a single line of text. (Input appears as asterisks)
textarea Accepts multible lines of text.
checkbox Accepts single or multible check boxes.
radio Accepts only one option to be "pushed"
select Creates a drop down list of options.
submit Submits the form data for processing.
reset Clears all entries

Form Processing

In order for the information provided in the various form fields to be effective that information must be sent to the seeker. That is done via server side scripting. There are many different server side scripting programs. You will need to contact your IT professional or internet service company to install and run a server side script to process your form data.

When data is entered into a form field that data creates a name/value pair that is will be submitted for processing. Every input field has a name attribute the value of that name is the user input.

Creating Forms

Like we learned earlier with lists and tables all the input fields must be contained between the <form> and </form> pair.


The form tag has two required attributes, action and method.
The action attribute is given a URL of the form processor.

action="http://your.domain/cgi-bin/form processor"

The method attribute will be either post or get. The value of the action attribute should point to a program that is configured to process form results. Consult with your IT department or ISP, IPP to set up form processing on the server for your web site.

Input Fields

Using the <input> tag a varity of input fields can be created by using different values in for the type atrribute.

A promt should be provided so that the user understands what data should be placed in the form field.

promt <input type="type" name="var">
First Name: <input type="text" name="fname">

First Name:

Submit and Reset Buttons

Users need a way to submit the information they have provided in a form. A special input type has been created for that purpose, the submit button.

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

The value attribute is the text that will appear on the submit button. You can also provide a reset button that allows users to clear all form fields.

<input type="reset" value="Clear">

The value attribute is the text that will appear on the reset button.

CLASS LAB
CREATING A FORM
DO THISWHY YOU DID IT
  1. In the Unit 3 folder open order.html in both Notepad and Firefox.

  2. In Notepad scroll down to the ORDER FORM comment. Just under that comment place the following highlighted code.
    (Time saver you can copy and paste the code below into Notepad)

    <form action="myFormProsessor" method="post">
    First Name: <input type="text" name="Fname">
    </form>


  3. Save the changes and refresh the browser to verify your work.

  4. Add the following highlighted code

    <form action="myFormProsessor" method="post">
    First Name: <input type="text" name="Fname">
    <br/>
    Last Name: <input type="text" name="Lname">
    <br/>

    </form>

  5. Save the changes and refresh the browser to verify your work.

  6. Add the following highlighted code

    <form action="myFormProsessor" method="post">
    First Name: <input type="text" name="Fname">
    <br/>
    Last Name: <input type="text" name="Lname">
    <br/>
    <br/>
    E-mail address: <input type="email" name="email">
    <br/>

    </form>

  7. Now add a submit button.

    Save the changes and refresh the browser to verify your work.













  8. Creat a reset button that displays CLEAR FORM

    Save the changes and refresh the browser to verify your work.

  9. On the browser page enter text into each of the form fields. [DO NOT SUBMIT THE FORM]

  10. Press the CLEAR FORM button.

To edit and view the order.html file


Adds the code needed to create a form with one input field.














Adds a second input field to the form.














Adds an email field to the form.















Adds a submit button to the form.


screen shot of browser page.
Your page should appear similar.




Adds a reset button to the form.






To observe the data entry process.


To observe how the form fields are cleared of any entries.

Radio Buttons

Radio buttons limit a selection to one of a group of selections. In the example below that group is Male or Female Each option in a radio button group will have the same name attribute but a different value attribute. In the example the difference in the input tag is the value attribute, one is value="male" the other is value="female"

<form>
Male<input type="radio" name="gender" value="male">
Female<input type="radio" name="gender" value="female"><br/>
<input type="reset" value="Erase Selection">
</form>

Male   female


Check boxes

Checkboxes allow one some or all selections from a group. Each input has a uniqe name attribute the value attribute can also be unique. In the small example below there are two checkbox options first is for overnight shipping. The name attribute is overnight the value attribue is yes The second (already checked) is Send me promotions, it has a name attribute of email, a value attribute of yes

There is another attribute. checked with a value of checked Using the checked attribute you can set default selections with both radoio buttons and checkboxes. The user can uncheck those defaults. If the reset button is used the default selections (those with the checked attribute with a value of checked ) will return to a checked state.

<form>
<input type="checkbox" name="overnight" value="yes">Overnight Shipping
<input type="checkbox" name="email" value="yes" checked="checked">Send me promotions<br/>
<input type="reset" value="Erase Selection">
</form>

Overnight Shipping   Send me promotions 

CLASS LAB
CREATING A FORM
DO THISWHY YOU DID IT
  1. In the Notepad order file. Under the e-mail field enter the following highlighted text.

    <br/>
    Gender: <input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female
    <br/>


  2. Save the changes and refresh the browser to verify your work.

  3. In the Notepad order file directly under the last radio button enter the following highlighted text.

    <br/>
    Gender:
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br/>
    I'd like to receive:
    <input type="checkbox" name="recipes" value="yes"> free recipes
    <input type="checkbox" name="catalog" value="yes"> the annual catalog

  4. Save the changes and refresh the browser to verify your work.









  5. Set the default for free recipies checked

    Save the changes and refresh the browser to verify your work.

    Click the free recipies option. Observe how the checkmark was removed.

    Click the Clear button. Notice how the free recipies is once again checked.

To edit the order.html file so that it has two radio buttons prompting users to indicate their gender.









radio button screen shot.
















checkbox screen shot.

Password Fields

On the surface password fields look like any other text input fields. When text is entered however it looks different. Instead of the text characters that are being typed the password field shows only asterisks.

Creating a password field is done by giving the type atrribute a value of password.

<input type="password" name="userpassword">

The value of the name attribute does not have to be userpassword. Like other input fields the value is a variable usually with a logical lable.

CLASS LAB
CREATING A FORM
DO THISWHY YOU DID IT
  1. In the Notepad order file. Just below the email field add the following highlighted text.

    <br/>
    Password: <input type="password" name="pass">


  2. Save the changes and refresh the browser to verify your work.









  3. Enter some text into the password field. Notice how the text you typed only showed up as asterisks.

    Click the Clear button.

To edit the order.html file to include a password field.





First Name:
Last Name:
E-mail address:
Password:
Gender: Male Female
I'd like to receive:
free recipes the annual catalog

Form Layout

You have probably noticed by now that our form is not aligned. Each text prompt causes the form to be mis-aligned vertically. Forms are easier for the user to read if all of the fields are aligned.

Aligning Input Fields

A table can be used to align the input fields. By placing the prompt in one cell and the input field in a separate on the same row. In the example below you can see that the input fields have text prompts of different sizes.


Name:
E-mail address:

Notice how the input fields are not aligned.

By using a table with two columns and three rows the alignment can be improved. Further alignment is accomplished by using the align attribute in the table cells. Notice the name prompt is aligned to the right.


Name:
E-mail address:
 

CLASS LAB
ALIGNING INPUT FIELDS
DO THISWHY YOU DID IT
  1. In the Notepad order file directlcy under the form tag build the following 8 row 2 column table.

       
       
       
       
       
       
       
       

    Table text

  2. Cut and paste the First Name prompt into the first cell on the first row.
    Cut and paste the <input type="text" name="Fname"> into second cell on the first row.


  3. Continue to cut and paste each prompt into the first cells of the table. Cut and past each input field into the second cells. One prompt per row and one input field per row.

  4. Use the second cell of the seventh row to paste the checkbox for the annual catalog.

    Use the second cell of the eighth row to paste the submit and reset buttons.

  5. Delete all of the left over <br.> tags that remain in the text below the table.

  6. Save the changes and refresh the browser to verify your work.

  7. Set the border width of the table to 0 (zero)

    Save the changes and refresh the browser to verify your work.

  8. Align all of the text prompts to the right side of the cell they are in.

    Save the changes and refresh the browser to verify your work.

  9. Close Notepad
To edit the order.html file and add a table to align input fields.










Select Lists

Select lists provide users with a drop down list of options. You have most likely seen while browsing the Internet or filling out a form. Take a look at the example below. It provides options for selecting a State.



The <select> tag is a container tag in between the opening tag and closing tag the <option value="...">. See the example below.

Credit Card:
<select name="card">
<option value="null" select="selected"></option>
<option value="disc">Discover</option>
<option value="amex">American Express</option>
<option value="visa">Visa</option>
<option value="mast">Master Card</option>
</select>

Credit Card:

By default the first option in a dropdown list will show in the input field. A default option can be assigned by using the select attribute with a value of selected. It makes no difference where in the list this option is positioned.

<option value="variable" selected="selected">Option Text</option>

CLASS LAB
SELECTION LSTS
DO THISWHY YOU DID IT
  1. From the Unit 3 folder open the feedback.html file with Notepad and Firefox.

  2. In Notepad scroll down and place your cursor just below the SELECT LIST comment and enter the following highlighted text.

    Get the text

    <select name="UserType">
       <option value="returning">returning customer</option>
       <option value="new">new customer</option>
       <option value="vendor">vendor</option>
    </select>


  3. Save the changes and refresh the browser to verify your work.

    Click the dropdown list.

    Select new customer

    Click the reset button (Clear)

  4. Make the default selection new customer

  5. Save the changes and refresh the browser to verify your work.

    Select any option other than new customer

    Click the reset button (Clear)

    Observe that the selection returned to the default selection of new customer
To both view and edit the feedback.html file.

Text Area

Comments, questions, feedback are all examples of when one line of text may not be enough. In cases where one line just won't do a <textarea> </textarea> will fill the need.

Creating a text area is accomplished by using the <textarea> </textarea>

Comments:<br/>
<textarea name="comment"></textarea>

Comments:

The example above creates a text area with deafault size settings. Text area size is controlled by using the rows and cols attributes. The text field can also be pre-populated with text for users to edit or delete by placing text between the opening and closing <textarea> tags

Comments:<br/>
<textarea name="comment" rows="15" cols="40">Type your comments here.</textarea>

Comments:


CLASS LAB
TEXT AREA
DO THISWHY YOU DID IT
  1. In Notepad under the FEEDBACK FIELD comment enter the following highlighted text.

    <textarea> </textarea>

    Save the changes and refresh the browser to verify your work.







  2. Modify the text area so that it has 6 rows and 34 columns.

    <textarea rows="6" cols="34"></textarea>

    Save the changes and refresh the browser to verify your work.

To edit the feedback.html file to include a text area field.

We value your feedback:



A default text area field appears.



We value your feedback:



The text area is expanded.

Controlling Input Field Width

The default size of any text input field is 20 monospaced characters. Mono spaced characters are those whose letters and characters each occupy the same amount of horizontal space. Courier is a common monospaced font. The size attribute sets the the visual width of the input field. Unlike other width controll instead of pixels the width is mono spaced characters.

<input type="text" size="30" name="fname">

NAME:      DEFAULT SIZE


NAME:      SIZE SET TO 30

CLASS LAB
SETTING INPUT FIELD WIDTH
DO THISWHY YOU DID IT
  1. In the Notepad feedback.html file enter the following highlighted text

    <td><input type="text" name="user" size="15"></td>

    Save the changes and refresh the browser to verify your work.

  2. Change the size of the Password field to 15.

    Save the changes and refresh the browser to verify your work.

  3. In the Notepad

To edit the feedback.html file, changing input field widths.

Observe how the Username field is now smaller than the Password field.

Controlling the Number of Characters

If a maximum length is not set for a text input field a user could add an unlimited number of character. This could lead to a very messy data set. By setting a maximum length you can controll the integrity of your data. For example if your intent is to collect a 5 digit zip code you could set the maximum allowable characters to 5.

ZIP CODE: <input type="text" name="zip" maxlength="5">

ZIP CODE:     DEFAULT SIZE


ZIP CODE:     SIZE SET TO 5




CLASS LAB
CONTROLLING NUMBER OF CHARACTERS
DO THISWHY YOU DID IT
  1. In the browser type enough characters into the Username field to fill the field past its default size.

  2. In the Notepad feedback.html add the following highlighted text.

    <input type="text" name="user" size="15" maxlength="15">

    Save the changes and refresh the browser to verify your work.

  3. In the browser attempt to enter more than 15 characters.

  4. Change the password field to a maximum of 8 characters.

    Save the changes and refresh the browser to verify your work.



  5. Close all open files.

To overfill the username field. Observe how the string of characters continue even though the field is full.
FORMS SUMMARY
TOPIC A You learned different input types, how to create a form with different input types.
TOPIC B You learned to use tables to align forms.
TOPIC C You learned how to create a option list and a text area. You learned how to control the size of input fields.


Independent practice activity

  1. From the Unit 3 folder open the formpractice.html file with Notepad and Firefox.

  2. Under the ACCOUNT INFO comment, create a new row with 2 cells.

  3. In the first cell add the text Account number. Align the cells text to the right.


  4. In the second cell creat a text input with a size of 14. Limit the number of characters to 14.
  5. Next to the existing option list, create a new option list with the following options.

    2016, 2017, 2018, 2019, 2020, 2021

    Name the option list "year".

  6. Copare your work to the example below.



First Name:
Last Name:
E-mail address:
Password:
Payment options: Visa Amex
Account number:
Expiration:
I'd like to receive: free recipes
the annual catalog


Fieldsets