<INPUT>

Define an input field on a FORM

Element used within a form set to provide a space for user input.

   <html>
        <head>
        <title>A Simple Form</title>
        </head>
        <body>
           .
           .
        <form method="POST" enctype="text/plain" action="mailto:mrusk@radix.net">
        Your name please:<br>
==>>      <input type=text name=name size=50 maxlength=50><br>
        How did you find me?:<br>
        <select name=howfound>
          <option selected value="Best Friend">Best Friend
          <option value="Close Friend">Close Friend
          <option value="Friend">Friend
          <option value="Larry King">Larry King
          <option value="Grease Man">Grease Man
          <option value="Told Not to Come">I was told not to visit
        </select><br>
        Comments?:<br>
        <textarea name=comment wrap=virtual rows=5 cols=55>I love this site because...</textarea>
        <br>
==>>      <input type=submit value=Submit>
==>>      <input type=reset value=Clear>
       </form>
           .
           .
        </body>
        </html>

So there it is! A simple guest book entry form that ends up mailing you the entry. Unless of course the viewer is using Microsoft Internet Explorer. Too bad.

HTML 3.2 Final

There are a ton of different options set up for this field:

type: This attribute is used to set the type of input field.; =text is the default; This permits the entry of a single line of text in the field. It's size on the screen can be set with the size attribute. The field is scrollable, so if the user puts in more characters than the field displays then it starts scrolling in the direction the cursor is moving. If you've got to set an upper limit on the number of characters that can be entered then use the maxlength attribute. The label that is going to be attached to this field is created using the name attribute. If you want to pre-load the field with a string then you can use the value attribute to specify what displays when the screen is first loaded.; =password; Works just like the text field except the browser doesn't display what the user is keying when they make an entry in the field. The browser may display "*" or some other character to indicate keying but hide the actual value.; =checkbox; This type of field is used to set up some simple selections using check boxes. You can have a single field that is either selected or not. Or, you can have several fields that have the same name for selecting multiple entries for the same item. In the latter case, you would receive multiple entries for the name if the user selected more than one item. You might do something like this if you wanted to know "which of the following magazines do you read in the bathroom? (check all that apply)". In your e-mail you would have a little more information than you really needed to know. You can use the checked attribute if you want the box to be initially displayed as "checked".; =radio; This type of field is used when you want the user to select one, and only one, of a set of choices. You would have several input lines of the same type, using the same name but having different values. You could use the checked attribute to pre-select one on initial display. The browser takes care of making sure only one of the buttons is selected. As the user selects one, if there is another one selected it will be turned off.; =submit; This is the most important type of all. This is the button that makes it all happen! If you don't have one of these in your form then Hell will freeze over before you hear a peep from your viewers! You can give a value to be displayed on the button but you don't have much control over the appearance of the button. That's up to the individual browser. You could have several submit buttons on your page, each with a different name. This information would be passed along in your form data so you would know which button the user pressed to send you the data.; =image; I've never used this or seen this before. The spec says this works like a submit button but you give it a src attribute to tell it where to load an image from then when the user presses it you are given the x and y coordinates of where they pressed on the image. These are passed back on two separate lines using the name you've given the button with a .x attached to the x value and, yes, you guessed it, a .y attached to the y value. Sounds cool!; =reset; Put one of these on your form to let your viewer redisplay the form as it was first displayed. That's when they have second thoughts about all that mushy crap they've put in the comments field. A simple push of the button and you'll never know who loves you! You can specify the text on the button face by using a value attribute.; =file; This one's intriguing! I've never used it either. It looks like it might come in handy in some situations. It looks like there is a way to limit the types of files a user can send so you don't end up getting just anything. Like, maybe you just limit it to pictures so your viewers can attach a photo of themselves to the form. If I play with this and learn more about it I'll come back and fill in the details.; =hidden; This one's very useful. But don't try to get to secretive here because remember, there's always the "view source" option that'll expose anything you've put on your page. You can use this to pass back any kind of static information you want to get with the form. You may have a whole passle of forms and need to identify which ones you're receiving. You would bury the name of the form in one of these hidden fields and then you'd know!
name: Use this attribute to put an identifying label with the information the user enters. This is what will come back to you in the message. If the example, I would receive a line like name=John Doe.
value: Attribute used to assign an initial value to one of the fields or to provide labels for the submit and clear buttons.
checked: Use this attribute on checkbox and radio input types to show which ones should display as checked when the form is first displayed.
size: Use this attribute to control how big the field appears on the screen. I know it's tempting to be lazy and the let the browser display it as it wants. But it's really annoying to enter your company name in a field that's about 20 characters wide. I know it scrolls but it just doesn't seem right.
maxlength: If you really must restrict the length of the data entered to some finite value then specify the length with this attribute.
src: Only used with an image type button. Specifies the URL of the image to display.
align: Only used with an image type button. The values you can use are just like those for the img element - top, middle, bottom, left or right. The default is bottom.

Netscape

Now I don't quite know how I found this out but I did find that I could specify an input type=button. This gave me a blank button that I could put a label on and then make the browser do things if the button was pressed. I could specify "mouse" events like OnClick and then give commands like window.open and have it do things. But it doesn't work on all browsers. I think it's a java or javascript thingy. The drawback is that you have these neat buttons displayed but when they're pressed they don't do anything - oh well - if you want more details about it then you'll just have to write to me.

Microsoft Internet Explorer

Nothing special that I know of - yet.

Internationalization

Nothing special.

The Rusk Family . . . "the Legend Continues"

Michael T. Rusk
Comments to author: mrusk@radix.net