HTML Tutorials for Beginners to Advance

HTML Basic Structure, Elements in HTML, HTML Headlines, List in HTML, Insert Images in Web Pages, Tables in HTML, HTML form design, HTML5 Elements, HTML Canvas, etc.

HTML Input Types

<input type="text"> defines a one-line text input field:

The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted.

<input type="password"> defines a password field:

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<input type="submit"> defines a button for submitting form data to a form-handler.

<input type="reset"> defines a reset button that will reset all form values to their default values:

<input type="button"> defines a button:

This is how the HTML code above will be displayed in a browser:

See this example:

    First name:<br>
     <input type="text" name="firstname">br>  Last name:<br>
     <input type="text" name="   lastname">
     <input type="email" name="email">
    User password:<br>
     <input type="password" name="psw">

     <input type="radio" name="gender" value="male" checked> Male<br>
     <input type="radio" name="gender" value="female"> Female<br>
     <input type="radio" name="gender" value="other"> Other

     <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
     <input type="checkbox" name="vehicle2" value="Car"> I have a car
     <input type="submit" value="Submit">
     <input type="reset">
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">


First name:

Last name:


User password:

I have a bike I have a car

HTML5 Input Types

HTML5 added several new input types:

  • color
  • Select your favorite color:
      <input type="color" name="favcolor">

  • date
  •   Birthday:
      <input type="date" name="bday">

  • datetime-local
  •   Enter a date before 1980-01-01:
      <input type="date" name="bday" max="1979-12-31"><br>
      Enter a date after 2000-01-01:
      <input type="date" name="bday" min="2000-01-02"><br>

    You can also add restrictions to dates:

      Birthday (date and time):
      <input type="datetime-local" name="bdaytime">

  • month
  •   Birthday (month and year):
      <input type="month" name="bdaymonth">

  • number
  •   Quantity (between 1 and 5):
      <input type="number" name="quantity" min="1" max="5">

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

  • search
  •   Search Google:
      <input type="search" name="googlesearch">

  • tel
  •   Telephone:
      <input type="tel" name="usrtel">

  • time
  •   Select a time:
      <input type="time" name="usr_time">

  • url
  •   Add your homepage:
      <input type="url" name="homepage">

  • week
  •   Select a week:
      <input type="week" name="week_year">