DEV Community

Ayebidun Ezekiel
Ayebidun Ezekiel

Posted on • Updated on

Types of html inputs

There are lot of html syntaxs for allowing inputs in our projects.
2day let take them one after the other for better understanding..

Text input

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

input:

Input are reserved word in html enclosed with the opening and closing tag (< >).

type:

Type is one of html attributes in html, they are generally use specify the type of input needed.

text:

Text is one of type_value for the input attribute Type. It's use for getting input data in form of strings or characters.


Number input

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

number:

Number is one of type_value for the input attribute Type. It's use for getting input data in form of numbers.


Email input

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

email:

Email is also one of type_value for the input attribute Type. It's use for getting email address. Other input aside a correct email address throw error.


Button

   <input type="button">
Enter fullscreen mode Exit fullscreen mode

button:

Button is also one of type_value for the input attribute Type. It's use for creating buttons


Password input

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

password:

Password is also one of type_value for the input attribute Type. It help to hide sensitive data.


Option input

   <input type="radio">
Enter fullscreen mode Exit fullscreen mode
   <input type="checkbox">
Enter fullscreen mode Exit fullscreen mode
   <input type="range">
Enter fullscreen mode Exit fullscreen mode

radio, checkbox and range:

They are type_value for the input attribute Type. It's use for getting multiple data at a time.


Color input

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

color:

Color is also one of type_value for the input attribute Type. It's use to get color value.


Url input

   <input type="url">
Enter fullscreen mode Exit fullscreen mode

url:

Url is also one of type_value for the input attribute Type. It's use for getting url as input data.


Date input

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

date:

Date is one of type_value for the input attribute Type. It's use for getting date as input from a form.


Media input

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

image and file:

These are also type_value for the input attribute Type. They are use for getting media data such as;

  • Music file
  • Image file
  • Document e.t.c

Top comments (1)

Collapse
 
ezekiel8807 profile image
Ayebidun Ezekiel

Always available for your question and contribution.