Definition and Usage The type attribute specifies the input type of the element. Syntax <input type=" type " /> ...
Definition and Usage
The type attribute specifies the input type of the element.Syntax
<input type="type" /> |
| Parameter | Description |
|---|---|
| type | Optional. Specifies the type of input field.Note: This is not a required attribute, but it is recommended to include it. If omitted, most browser will still display a text field, but not all. Possible values:
|
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.<form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> |
How it looks in a browser:
Note that in most browsers, the width of the text field is 20 characters by default.
Button
A simple clickable button. This input type is mostly used together with JavaScript to activate a script.On its own, the button input does not really do anything:
<form action=""> Button: <input type="button" value="Click me" /> </form> |
Submit Button
The submit input type sends the form data to the specified URL (set in the form element action attribute)<form action=""> <input type="text" name="firstname" /> <input type="submit" /> </form> |
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.<form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form> |
How it looks in a browser:
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.<form action=""> <input type="radio" name="sex" value="male" /> Male <br> <input type="radio" name="sex" value="female" /> Female </form> |
How it looks in a browser:
Hidden
A hidden input type is not shown on the page. However, it can still be used to store a value. The it can contain a default value, or have it's value changed (or set when the page loads) by a script.<form action=""> <input type="hidden" name="hidden1" value="Example" /> </form> |
Password
The password input type is almost completely identical to the text field input. The difference is that characters displayed in this field are masked. The characters will be shown like stars (or circles, depending on the browser).This input field will mask the text to any onlookers, however, the form sends the data as plain text.
<form action=""> <input type="password" name="pass" value="example" /> </form> |
How it looks in a browser:
File
The file input type is used for file uploads.<form action=""> File: <input type="file" /> </form> |
How it looks in a browser:
The file upload attribute "accept" specifies what kind of files can be uploaded. However, it is poorly supported in all major browsers. It is recommended to use server side validation on file uploading.
Image
The image input type is used just like the standard submit button (described further up). Use this input type when you need something other than a standard button. Any image can be used as a button.By default, if no form action is specified, this input type sends the click coordinates of the image when activated.
When using this input type you must also specify the image url using the src attribute, and the alternate image text, using the alt attribute:
<form action=""> <input type="image" src="input_image.gif" alt="button" /> </form> |
Reset Button
The reset button clears all data from the form.Use this button carefully, as it can be an annoyance for users who accidentally activate this button.
In appearance the reset button is similar to the submit and button input types.
<form action=""> <input type="text" name="firstname" /> <input type="reset" /> </form> |
How it looks in a browser:
