Using Controls

Of course, you can add many types of controls to an HTML page. Here, we will look at examples of using text box, password box, text area, check box, radio button, menu, and command button controls.

Text Boxes and Password Boxes

The following demonstrates using text and password box controls (see Figure 21-7).

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            UserName: <input type="text" name="username" value=""/> <br>
            Password: <input type="password" name="password" value=""/>
      </body>
</html>

Figure 21-7: A text box and password box added to an HTML page

With text box and password box controls, you set attributes to specify the number of characters allowed and the number of characters displayed. The size attribute determines the maximum numbers of characters that can be entered into the control. The maxlength attribute determines how many characters can be seen.

Text Areas

The text area control provides for a larger area of text than a text box. The following is an example of using a text area control (see Figure 21-8):

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            Comments: <br>
            <textarea name="Comments" rows="4" cols="55" wrap="">
            Enter Your Comments Here!
            </textarea>
      </body>
</html>

Figure 21-8: A text area added to an HTML page

Check Boxes

To add check boxes to an HTML page, use checkbox as the input type. The following is an example of using check boxes:

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            Who is the best Football Team: <br>
            <input type="checkbox" name="FootballTeams"
             value="Dolphins" check=""> Dolphins <br>
            <input type="checkbox" name="FootballTeams"
             value="Patriots" > Patriots <br>
            <input type="checkbox" name="FootballTeams" value="Jets" > Jets <br>
            <input type="checkbox" name="FootballTeams" value="Bills" > Bills <br>
      </body>
</html>

Radio Buttons

To add radio buttons, use radio as the input type. The following is an example of using radio buttons:

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            Who is the best Quarterback: <br>
            <input type="radio" name="Quarterbacks"
             value="Marino" check=""> Marino <br>
            <input type="radio" name="Quarterbacks" value="Manning" > Manning <br>
            <input type="radio" name="Quarterbacks" value="Montana" > Montana <br>
            <input type="radio" name="Quarterbacks" value="Griese" > Griese <br>
      </body>
</html>

Menu Controls

Use the <select> tag to display a menu and <option> tags to populate the menu. The following is an example of including a menu on an HTML page:

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            What is the best Color:<br>
            <select name="Colors">
                                 <option value="red"> Red</option>
                                 <option value="blue"> Blue</option>
                                 <option value="green"> Green</option>
                                 <option value="yellow"> Yellow</option>
            </select>
      </body>
</html>

Command Buttons

To add command buttons, specify the type of button, such as submit or reset, as the input type. The following is an example of using command buttons:

<html>
      <head>
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            <form enctype="text/plain" action="mailto:gmacbeth@comporium.net"
               method="post">
            <input type="submit" value="submit">
            <input type="reset" value="reset">
            </form>
      </body>
</html>