Author: Michal Szymanski
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
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
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
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
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Live preview
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
Previous lesson Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Note: We can help you build your project.
learn more