HTML Input Types
In the previous lesson, we learned about HTML meta tags. Now, let's explore the various HTML input types available for creating forms.
HTML5 Input Types
HTML5 introduced several new input types to make form creation easier and more user-friendly. These input types provide built-in validation and appropriate controls on different devices.
Text Input Types
<!-- Basic text input -->
<input type="text" name="username" placeholder="Enter username">
<!-- Password field (hides characters) -->
<input type="password" name="password" placeholder="Enter password">
<!-- Email field (validates email format) -->
<input type="email" name="email" placeholder="Enter email">
<!-- URL field (validates URL format) -->
<input type="url" name="website" placeholder="Enter website URL">
<!-- Telephone field (optimised for phone numbers) -->
<input type="tel" name="phone" placeholder="Enter phone number">
<!-- Search field (may have special styling) -->
<input type="search" name="search" placeholder="Search...">
Numeric Input Types
<!-- Number input (up/down arrows) -->
<input type="number" name="quantity" min="1" max="100" step="1">
<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="10" value="50">
Date and Time Input Types
<!-- Date picker -->
<input type="date" name="birthday">
<!-- Month picker -->
<input type="month" name="month">
<!-- Week picker -->
<input type="week" name="week">
<!-- Time picker -->
<input type="time" name="appointment">
<!-- Date and time picker -->
<input type="datetime-local" name="meeting">
Colour and File Input Types
<!-- colour picker -->
<input type="colour" name="favorite_colour" value="#ff0000">
<!-- File upload -->
<input type="file" name="document">
<!-- Multiple file upload -->
<input type="file" name="photos" multiple>
Button Input Types
<!-- Submit button -->
<input type="submit" value="Submit">
<!-- Reset button (resets form values) -->
<input type="reset" value="Reset">
<!-- Generic button -->
<input type="button" value="Click Me">
<!-- Image button -->
<input type="image" src="submit.png" alt="Submit">
Selection and Other Input Types
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Hidden field (not visible to users) -->
<input type="hidden" name="user_id" value="12345">
