HTML Input Types Cheatsheet - Coding Torque

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👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights