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 maximum length (in characters) the password can have
The default value that should appear in the password field.
The ‘hidden’ input is not shown to the user. Instead you yourself will provide the value of the field.
Usually, the hidden fields will contain configuration information for the server-side action script that handles the form data.
<input type="hidden" name="admin-email" value="firstname.lastname@example.org" />
Image input type
You can use your own beautiful images instead of the submit button to submit a form.
When the user clicks on the image, the form is submitted.
Use the following code to create an image input item.
<input type="image" name='signup' src="images/signup.gif" />
The URL of the image file to be loaded. You can specify the relative URL to the image file.
Identifies the image that was clicked. The co-ordinates of the location where the user clicked is passed like this:
You would have seen pages which allows the user to upload a file. The FILE input adds a file upload box to the form.
Here is the syntax of FILE input type:
<input type="file" name="name" />
The name used to identify this file input item in the server side script.
In most of the browsers, the FILE input will create a filename box with a ‘Browse …’ button.
While creating a form with file upload support, do remember to add an attribute ‘enctype’ wth value “multipart/form-data” in your <form> tag.
Here is an example:
<form enctype="multipart/form-data" method="post"> <p> Photo: <input type="file" name='photo' /> </p> <input type="submit" value="submit" /> </form>
An example of button is given below:
This code displays a button with label “Click!”. On pressing the button, a message box
with message ‘Clicked’ is displayed.
When the user presses the Reset button, all the elements in the form are reset to their default values.
The code below creates a reset button
<input type="reset" value="Start Over">
This code displays a button with label ‘Start Over’.
Previous part: HTML Form Tutorial Part II : More Input Elements