HTML Input Types Cheatsheet
Hello Guys! Welcome to Coding Torque. In this blog, I am going to explain to you the different types of HTML input elements.
Here are the different input types you can use in HTML:
Input Type Text
<input type=”text”> defines a text input field.
Example:
<form>
<label>First Name:</label><br>
<input value="Piyush" type="text" minlength="4" maxlength="8" size="30" required> <br>
<label>Last Name:</label><br>
<input value="Patil" type="text" minlength="4" maxlength="8" size="30" required>
</form>Output:
Input Type Checkbox
<input type=”checkbox”> defines a checkbox.
Example:
<form>
<label>checkbox</label><br>
<input type="checkbox">
<input type="checkbox" checked>
</form>Output:
Input Type Color
<input type=”color”> is used to take color input from user.
Example:
<form>
<label>color</label><br>
<input type="color" value="#ff0000"><br><br>
</form>Output:
Input Type Datetime
<input type=”datetime”> is used to input date and time.
Example:
<form>
<label>datetime</label><br>
<input type="datetime-local" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00" required>
<br><br>
</form>Output:
Input Type Email
<input type=”email”> is used to take email input.
Example:
<form>
<label>email</label>
<input type="email" pattern=".+@gmail.com" size="30" required> <br><br>
</form>Output:
Input Type Single File Upload
<input type=”file”> is used to select and upload single file from computer.
Example:
<form>
<label type="text"> single file upload</label>
<input type="file" required>
<br><br>
</form>Output:
Input Type Multiple File Upload
<input type=”file” multiple> is used to select and upload multiple files from computer.
Example:
<form>
<label type="text"> multiple file upload</label>
<input type="file" accept="image/png, image/jpeg" multiple required>
<br><br>
</form>Output:
Input Type Hidden
<input type=”hidden”> is used to input hidden data which is not visible to a user.
Example:
<form>
<label>hidden input field</label><br>
<input type="hidden" value="3487">
<br>
</form>Output:
Input Type Month
<input type=”month”> allows the user to select a month and a year.
Example:
<form>
<label>month</label>
<input type="month" min="2018-03" max="2018-08" value="2018-05" required> <br><br>
</form>Output:
Input Type Number
<input type=”number”> defines a numeric input field.
Example:
<form>
<label>number</label>
<input type="number" min="1" max="5" required>
<br><br>
</form>Output:
Input Type Password
<input type=”password”> defines a password field.
Example:
<form>
<label>password</label>
<input type="password" minlength="8" maxlength="10" required>
<br><br>
</form>Output:
Input Type Radio
<input type=”radio”> defines a radio button.
Example:
<form>
<label>radio</label>
<input type="radio" name=“rbutton” checked>
<input type="radio" name=“rbutton”> <br><br>
</form>Output:
Input Type Search
<input type=”search”> defines a search field.
Example:
<form>
<label>search</label>
<input type="search" required><br><br>
</form>Output:
Input Type Range
<input type=”range”> defines a range field to select a value by sliding it.
Example:
<form>
<label>range</label>
<input style="accent-color:red;" type="range" min="0" max="100" value="90" step="100" required><br><br>
</form>Output:
Input Type Phone Number
<input type=”tel”> is used for input fields that should contain a telephone number.
Example:
<form>
<label>phone number</label>
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br><br>
</form>Output:
Input Type Time
<input type=”time”> allows the user to select a time (no time zone).
Example:
<form>
<label>time</label>
<input type="time" min="09:00" max="18:00" required>
<br><br>
</form>Output:
Input Type Submit
<input type=”submit”> defines a button for submitting for data to a form-handler.
Example:
<form>
<input type="submit" value="Submit">
</form>Output:
Input Type Button
<input type=”button” value=”Click Me”> defines a checkbox.
Example:
<form>
<input type="button" value="Click Me">
</form>
Output:
If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Written by: Coding Torque | Piyush Patil
Follow us on Instagram for more projects like this👨💻
