Forms - Text

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Forms
         How forms are sent
         Input field
         Buttons
         Input types
         Fieldset
         For more help...
         You try it
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
Text:
So far you've seen the plain <input> tag. This tag is actually a text tag, and you really should define it as such. Here's how you would do that:
<input type="text">
Now that you have this tag, you can modify it. The first thing you can add is a name. This name will help you when the form is sent to you. In an e-mail, if you see the word "lobster" it might not tell you anything, but if the name of the blank was "pet" and "lobster" was entered, it would tell you much more. Here's how that would work:
Code
<form method="POST" action="mailto:myaddress@mail.com">
What kind of animal makes the best companion?
<input type="text" name="pet"> <br>
<INPUT TYPE=submit VALUE="Press me!">
</form>
What you see
What type of animal makes the best companion?

You can also change the size of this box. The default size will hold twenty characters in view, but many more can be typed. (Try it - maybe with rhinoceroci-potamous-aphant.)To change the size of the box, you simply add a size command inside the input line. Let's say we want a box only ten spaces long. Here it is:
<input type="text" size="10" name="birthday">
Another thing you can do is specify the maximum length of a response you'll accept in the blank. This can be shorter or longer than the size of the blank. Suppose you wanted a birthday with month, day and year, and wanted someone to input it as mm/dd/yyyy. Counting the slashes, that is ten characters long. Here's how to set the "maxlength" feature:
<input type="text" size="10" name="birthday" maxlength="10">
One more thing you can add. Would you like to have something in the box already? Perhaps the word "Birthday" already in there? This is done by specifying a "value" in the box. Here's how that is done.
<input type="text" size="10" name="birthday" maxlength="10" value="Birthday">
When we put all those together, this is what we see:
Code
<form method="POST" action="mailto:myaddress@mail.com">
What is your birthdate?
<input type="text" size="10" name="birthday" maxlength="10" value="Birthday"> <br>
<INPUT TYPE=submit VALUE="Enter">
</form>
What you see
What is your birthdate?


That's how to do a text input field. Next, we go to checkboxes. Yeay.
  1. Text
  2. Checkboxes
  3. Radio Buttons
  4. Passwords
  5. Hidden
  6. File
  7. Image
  8. Textarea
  9. Select and Option
Back Home Forward