Getting Started
Introduction
Perl IDEs
History
Advice
Tools
Mini-Tutorial
Tutorial
Code Snippets

Resources
Top Sites
More Tutorials
Books
Magazines
Articles
NewsLetters
Mailing Lists
NewsGroups
Forums
User Groups
Talk Shows
Blogs
Clothing

GBIC >> Perl >> Information Center Tutorials >> HTML Forms

Perl Information Center Tutorials - Forms
These tutorials were written to help you get a quick, but thorough, understanding of Perl - the scope of the language as well as it's specific capabilities.

Beginners Built-In Functions     Advanced CGI Applications

HTML Forms
HTML pages support forms which allow a user to submit data to a web server for processing. The form could be a purchase order, a service order, a go-do list, a comment, a question - anything the user might want to send to the owner of the web site.

HTML Form Basics
A form is created by using HTML tags to create input elements (text boxes, check boxes, etc.) between a pair of <form> tags. Other content can be placed between the tags, but only the information in the form elements will be submitted to the web server for processing.

There are four HTML form input elements:

  • <input>:         creates one of nine different input field types
  • <textarea>:   multi-line text box
  • <select>:       dropdown selection of values
  • <button>:       button (no data involved)

Since the <input> element can be used to display up to nine different elements, there are actually twelve ways in which a user can submit information to the server. Here's the HTML code and resulting form using one of each of these form elements, including each of the nine types of <input> form elements.

CodeResulting Form
<form>
  <input type=text value="Enter text">
  <input type=checkbox>Check me!
  <input type=radio>Select me!
  <input type=password value=123456>
  <input type=submit>

  <input type=reset>
  <input type=button value="Press Me">
  <input type=file>
  <input type=image src="ballblue.gif">
  <textarea>
      This is a multi-line textbox
  </textarea>

  <select>
      <option value=dog>Dog
      <option value=cat>Cat
  </select>
  <button>
      Press Me
  </button>

</form>
Input (text)
Input (checkbox)Check me!
Input (radio)Select me!
Input (password)
Input (submit)
Input (reset)
Input (button)
Input (file)
Input (image)
Textarea
Select
Button

There is also a hidden form element is similar to a text input form element, except that it is not displayed in the web page. It is submitted with other form elements when a Submit button is pressed. It is typically used where the web page author wants to return information to the server that does not need to be viewed or edited by the user.

Form Element Attributes
In today's browsers, HTML tags are considered objects whose attributes can be manipulated by various, embedded scripting languages (such as JavaScript or VBScript). To support identification of the tags (objects), all HTML tags support the name attribute. Additionally each of the form input elements also support a value property. When a form is submitted to the server the name and value of each form input element are sent to the server. See the next section for additional detail on submitting a form.

There are additional attributes supported by the four HTML form input element tags. Some of the most frequently used attributes are given in the table below. See the reference section for a complete listing of attributes.

  • <input>
    • name - name of this field
    • value - depends on type of field assigned to type attribute
    • size - width of text field
    • maxlength - maximum number of characters allowed in a text field
    • checked - status of a radio button
    • src - URL of image type
    • width - width of image type
    • height - height of image type
    • align - how text should flow around an image type
    • readonly - prevents user from changing contents/status of form element
  • <textarea>
      In the case of the <textarea> tag the text contained between the tag pairs is assigned to the value attribute for submittal to a server.
    • name - name of this field
    • cols - width of the field
    • rows - number of rows in the field
    • wrap - whether text wraps in the field
    • readonly - prevents user from changing contents
  • <select>
      In the case of the <select> tag the value of the selected option is assigned to the value attribute for submittal to a server.
    • name - name of this field
    • multiple - allows more than one choice to be selected
    • size - how many options to show
    • readonly - prevents user from changing contents
  • <button>
    • name - name of this field
    • value - text displayed on the button

Additional information on CGI scripts and transfer of form information to servers can be found on this site.

If you have any suggestions for additions to these tutorials, please let me know.