HTML Demonstration Page: Forms

A form is made up of a series of input controls which are displayed in a variety of ways on the screen. There are buttons to push, boxes in which text can be typed, pull-down menus, from which you can select an option, and checkoff boxes to select. Forms are completed when the visitor clicks on some type of select button to submit the information they have placed in the form

To take full advantage of forms, you should have a script, or program, that runs on the server that can process the information for you. We will not cover the creation of scripts because it involves learning some computer programming. This allows you to have the information placed into a database, to generate an automatic reply, or to have a particular file sent to the visitor

You can place as many forms as you want in a document

Creating forms: Basic markup

• <form></form> Each form must be enclosed with a paired tag. The form will be placed on the page in the same way an image would be; it doesn't have any generic layout characteristics, so you have to use other tags to get it where you want
• <action=> The form tag also must take an attribute, <action=>, that allows the information that is input into the form to be sent somewhere and processed. Typically, this will be the URL of a forms-processing application

  It would look like this:

  <form action="http://www.slis.indiana.edu/cgi-bin/sendit">

  The address /cgi-bin specifies a directory on the server where the forms processing programs are located. CGI stands for "Common Gateway Interface". sendit is the name of a program that might email a file to the user

  Note You must find out the correct address to use in the form action tag from your technical staff person or internet service provider. Do not use the sample address above! It will not work

• <method=> The form tag must take an attribute, <method=>, which provides instructions to the browser about where and how to send the information input into the form. <method=> can have two values. <method="get"> is the default option and will cause the information to be sent to a specific URL and appended to the bottom. <method="post"> is the second option and it causes the information to be sent separately to a specified URL. This one is more complex to use

  It would look like this:

  <form action="http://www.slis.indiana.edu/cgi-bin/sendit" method="post">

  Since we will not be discussing CGI scripting, which is a common method of processing the information that is sent to the server when the form is submitted, here is an option that can be used to have the information sent to you in an email message

  What you do is to set the action attribute of the form tag to a "mailto" URL rather than a standard http URL as in the example above. For example, if I wanted to create a form that would send the form data to my e-mail account, I would use the following markup:

  <form action="mailto:yourID@indiana.edu" method="post">

  When the information entered into this form is submitted, a mail message will be sent to the specified address containing the information in the format that the browser would send back to the web server. Be aware that this format is not easy to read

Creating forms: input mechanisms

When you are setting up a page with form elements, you can place text above and below the specific element. This is a useful way to provide instructions for the person filling out your form

• <input type="text"> This element is a text box, a rectangle that has a default size of 20 characters. You can add attributes that will change the length of the text box by specifying size="n", where "n" is the maximum number of characters that can be entered. This sets the length of the text box. You can also allow people to enter more characters than can be displayed in the text box by specifying the maxlength="n", where "n" is the maximum number of characters. The name= attribute allows you to identify the data as belonging to this input mechanism

  For example, to create a text box 30 characters in length which can accept up to 100 characters of input, you would use the following markup:

  <p>
  <form action="mailto:yourID@indiana.edu" method="post">
  Please indicate below why you like this class:
  </p>
  <p>
  I like this class because: <input type="text" name="Likealot" size="30" maxlength="100"></form>
  </p>

  It would look like this:

  Please indicate below why you like this class:

  I like this class because:

  NOTE: For the rest of the examples, the opening and closing <form> tags will be omitted. The assumption is that you use one set of tags for all of the <form> elements on the page

• <input type="password"> This element allows the user to input information which cannot be seen on the screen. The characters will be replaced by bullets or asterisks. It can take three attributes: name, which identifies the information when it is submitted, size="n", which determines the length of the text box in characters, and maxlength="n", which sets the maximum number of characters that can be entered in the text box.

  To set up a password text box that is 10 characters long and which allows a maximum of 10 characters to be input, you would use the following markup:

  <p>
  Please enter your password below:
  </p>
  <p>
  <input type="password" name="Password" size="10" maxlength="10">
  </p>

  It would look like this:

  Please enter your password below:

• <input type="radio"> This element is a radio button, which allows the user to make a selection from a number of options. Out of a listing of radio buttons, only one can be selected at a time. You may have as many as you want. Each radio button must have two attributes:

  • It must have a name, so that the selection can be sorted when the selection is submitted. The name will be the same for each radio button, since they are part of a set
  • It must have a value, which is the specific information that is submitted when the button is selected

  To set up a series of radio buttons, you would use the following markup:

  <p>
  Please indicate below how much you like this class
  </p>
  <p>
  <input type="radio" name="Likealot" value="A real lot">A real lot
  <input type="radio" name="Likealot" value="A way real lot"> A way real lot
  <input type="radio" name="Likealot" value="Totally a lot"> Totally a lot
  <input type="radio" name="Likealot" value="More than words can express">More than words can express
  </p>

  It would look like this:

  Please indicate below how much you like this class:

  A real lot A way real lot Totally a lot More than words can express

  Notice that in the markup, the text that you would like to appear alongside the radio button appears after the closing carat.

  To set up a series of radio buttons that are stacked horizontally (instead of arrayed vertically), you just have to add line breaks (<br>). You would use the following markup:

  <p>
  Please indicate below how much you like this book
  </p>
  <p>
  <input type="radio" name="Likealot" value="Real lot">A real lot<br />
  <input type="radio" name="Likealot" value="Way real">A way real lot<br />
  <input type="radio" name="Likealot" value="Totally">Totally a lot<br />
  <input type="radio" name="Likealot" value="More">More than words can express<br />
  </p>

  It would look like this:

  Please indicate below how much you like this class:

  A real lot
  A way real lot
  Totally a lot
  More than words can express
  

• <input type="checkbox"> This element is a check box, which allows the user to select one or more alternatives from the same listing of options. This element also takes the attributes name and value. The value is only sent to the server if the check box is checked

  To set up a series of check boxes, you would use the following markup:

  <p>
  Please indicate below how much you like this class. You may check as many boxes as seem appropriate:
  </p>
  <p>
  <input type="checkbox" name="Likealot" value="A real lot">A real lot
  <input type="checkbox" name="Likealot" value="A way real lot">A way real lot
  <input type="checkbox" name="Likealot" value="Totally a lot">Totally a lot
  <input type="checkbox" name="Likealot" value="More than words can express">More than words can express

  It would look like this:

  Please indicate below how much you like this class. You may check as many boxes as seem appropriate:

  A real lot A way real lot Totally a lot More than words can express

  You can also use the checked attribute to have one checkbox checked when the page is downloaded.

  Also, as explained above, you can set up a series of radio buttons that are stacked horizontally (instead of arrayed vertically), by adding line breaks (<br>) or paragraph breaks (<p>) in the form markup

• <textarea></textarea> This element is a text block, which allows the user to enter large amounts of text. It can be used to solicit more extensive comments from the user. It takes three attributes:

  • name, which is used when the information is submitted
  • rows="n",which specifies the height of the text block
  • cols="n", which specifies its width.
  • wrap="x", which is used to alter the display and transmission of text. The default is "off", which causes the text that is entered into the textarea box to be displayed and transmitted as a single line of text. You will have to scroll tothe right to read it

    However, this attribute can take two useful values:

    • wrap="virtual", which causes the text to wrap at the righthand edge of the box, so the person who is typing can see their work without scrolling. The text is transmitted in a single line, so you have to scroll to the right to read it
    • wrap="physical", which does the same as above and will transmit the text with the line breaks intact

  To set up a text block that is 10 rows high and 50 columns wide with physical text wrapping, you would use the following markup:

  <p>
  Please indicate in the box below how much you like this class. You may write as much as you want to:
  </p>
  <p>
  <textarea name="Likealot" rows="10" cols="40" wrap="physical"></textarea>
  </p>

  It would look like this:

  Please indicate in the box below how much you like this class. You may write as much as you want to:

  You can also place some text in the textarea box that will appear when the page is loaded or reloaded. The user will be able to delete this text if she wishes

  To set up a text block that is 10 rows high and 50 columns wide with physical text wrapping and text in place, you would use the following markup:

  <p>
  Please indicate in the box below how much you like this class. You may write as much as you want to:
  <p>
  <textarea name="Likealot" rows="10" cols="40" wrap="physical">
  This is a totally awesome class because...
  </textarea>

  It would look like this:

  This is a totally awesome class because...

• <select></select> This element is a menu, which allows the user to select one option from a predetermined number of choices. The opening select element can take three attributes
  • name, which will identify the menu when the information is submitted
  • size="n", which sets the number of menu choices that will appear when the user looks at the page
  • multiple, which overrides the default and allows the user to select more than one menu item

  These attributes must be contained within the opening select element

  To create the menu items, you use the option value= element. The value will identify the menu item when the information is submitted. After closing the option element, you then type the text that will be displayed for that menu item. When you are finished listing menu items, you close it with the /select tag.

  To set up a menu with six items, you would use the following markup:

  <p>
  Please indicate below how much you like this class:
  </p>
  <p>
  <select name="Likealot" size="4">
  <option value="Real lot">A real lot
  <option value="More">More than a real lot
  <option value="Real real lot">A real real lot
  <option value="Totally">Totally a lot
  <option value="Completely">Completely totally a lot
  <option value="Much more">More than words can express
  </select>
  </p>

  It would look like this:

  Please indicate below how much you like this class:

  A real lot More than a real lot A real real lot Totally a lot Completely totally a lot More than words can express

  Note that the browser displays a scroll bar if the number of menu options exceeds the value you have used for size. In addition, the width of the box is determined by the number of characters in the longest menu option Also note that you can give the option values shorter names than will appear on the screen. You need enough of a name so that you can link them to the appropriate selection, but you can make the name as short as you want

• <select name="Something"> You can also use the select and option tags to create pop-up menus. The use of the select tag identifies the form component as a menu and the option tag is used to place any number of items in the menu. What's interesting about the pop-up menu is that only one item is shown in the rectangle display. Notice that the browser will adjust the display size to the width of the longest menu item

  The size attribute is used to determine how many items will be displayed when the form appears on the page. size="1" means that one item will be displayed in the rectangle

  When the user places the cursor on the rectangle and clicks once, the rest of the options are displayed. Only one selection can be made with this type of form

  To determine which will be the first item displayed, you use the selected attribute with the option tag. The item that is paired with this tag will be the one to be displayed first

  To create a pop-up menu with seven items, one items displayed and the fourth one displayed first, you would use the following markup:

  <p>
  From the menu below, select one option that indicates how much you like this class.
  </p>
  <p>
  <select name="Like the class"size="1">
  <option value="real">I like it a real lot
  <option value="real real">I like it a real real lot
  <option value="totally">I like it a totally real lot
  <option selected value="more">I like it more than words can express
  <option value="even more">I like it even more than the last one
  <option value="best">It's the best in the world
  <option value="even better">It's the best in the universe
  </select>
  </p>

  It would look like this:

  From the menu below, select one option that indicates how much you like this class.

  I like it a real lot I like it a real real lot I like it a totally real lot I like it more than words can express I like it even more than the last one It's the best in the world It's the best in the universe

• <tabindex="n"> This is an attribute that allows you to determine the order in which a person moves through your form input elements if they use the tab key

  You assign a number between 0 and 32767 to each input element and the tab key moves the cursor from element to element in increasing numerical order

  For example, here is the markup for four text boxes. Using the tab key will move the cursor in this order:

  Box #1 --> Box #4 --> Box #3 --> Box #2

  Use the tab key to move from one text element to the next (start in Box #1)

  <p>
  <table>
  <tr>
  

  <td>Box #1: <input type="text" name="#1" size="30" maxlength="100" tabindex="1">
  Box #2: <input type="text" name="#2" size="30" maxlength="100" tabindex="4"></td>

  </tr>
  <tr>

  <td>Box #3: <input type="text" name="#3" size="30" maxlength="100" tabindex="3">
  Box #4: <input type="text" name="#4" size="30" maxlength="100" tabindex="2"></td>

  </tr>
  </table>

  It looks like this:

  Use the tab key to move from one text element to the next

  Box #1	Box #2
  Box #3	Box #4

• <accesskey=> This is an unpaired attribute that can be used to increase the accessability of your forms. It works by specifying a letter or number on the keyboard that can be used to initiate an action on the page, in this case, the selection of a form alternative.

  For example, to use <accesskey> with radio buttons, you would use the following markup:

  <p>
  Please indicate below how much you like this class. You may also select options by simultaneously pressing the alt key (PC) or the control key (Mac) and either a, b, c, or d:
  </p>
  <p>
  <input type="radio" name="Likealot" value="A real lot" accesskey="a">A real lot<br />
  <input type="radio" name="Likealot" value="A way real lot" accesskey="b" > A way real lot<br />
  <input type="radio" name="Likealot" value="Totally a lot" accesskey="c"> Totally a lot<br />
  <input type="radio" name="Likealot" value="More than words can express" accesskey="d">More than words can express<br />
  </p>

  It would look like this:

  Please indicate below how much you like this class. You may also select options by simultaneously pressing the alt key (PC) or the control key (Mac) and either a, b, c, or d:

  A real lot
  A way real lot
  Totally a lot
  More than words can express
  

  To make it work, the visitor uses the keyboard shortcut with the alt key on a PC and the control key on a Mac

• <optgroup>, </optgroup> This is a paired tag that allows you to have submenus. This provides a finer level of detail.

  This tag takes one attribute, <label="submenuname">. This will provide a title for your submenus.

  To set up a menu with two submenus, you use the following markup:

  <p>
  Please indicate below how much you like this class:
  </p>
  <p>
  <select name="Likealot" size="3">
  <optgroup label="Real lot">
  <option value="Real lot">A real lot
  <option value="More">More than a real lot
  <option value="Real real lot">A real real lot
  </optgroup>
  <optgroup label="More than a lot">
  <option value="Totally">Totally a lot
  <option value="Completely">Completely totally a lot
  <option value="Much more">More than words can express
  </optgroup>
  </select>
  </p>

  It looks like this:

  Please indicate below how much you like this class:

  A real lot More than a real lot A real real lot Totally a lot Completely totally a lot More than words can express

• <fieldset>, </fieldset>. This paired tag allows form elements, to be grouped together.. This makes a complex form easier to follow, especially for people using screen readers or other assistive devices.

  It can be used multiple times within a single form. Each grouping will be enclosed in a bounding box, that will set off the grouped elements.

  <legend>, </legend> This tag provides further textual information about the grouped elements and is used to provide a label for the fieldset. It can take the attribute <align> and two values, left and right (left is the default and its not needed).

  It looks like this:

  <fieldset>
  <legend>what you think about the class</legend>
  <p>
  Please indicate below how much you like this class
  </p>
  <p>
  <input type="radio" name="Likealot" value="A real lot">A real lot<br />
  <input type="radio" name="Likealot" value="A way real lot"> A way real lot<br />
  <input type="radio" name="Likealot" value="Totally a lot"> Totally a lot<br />
  <input type="radio" name="Likealot" value="More than words can express">More than words can express<br />
  </p>
  <p>
  From the menu below, select one option that indicates how much you like this class.
  </p>
  <p>
  <select name="Like the class"size="1">
  <option value="real">I like it a real lot
  <option value="real real">I like it a real real lot
  <option value="totally">I like it a totally real lot
  <option selected value="more">I like it more than words can express
  <option value="even more">I like it even more than the last one
  <option value="best">It's the best in the world
  <option value="even better">It's the best in the universe>
  </select>
  </fieldset>
  </p>

  It would look like this:

  What you think about class

  Please indicate below how much you like this class:

  A real lot
  A way real lot
  Totally a lot
  More than words can express
  

  From the menu below, select one option that indicates how much you like this class.

  I like it a real lot I like it a real real lot I like it a totally real lot I like it more than words can express I like it even more than the last one It's the best in the world It's the best in the universe

• <input type="image"> An image can be used as an input mechanism in a form. It works best with a cgi-bin script, but this is how it could work. When the user clicks on the image, the information is submitted

  The markup would look like this:

  Tell me how you feel today. Click on the most appropriate image. <p> <input type="image" name="Map" src="../Images/feelings.gif">

  It would look like this:

  Tell me how you feel today. Click on the most appropriate image.

  When you use a script, you can define the x and y coordinates to represent different information. In this example, the coordinates for each image would be defined

• <input type="hidden"> If there is information that you want to keep and pass to another form, you can use a hidden element

  If, for example, a person enters their name and address and you want to use that on another form they are filling out, you can pass the data with this markup. It requires a name, which describes the data being stored, and a value, which is the information.

  It would look like this:

  <p>
  <input type="hidden" name="NameAdd" value="Name and Address">
  </p>

  This string would not be seen by the user

• <input type="submit"> Now that you can use all these options to gather information, you have to provide the user with a way to get the information to you. You do this with an submit button. It can take an attribute value="text", which places text within the boundaries of the submit button. If you do not use this attribute, the default will be the text submit Query

  <input type="reset"> This button allows the user to clear the form, either to start over or to leave it blank. It can take an attribute value="text", which places text within the boundaries of the reset button. If you do not use this attribute, the default will be the text reset

  To create a submit button with the text "Send it already!" and a reset button with the text "Messed up, didn't you!", you would use the following markup:

  <input type="submit" value="Send it already!">
  <input type="reset" value="Messed up, didn't you!">

  It would look like this:

  These buttons are placed at the bottom of the form element (or at the bottom of the page, if the entire page involves forms

• You can use an image in a submit or reset button with the following markup (we'll have to use IE5 or Netscape 6 to see this, but it is cool, so...):

  <button type="submit" name="submit" value="submit" type="submit style="font: Times, Serif; size: 36pt>Let it rip!<img src="../Images/zippy.gif"></button>
  <button type="submit" name="submit" value="submit" type="submit" style="font: Times, Serif; size: 36pt align: center> Kill it!<img src="../Images/skull.gif" height="35"></button>

  It would look like this:

  Let it rip!

  Kill it!

Here is an example of a page that uses these forms elements.

And here is an example of a page that uses these forms elements along wiith a PHP script for processing the input.