The Input Element

The <INPUT> element
 
The most general type of control is the INPUT element. It is incredibly flexible, and can be used for many things depending on the type. The end tag is for the INPUT element forbidden. The attributes are:
 
name  This is the name that is associated with this data when it is sent to the script.
 
value  This is the value that is sent from this form field. This is mostly used with checkboxes.
 
alt  Alternate text that is associated with this form field
 
checked  This is a Boolean variable. It is used to indicate if a checkbox or radio button should be checked when the page is first displayed.
 
disabled  A Boolean variable that is used to indicate if a checkbox or radio button should be grayed out when the page is first displayed.
 
readonly  A Boolean variable that allows a text or password to be seen but not edited.
 
size  This attribute indicates the size of the text or password field when the page is displayed.
 
align  Left, right, center.
 
maxlenght  This is the maximum number of characters that will be accepted as data for the text or password field.
 
src  This is the URL of images for fields that have images associated with them.
 
usemap  URL of imagemap to be used for client-side imagemaps.
 
accept  This attribute is used for file uploads. This is the list of MIME types that will be accepted.
 
accesskey  This attribute is used to create a shortcut key for this form field. You can access a form field by pressing ALT and the letter given in the accesskey attribute.
 
type  This is the most important attribute. This attribute tell what this input field will actually be. There are several types:

text  This is a standard text input field. It can be used for collecting names, e-mails, addresses...
password  This is used if you want to accept data that is not displayed to anyone other. When creating a password field, you should include a second password field to confirm the password and a JavaScript to check if the passwords match.
checkbox  This type creates a checkbox that enables you to take yes or no answers. If the checkbox is checked, it will return the value from the value attribute to the script. If it is not checked no data is sent by this field.
radio button  This is similar to a checkbox. The difference is that radio buttons give the visitor a choice from a set of radio buttons. When one button of a set is checked than other buttons of that set can't be checked. You use the name attribute to create a set of radio buttons.
file  With this element you can enable visitor to upload files to your server. You should the enctype attribute in your form. The accept attribute of the INPUT element limits the MIME types that your server accepts.
hidden  Hidden fields are use to transfer data from one page to another. If you have a longer form one three pages for example, you don't want to ask your visitor every time for his name. For this purpose you use a hidden field. The good thing is that the hidden field doesn't show up on your page at all.
submit or reset  This creates a submit or reset button that either submits the form data to the action attribute of the form, or resets all the fields. You can specify what text appears in your button by setting the value attribute.
image  The image attribute creates a submit button that uses an image for the button. The image location is specified by the src attribute.
button  The button attribute creates a button that can be used to executes client-side script.
 
Here is an example that implements several input types:

name
password

Do you like this page
good
can be better
bad
 
Hit the submit button

 
or this submit button

<form>
name
<input name="name" type="text">
password
<input name="password" size="8" type="password">
Do you like this page
<input name="good" value="yes" type="checkbox">
<input type="radio" checked name="choice">good
<input type="radio" value="average" name="choice">can be better
<input type="radio" name="choice">bad
<input type="submit" value="Submit">
<input type="image" src="submit.gif" alt="Submit">
</form>

More controls......next page

 

Copyright © 2000, 2001 Proxima Design
Back Home Links e-Mail