HTML Forms

HTML forms provide a mechanism for soliciting information from the user and sending it to the server. There are three main HTML elements for getting input from the user: input, select, and textarea. Each of these elements must have a name parameter which gives a name to the data that is sent to the server. The server will then use this name to determine how to handle the data. The input element
The input element has several variants including checkboxes, textfields, and file browers. We describe the most common variants below. All of these variants have the following form:

<input type=TYPE name="NAME" value="VALUE" size=SIZE> Observe that there is no close tag for the input element. The type attribute can have one of the following values: text, password, checkbox, radio, submit, reset, file, hidden, image, button.

The text and password variants create a textfield in which the user can enter characters. The initial size is SIZE characters and the textfield is initialized with the string of characters in "VALUE". The password variant displays asterisks for each character typed by the user.

The checkbox and radio variants create checkable buttons. If a button is checked, then its "VALUE" will be sent to the server. Several buttons can have the same name, in which case the server will receive several values for that name. The radio variant allows the user to check at most one of the buttons that share the same name.

The submit variant sends the data to the server when it is pressed and the reset variant sets all fields in the form to their initial values.

The last four are more specialized and won't be discussed in detail here: file is used for selecting a file on the users disk, hidden is an element that doesn't appear on the webpage (but still specifies a value to be sent to the server), image specifies a graphical submit button, and button is used for client-side scripting, which we do not discuss here.

HTML Live Demo --

<html>
 <body>
<h1>HTML Form Demo --- the input elements</h1>
   <form method="get" 
      action="../servlets/mailform.servlet">
     <input name="unetid" value="tjhickey" type="hidden">
     <input name="subj" value="demo" type="hidden">
     <input name="link" 
        value="../text/forms.html" 
       type="hidden">
     text: <input name="abc" value="demo" type="text"><br/> 
     password: <input name="pw" value="JB007" type="password"><br/> 
     submit: <input name="submit1" value="go for it" type="submit"><br/> 
     reset: <input name="reset" value="zero" type="reset"><br/> 
     image: <input name="imagesubmit" src="dew.jpg" width=100 type="image"><br/> 
     checkboxes:
      <ul> 
        <li> box a <input name="checkb" value="a" type="checkbox"></li>
        <li> box b <input name="checkb" value="b" type="checkbox"></li>
      </ul>
      radio buttons:
      <ul> 
        <li> radio a <input name="rad" value="a" type="radio"></li>
        <li> radio b <input name="rad" value="b" type="radio"></li>
      </ul>

</form>
</body>
</html>

Submitting the above form sends an email to the specified unet id, that lists the values of all of the parameters. A typical example is shown below: From: cs2a@brandeis.edu Subject: SUBJ:demo Date: September 22, 2004 8:35:22 AM EDT To: tjhickey@brandeis.edu The parameters and values are as follows: param:checkb "a" "b" param:subj "demo" param:unetid "tjhickey" param:imagesubmit.y "31" param:pw "JB007" param:link "../text/forms.html" param:abc "demo" param:rad "a" param:imagesubmit.x "48" The textarea element
This element is used for soliciting multiline input from the user, it has the form <textarea name=NAME rows=ROWS cols=COLS> initial text goes here </textarea> In addition to the name, you must specify the size of the textarea in rows and columns. The select element
The select element is used to provide a fixed list of choices from which the user must choose. It has the form: <select name=NAME size=SIZE multiple> <option value=V1> A1</option> <option value=V2> A2</option> ... <option value=Vn> An</option> </select> If the multiple keyword is present in the attribute list of the select element, then the user is allowed to select several of the options simultaenously; otherwise, the user can only select one. The value attributes in the option elements are sent to the server if the item is selected. If there is no value attribute then the text between the option tags is sent in its place.

HTML Live Demo --

<html>
 <body>
   <h1>HTML Form Demo -- textarea and select</h1>
   <form method="get" action="../servlets/mailform.servlet">
     <input name="unetid" value="tjhickey" type="hidden">
     <input name="subj" value="demo" type="hidden">
     <input name="link" value="../text/forms.html" type="hidden">

<h1>Demo of select and textarea form elements</h1>
    <input type="submit" name="sub" value="majors"><br/>
    <input type="submit" name="sub" value="minors"><br/>
    <br/>
     Choose your majors or minors:
     <select name="major" size=4 multiple>
        <option value="econ"> Economics</option>
        <option value="anth"> Anthropology </option> 
        <option value="cosi"> Computer Science </option> 
        <option value="biol"> Biology </option> 
        <option value="psyc"> Psychology </option> 
        <option value="neur"> Neuroscience </option> 
        <option value="fa"> Fine Arts</option> 
        <option value="musi"> Music </option> 
        <option value="math"> Mathematics </option> 
        <option value="chem"> Chemistry </option> 
     </select>
     <br/><hr/><br/>
    <br/>
    the end!
   </form>

Try modifying the example above to add a textarea input... <textarea name="comments" rows="15" cols="80" style="background:rgb(200,200,255)"> Enter Comments here: </textarea>