DEV Community

Cover image for More on input tag!
Dilshad0404
Dilshad0404

Posted on • Updated 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)