HTML input types part 1


This lesson describes the different input types for the <input> element.

Input Type Text

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


          <form>
              First name:<br>
              <input type="text" name="firstname"><br>
              Last name:<br>
              <input type="text" name="lastname">
            </form>
      

Live preview

First name:

Last name:

Input Type Password

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


                    <form>
                        User name:<br>
                        <input type="text" name="username"><br>
                        User password:<br>
                        <input type="password" name="psw">
                      </form>
                

Live preview

User name:

User password:

Note: The characters in a password field are masked (shown as asterisks or circles).


Input Type Submit

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


                      <form>
                        First name:<br>
                        <input type="text" name="firstname" value="Mickey"><br>
                        Last name:<br>
                        <input type="text" name="lastname" value="Mouse"><br><br>
                        <input type="submit" value="Submit">
                      </form>
                  

Live preview

First name:

Last name:



Input Type Reset

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


                      <form>
                        First name:<br>
                        <input type="text" name="firstname" value=""><br>
                        Last name:<br>
                        <input type="text" name="lastname" value=""><br><br>
                        <input type="submit" value="Submit">
                        <input type="reset" value="Reset">
                      </form>
                  

Live preview - type something in the inputs and then click reset button

First name:

Last name:



Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Male
Female
Other

Live preview

Male
Female
Other

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.



                      <form>
                          <input type="checkbox" name="vehicle1" value="Bike" checked> I have a bike<br>
                          <input type="checkbox" name="vehicle2" value="Car"> I have a car 
                        </form>
      
                

Live preview

I have a bike
I have a car

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.