HTML Forms

Using Forms To Interact With Your Users

Forms are used to gather information from your users. A form is defined with the form element (<form>) and can contain many different elements with which to gather information from your users.

Forms have a couple of required attributes. The "method" and "action" attributes have to be assigned for a form to be functional.

<form action="mailto:me@myemail.com" method="post">

  Email Address: <input type="text" name="email_address" /><br/>
  Full Name:<input type="text" name="full_name" /><br />
  Password: <input type="password" name="password" />
	
  <p><input type="submit" value="Submit" /></p>
</form>
	

The "method" attribute tells the form how to transmit the data. The possible values for the method attribute are "post" and "get". Using "post" transmits the data in the http request and is not visible to the user. Forms transmitted with the "get" method will show the transmitted data in the url. The most common and preferred method when submitting data is to use the "post" method.

The "action" attribute tells the browser what to do with the form. Most commonly you would use a server side language such as "PHP" to process the data and save it in a database, in which case you would set the "action" attribute to the url of the script that will process the form.

You can also choose to email the form data to your email address. This is an easy way for beginners to handle form data since it requires no additional scripting knowledge or server scripts to accomplish. To email the form data you would set the action attribute to "mailto:email@youremail.com"

Inputs (<input />)

There are many different types of inputs used in forms for gathering data. You define an input with the <input /> tag. Using the "type" attribute you define the type of input you want to use. The "name" attribute assigns a name to the input that can be used to reference the inputed value later.

Input Types

• Text - a single row text field
• Password - a single row text field that disguises user inputs
• Checkbox - buttons that can be used to select multiple choices
• Radio - buttons used to select one of the possible values
• Image - use an image as a button, assign the url of the image to use with the "src" attribute
• File - provides a text field and browse button for users to select a file to upload
• Hidden - allows you to apply unseen values to the form
• Submit - creates a button that submits the form
• Reset - creates a button that clears all values entered in the form.

<form action="mailto:me@myaddress.com" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Check Sports Your Interested In</legend>
    <input type="checkbox" name="Sports" value="Golf" />Golf <br />
    <input type="checkbox" name="Sports" value="Football" />Football<br />
    <input type="checkbox" name="Sports" value="Soccer" />Soccer<br />
    <input type="checkbox" name="Sports" value="Basketball" />Basketball
  </fieldset>
  <br />
  <fieldset>
    <legend>Your Sex</legend>
    <input type="radio" name="sex" value="Female" />Female<br />
    <input type="radio" name="sex" value="Male" />Male<br />
  </fieldset>
  <br />
  <fieldset>
    <legend>Upload Your Image</legend>
    <input type="file" name="image" />
  </fieldset>
  <br />
  <input type="hidden" name="MAX_FILE_SIZE" value="8400" />
  <input type="hidden" name="form" value="interests" />
  <div>
    <input type="submit" value="Submit Form" /> 
  </div>
</form>
	

File Uploads

You can add an input for the user to upload files with their form submission. To do so you must use the "enctype" attribute with the value "multipart/form-data" in the form tag. You should also add a hidden field that has a "name" attribute value of "MAX_FILE_SIZE" to limit the file size.

To actually upload a file you have to have a server side script to handle the upload. You can't actually do anything with the file without one. We are working on a script for you to use in our PHP Tutorials(coming soon).

Fieldset (<fieldset>) and Legend (<legend>)

The "fieldset" element groups parts of a form together with a box, while the "legend" adds a label to the group. This is handy if you want to distinguish different sections of your web page.

Text Areas

A textarea (<textarea>) is a multi-line text input. It allows users to enter more information than just a text input. You specify the size of the textarea with rows and columns. The textarea tag requires a closing tag.

<form method="post" action="mailto:me@myaddress.com">

  <fieldset>

    <legend>Enter Your Comments</legend>

    <div>
      <label for="name">Name:</label><br />
      <input type="text" name="name" /><br />
      <label for="comments">Comments:</label><br />
      <textarea cols="40" rows="10" name="comments" /></textarea>
    </div>
    
    <div>
      <input type="submit" value="submit" />
    </div>

  </fieldset>
</form>
	

Selection Menus

To create a drop down menu use the select element (<select>) to define the menu and the option element (<option>) for each value you wish to add to the menu. Use the "name" attribute in the opening select tag to reference the value of the selected option in the menu by your scripts or email. If you want a specific value to be preselected, use the blank "selected" attribute on the option element containing the value you want to be the default.

<form method="post" action="mailto:me@myaddress.com">
  <legend>Select Something</legend>

  <select name="something">

    <option>Select One</option>
    <option>This One</option>
    <option>That One</option>
    <option>The Other One</option>

  </select>

  <p><input type="submit" value="Send" />
</form>
	

Multiple Selections

If you want your users to be able to select numerous choices from a drop down menu, add the blank "multiple" attribute to the select tag. You can also add the "size" attribute, which will set how many options you want to be displayed before the user has to scroll. You can use the blank "selected" attribute to preselect a value here as well.

<form method="post" action="mailto:me@myaddress.com">
  <legend>Your Choice - hold control to select multiple choices</legend>
  <br />

  <select name="choices" multiple size="4">

    <option value="First" selected >Select One</option>
    <option value="Second">Second One</option>
    <option value="Third">Third One</option>
    <option value="Fourth">Fourth One</option>
    <option value="Fifth">Fifth One</option>
    <option value="Sixth">Sixth One</option>

  </select>

  <p><input type="submit" value="Send" /></p>
</form>