Password input
Login screens usually have a password field where the user enters his password. You can create a password field by using the input type PASSWORD
A password field can be created using the following code:
<INPUT TYPE="PASSWORD" NAME="pwd">
The additional attributes you can use with the password input type are the following:
MAXLENGTH="maxChar"
the maximum length (in characters) the password can have
SIZE="charLength"
The length of the password field in characters
VALUE="textValue"
The default value that should appear in the password field.
"Hidden" input items
The 'hidden' input is not shown to the user. Instead you will provide the value of the field.
Usually, the hidden fields will contain configuration information for the server-side action script which handles the form data.
Example:
<INPUT TYPE="HIDDEN" NAME="admin-email" VALUE="me@myserver.com">
Image input type
You can use your own handsome images instead of the submit button to submit a form.
When the user clicks on the image, the form is submitted.
You can use the following code to create an image input item.
<INPUT TYPE="IMAGE" SRC="signup.gif">
The attributes you can define are:
SRC="image_url"
specify the URL of the image file to be loaded. You can specify
the relative URL to the image file.
NAME
Identifies the image that was clicked. In the case of image, the
co-ordinates of the location where the user clicked is passed in the form
image_name.x=x-coordinate and image_name.y=y-coordinate
Uploading a file.
You would have seen pages which allows the user to upload a file The FILE input is lets the user upload a file to the server.
Here is the syntax of FILE input type:
<INPUT TYPE="FILE" NAME="name" VALUE="filename">
NAME="name"
The name used to identify this file input item in the server side script.
VALUE="filename"
The default file name.
In most of the browsers, the FILE input will create a filename box with a 'Browse ...' button.
There is one more thing that you should do if you are using FILE input in your form.
You should include attribute 'ENCTYPE' with value "multipart/form-data" in your FORM tag.
Here is an example:
<FORM ENCTYPE="multipart/form-data" ACTION="/cgi-bin/getfile.cgi" METHOD="POST">
<P>File name: <INPUT TYPE="FILE">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
Button Input
A button appears in the form. You must specify JavaScript code as the value of the ONCLICK attribute to determine what happens when the user clicks the button. You can't use Button without the client side scripting language: JavaScript.
An example of using the button input type is given below:
<INPUT TYPE="BUTTON" OnClick="javascript:alert('Clicked');" VALUE="Click!">
This code displays a button with label "Click!". On pressing the button a message box
with message 'Clicked' is displayed.
Reset the form
The RESET input type can be used to reset the form. When the user presses the Reset button, all the elements in the form are reset to their default values.
Example:
<INPUT type="RESET" value="Reset the Form">
This code displays a button with label 'Reset the Form'. On pressing this button, all the elements in the form are reset to their default values.
|
|
