CIS195 Web Authoring 1: HTML
Brian Bird

HTML Forms, Part 1

Introduction

Overview

  • Purpose of forms
  • Basic Form Elements
  • Fieldset and Legend Elements
  • Input boxes and form labels
  • Text Area Element

Purpose of forms

Forms allow users to enter data that can be processed by code that either runs in the browser (JavaScript) or that runs on the server (PHP, ASP.NET, Node.js, etc.)


Basic Form Elements

<form>
    First name:<br> 
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname">
    <br><br>
    <input type="submit" value="Submit">
</form>

Input element

The most common use of the input element is to enter text--this is the default use.

type attribute

Tye type attribute determines what kind of control will be shown in the browser. It has these possible values:

name attribute

This attribute defines the name of the field. It will be used in the name-value pair that is sent to the server.
<input type="text" name="lastname"><br>

value attribute

Use this to set a default value for an input element.
<input type="text" name="lastname" value="Stark"><br>

placeholder attribute

This attribute puts "watermark" text in an input element.
<input type="text" name="firstname" placeholder="First name"><br>

hidden attribute

This attribute makes an input element invisible.
<input type="text" name="lastname" hidden><br>

Focus

When you click on a control, it's outline will become bolder or show in some way that it has been selected. This is called giving it focus.
Using the tab key you can move from one control to the next in the form.

Terminology

Try it

Try it out on W3Schools


Fieldset and Legend Elements

<form>
    <fieldset>
        <legend>User's Name</legend>
        First name:<br>
        <input type="text" name="firstname"><br>
        Last name:<br>

        <input type="text" name="lastname">
      </fieldset>   
      <input type="submit" value="Submit">
</form>

Try it out on W3Schools


Label Element

Labels don't change the appearance of the form, but they:
  • Are semantic tags that make the purpose of the text above the input element clear to developers.
  • Provide a target for CSS formatting.
  • Are clickable if the for attribute is used (the for value must match the id of the input element).
  • Give focus to the associated control when the mouse pointer hovers over them.

Note: labels are in-line elements but, you can change them to a block element with the CSS display:block property.

<form>
    <label for="first">First name:</label><br> 
    <input type="text" name="firstname" id="first"><br>
    <label for="second">Last name:</label><br>
    <input type="text" name="lastname" id="second">
    <br><br>
    <input type="submit" value="Submit">
</form>


Text Area Element

The <textarea> element allows users to enter multiple lines of text.

The row and cols attributes determine the size.

The wrap attribute determines the type of line warp: hard or soft.

  • Hard: Carriage-return and line-feed character codes are inserted into the text where it wraps.
    Note: this doesn't seem to work in the current version of Firefox for Windows.
  • Soft: No caracter codes are inserted where the text wraps.
<label for="review">Describe the trail</label>   
<
textarea name="review" id="review" rows="3" cols="40" wrap="hard"></textarea>