CIS195 Web Authoring 1: HTML
Brian Bird

HTML Forms - Part 1

Introduction
Overview
  • Purpose of forms
  • Form elements
  • Field sets and legends
  • Input boxes and form labels

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.)

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>

Try it out on W3Schools

Field sets and legends

<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

Form labels

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)
<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>