HTML Forms Quick Reference

THE FORM TAG

• Encloses a given form.
• There can be multiple forms on a page.
• Requires an action attribute: <form action="myform.php">
• The action determines what URL will be used for submitting the form to the server
• Also requires a method attribute: <form action="myform.php" method="post">
• The method determines whether HTTP GET or HTTP POST will be used for sending the form data to the server.
• You'll almost always use method="post"

INPUT TAGS

• Used for several different purposes including: single line text, checkboxes, radio buttons, submit buttons, file upload buttons, passwords, and hidden data.
• The type attribute determines which type of UI element it will be, for example: type="text", type="checkbox"
• The name attribute is also very important: <input type="text" name="username">
• The name attribute is sent to the server along with the value the user enters. Without it, the server won't know what the data is for.
• Yet another important attribute is: value. It holds the current value of the input field: <input type="text" name="username" value="Eastwood">

INPUT A SINGLE LINE OF TEXT

• For a single line of text use: <input type="text" name="username">
• Often you will want to initialize the input with an existing value. Using PHP that would look like this: <input type="text" name="username" value="<?php echo $username?>">
• Or, using PHP short tags (which I prefer): <input type="text" name="username" value="<?=$username?>">
• If the text is a password it's just like a single line of input text, except the browser will show asterisks instead of the password: <input type="password" name="password" value="<?=$password?>">

TEXT AREAS

• For multiple lines of text, use the <textarea> tag instead.
• Specify rows and columns to control the size:
  

  <textarea rows="5" cols="50" name="mytext">
  Some text
  </textarea>

• Looks like this:
  Some text
  

HIDDEN DATA

• Many situations arise where you need to put some hidden data in a form. Often this is a database key value
• Just use an input tag with type="hidden", and set the value attribute to hold the data: <input type="hidden" value="somevalue" name="my_hidden_data">
• You do also need to give it a name attribute so the server will know what this data is for.

SELECT TAG

• Select lets you have a pull down input element:
  

  <select name="mySelect">
      <option>Cat</option>
      <option selected="1">Dog</option>
      <option>Rabbit</option>
      <option>Turtle</option>
    </select>
  

• Produces this:
  Cat
  Dog
  Rabbit
  Turtle
  
  
• Notice how the default value was selected using the selected attribute.
• Later I will describe doing a select where you can select multiple options.

SUBMITTING THE FORM

• When the input is a submit button, the value attribute determines what is written on the button.
• Submit buttons always need a value: <input type="submit" name="Save" value="Save">
• Submit buttons can be represented by an image instead of a normal button. In that case type must be set to "image" instead of "submit", and the src attribute points to the image: <input type="image" name="Save" src="path/to/image.jpg">

RESET

• A 'reset' button clears all the form fields back to the state they were in when the page loaded.
• A reset button is coded as follows: <input type="reset">

Later I'll talk about how forms can be submitted with Javascript so that you can submit the form without leaving or reloading the current page.