Input elements

Input elements

·

2 min read

The <input> tag creates an input control that accepts data from the user. This form of input control facilitates users to input data and communicate with a website or application.

Types of <input> elements:

<input type="text">:

the input element of type "text" is used to define a single-line text field.

Example:

<input type="submit">:

The input element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.

Example:

<input type="password">:

The input element of type "password" allow a user to enter the password securely on a webpage. The entered text in the password field is converted into "*" so that it cannot be read by another user.

Example:

<input type="reset">:

The input type "reset" is also defined as a button but when the user performs a click event, it by default resets all inputted values.

Example:

<input type="radio">:

The input type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected.

Example:

<input type="checkbox">:

The input type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.

Example:

<input type="button">:

The input type "button" defines a simple push button, which can be programmed to control a functionally on any event such as a click event.

Example:

<input type="file">:

The input element with the type "file" is used to select one or more files from the user's device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.

Example:

<input type="image">:

The input type "image" is used to represent a submit button in the form of an image.

Example:

<input type="date">:

The input element of type "date" generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by the date picker interface.

Example:

<input type="URL">:

The input element of type "url" creates an input field that enables the user to enter the URL.

Example:

<input type="search">:

The input type "search" creates an input field that allows a user to enter a search string.

Example: