The Input Types of Form
The <input> is the most important element of form. It is a single tag that means it has no closing tag. It is used to collect information from users. An input field can hold many types of value based on the type attribute.
| types of input | Description |
|---|---|
| text | Specifies an input field for one line text. |
| password | specifies the password field. |
| submit | Specifies a connection of the form with the server. |
| reset | Using for reset all of the values from the form. |
| radio | Species to select only one option from multiple options. |
| checkbox | Specifies to select multiple options. |
| button | Specifies a button. |
| image | Specifies a button in the form for image. |
| file | specifies to upload a file from device storage. |
Using input type text
<input type="text"> is used to specify a text field of one line.
Example:
Enter your name: <input type="text">
Enter your institute name: <input type="text">
</form>
Run Example
Attributes of <input type="text">
Here is some attributes which are used in the text type input field.
| Attribute | Description |
|---|---|
| type | Specifies the text as the input type. |
| name | Specifies a name for the element. It identifes the value of name attribute if it sent to a server. |
| size | Set a width for the text input control. |
| maxlength | Specifies the maximum number of characters, which is entered by a user in the text field. |
Using input type password
<input type="password"> is used to specify a field for a password.
Example:
Attributes of <input type="password">
Here is some attributes which are used in the text type password field.
| Attribute | Description |
|---|---|
| type | Specifies the password as the input type. |
| name | Specifies a name for the element. It identifes the value of name attribute if it sent to a server. |
| size | Set a width for the text input control. |
| maxlength | Specifies the maximum number of characters, which is entered by a user in the text field. |
Using input type submit
<input type="submit"> is used to create a submit button which make a connection with the server. The server page is connected through action attribute into the form tag.
Example:
Enter your name: <input type="text">
Enter your password: <input type="password">
<input type="submit" value="Submit">
</form>
Run Example
Using input type reset
<input type="reset"> is used to create a reset button which reset all the given value from the form.
Example:
Enter your name: <input type="text">
Enter your password: <input type="password">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Run Example
Using input type radio
<input type="radio"> is used to create a multiple option from where user can select only one option.
Example:
<input type="radio" value="CSE" checked>
<input type="radio" value="EEE">
<input type="radio" value="Architechture">
</form>
Run Example
Attributes of <input type="radio">
Here is some attributes which are used in the radio type field.
| Attribute | Description |
|---|---|
| type | Used to create a multiple option from where user can select only one option. |
| name | Specifies a name for the element. It identifes the value of name attribute if it sent to a server. |
| value | This attribute is used when the radiobox is selected. |
| checked | Used to checked one option by default. |
Using input type checkbox
<input type="checkbox"> is used to create a option, where user can select multiple options.
Example:
<input type="checkbox" value="Mango">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Grapes">
</form>
Run Example
Attributes of <input type="checkbox">
Here is some attributes which are used in the checkbox type field.
| Attribute | Description |
|---|---|
| type | Used to create a option from where user can select only one option. |
| name | Specifies a name for the element. It identifes the value of name attribute if it sent to a server. |
| value | This attribute is used when the checkbox is selected. |
| checked | Used to checked one option by default. |
Using input type image
<input type="image"> is used to create a button, which background is an image.
Example:
Using input type file
<input type="file"> is used to upload a file from device storage.
Example:
Attributes of <input type="file">
Here is some attributes which are used in the file type field.
| Attribute | Description |
|---|---|
| type | Used to store a file from device storage. |
| name | Specifies a name for the element. It identifes the value of name attribute if it sent to a server. |
| accept | The types of the file is specified by this attribute, which is accepted by the server. |