HTML All Input Types

Shravan Vishwakarma
3 min readJul 10, 2022

--

  • <input type="button" value="click me">
    it is used for button elements value the attribute contains a string that is used as the button's label.
  • <input type="checkbox">
    It is used as a string representation with some value of the checkbox. and check the following example:-
    <form>
    <div>
    <input type=”checkbox” id=”subscribeNews” name=”subscribe” value=”newsletter”>
    <label for=”subscribeNews”>Subscribe to newsletter?</label>
    </div>
    <div>
    <button type=”submit”>Subscribe</button>
    </div>
    </form>
  • <input type="color">
    it is used to select a color or choose color…..you can add value to it like in the following:-
    <input type=”color” value=”#ff0000">
  • <input type="date">
    it is used to select a date and it provides a date picker UI also you need not add any CSS also.
  • <input type="datetime-local">
    It creates input controls that let the user easily enter a date and a time, including the year, month, and day as well as the time in hours and minutes.
datetime-local
  • <input type="email">
    it is used to let the user only enter an e-mail address
  • <input type="file">
    it is used to let the user upload file of any type.
  • <input type="hidden">
    it is used to let the developers include data that cannot be seen or modified by users when a form is submitted.
  • <input type="image">
    it is used to define an image as a submit button
  • <input type="month">
    it is used to let the user enter a month and year allowing a month and year to be easily entered.
  • <input type="number">
    it is used to let the user enter values in numbers.
  • <input type="password">
    it is used to let the user enter a password.
  • <input type="radio">
    it is used to let the user choose one input at a time.
  • <input type="range">
    <input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.
  • <input type="reset">
    The reset are rendered as buttons, with a default click event handler that resets
  • <input type="search">
    This input text field is designed for the user to enter search queries into.
  • <input type="submit">
    it is used to submit the form to the server.
  • <input type="tel">
    it is used to let the user enter a telephone number.
  • <input type="text">
    it is used to create basic single-line text fields.
  • <input type="time">
    it is used to create input fields designed and let the user easily enter a time (hours and minutes, and optionally seconds).
  • <input type="url">
    it is used to let the user enter and edit a URL.
  • <input type="week">
    it is used to create elements of type week input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).

--

--