different input type in html

Types Of Input

Text type

code


         <form>

  First name:<br>

  <input type="text" name="firstname">

  Last name:

  <input type="text" name="lastname">

</form>

password type

code


        <form>

  User name:

  <input type="text" name="username">

  User password:

  <input type="password" name="psw">

</form>

submit type

code


        <form action="/action_page.php">

  First name:

  <input type="text" name="firstname" value="Submit">

  Last name:

  <input type="text" name="lastname" value="Type">


  <input type="submit">

</form>

Reset Type

code


        <form action="/action_page.php">

  First name:

  <input type="text" name="firstname" value="Reset">

  Last name:

  <input type="text" name="lastname" value="Type">


  <input type="submit" value="Submit">

  <input type="reset">

</form>

Upload A File

code


      

  <input type="file" name="upload" required>

Radio Type

code


      <form>

  <input type="radio" name="gender" value="male" checked> Male

  <input type="radio" name="gender" value="female"> Female

  <input type="radio" name="gender" value="other"> Other

</form>

Checkbox Type

code


    <form>

  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike

  <input type="checkbox" name="vehicle2" value="Car"> I have a car 

</form>

Button Type

code


        <input type="button" onclick="alert('Hello World!')" value="Click Me!">

Color Type

code


      <form>

  Select your favorite color:

  <input type="color" name="favcolor">

</form>

Date Type

code


     <form>

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31">

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02">

</form>

Datetime-local Type

code


     <form>

  Birthday (date and time):

  <input type="datetime-local" name="bdaytime">

</form>

Email Type

code


        <form>

  E-mail:

  <input type="email" name="email">

</form>

Month Type

code


       <form>

  Birthday (month and year):

  <input type="month" name="bdaymonth">

</form>

Number Type

code


     <form>

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

</form>

Range Type

code


     <form>

  <input type="range" name="points" min="0" max="10" step="2">

</form>

Search Type

code


      <form>

  Search Google:

  <input type="search" name="googlesearch">

</form>

Tel Type

code


        <form>

  Telephone:

  <input type="tel" name="usrtel">

</form>

Time Type

code


     <form>

  Select a time:

  <input type="time" name="usr_time">

</form>

Url Type

code


      <form>

  Add your homepage:

  <input type="url" name="homepage">

</form>

Week Type

code


    <form>

  Select a week:

  <input type="week" name="week_year">

</form>

Types of Input