HTML Input Types
The <input> element can be displayed in many ways, depending on the type attribute.
Text, Password, and Submit
html
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
html
<p>Choose your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
html
<p>I have a:</p>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>Other Input Types
HTML5 introduced several new input types for better input control and validation.
html
<label for="bday">Birthday:</label>
<input type="date" id="bday" name="bday">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">List of All Input Types
type="button"type="checkbox"type="color"type="date"type="datetime-local"type="email"type="file"type="hidden"type="image"type="month"type="number"type="password"type="radio"type="range"type="reset"type="search"type="submit"type="tel"type="text"type="time"type="url"type="week"
Test Yourself with an Exercise
Which input type defines a slider control?