DEV Community

Cover image for More on input tag!
Dilshad0404
Dilshad0404

Posted on Edited on

More on input tag!

These are some types of input tag which are really helpful for developing amazing web pages (mostly in making forms or signup)

1. Type = "text"

<input type="text"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a simple box for text input, basically used only to insert texts.

2. Type = "password"

<input type="password"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a password field,where input text will show as "******".

3. Type = "email"

<input type="email"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a field for an e-mail address, senses automatically when submitted.

4. Type = "number"

<input type="number"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a field for entering number, where you can set
max - specifies the maximum value allowed
min - specifies the minimum value allowed
value - Specifies the default value.

5. Type = "color"

<input type="color"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a color picker option on the web page for user to change the color or background-color of any element on of DOM using javaScript (The default value is always #000000 (black))

6. Type = "file"

<input type="file"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a file-select field and a "Browse" button for file uploads(used for making forms).

7.Type = "date"

<input type="date"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a date picker,The field includes year, month, and day.

8. Type = "checkbox"

<input type="checkbox"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a checkbox for the users to check whether the option will applied or not.(used to make forms)

9. Type = "radio"

<input type="radio"></input>
Enter fullscreen mode Exit fullscreen mode


Defines a radio button for the users to choose which all options he wants to be applied.(used to make forms).

A BONUS TIP ABOUT A TAG WHICH EVERY DEVELOPER SHOULD KNOW ABOUT.

#PROGRESS TAG
The progress that is used to add a progress bar on a web page which is used to add a skill bar option on any portfolio.

<label for="skills">Designing Skills:</label>
<progress max="100" value="50"> </progress> 50%
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)