HTML Form Tutorial: Advanced Input Elements

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.

<< Prev: More input elements Javascript Form Handling Next: Advanced topics on HTML forms >>




HTML Forms
	HTML Form Tutorial
	The Form Tag
	The Form Submit Button
	Form design software
	How to make a web form
	Make web forms quickly, without coding

Javascript Form Handling
Basics
	Using getElementById to get the elements in a form
	Set value of form element using JavaScript
	Get value of form element using JavaScript
	Handling multiple forms using JavaScript
	JavaScript reset/clear a form
Advanced
	JavaScript Form Validation
	Submitting a form using JavaScript
	Can JavaScript Email a Form?
	Switching the form action field dynamically
	JavaScript Button

JavaScript Popup Windows
	The window.open method
	The window.close method
	More ...



. Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.