HTML Input Types

The HTML input type element is used to create interactive controls for web-based forms to receive data from the user. Data can be entered by the user in a variety of ways, such as alphabets, digits or a combination of both such as email. These different types of HTML-type elements in HTML define the type of data a user can enter in the input field. It makes it easy for the browser to understand which data is allowed to be entered locally and what is not.

In this article i will show you many  different types of HTML <input> element.

 

HTML Input Types

Here are the different types of input you can use in HTML:

The default value in input type is “text”

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

 

Input Type Text

The <input> part of the “text” type is used to define a single line input text field.

Example

<form>  
    <label>First Name</label><br>  
    <input type="text" name="firstname">. 
    <br>  
    <label>Last Name</label><br>  
    <input type="text" name="lastname">. 
    <br>   
</form>

Output

Input type text

Input Type Password

The <input> type of “password” type allows the user to enter the password securely on a web page.you can not read this because when you type any word this type of input convert word to “*”.

Example

<form>  
    <label>User Name</label><br>  
    <input type="text" name="username"><br>  
    <label>Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>

Output

Input Type password

Input Type Submit

The <input> section of the “submit” type defines the submit button to submit the form to the server in the event of an “click” event.

Example

<form action="submit.php">  
    <label>Enter User name</label><br>  
    <input type="text" name="username"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  

// When you click the submit button the form will be submitted and redirect to submit.php

Output

Input Type Submit

Input Type Reset

The <input> “reset” type is also defined as a button but when a user performs a click-through event, it automatically resets all entered values.

Example

<form action="submit.php">  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="reset" value="reset">  
</form>  

// When you click on the reset button all data you insert in your form will be removed or reset

Output

Input Type Reset

Input Type Radio

The <input> “radio” type defines the radio buttons, which allow you to select an option between a set of related options. At one time only one radio button option can be selected at a time.

Example

<form>  
  <p>Select Your Gender</p>  
  <input type="radio" name="male" value="male"> Male <br>  
  <input type="radio" name="female" value="female"> Female<br>  
  <input type="radio" name="other" value="other">Other<br>  
  <input type="submit" value="submi"> 
</form>

Output

Input Type Radio

Input Type Checkbox

The <input> “checkbox” type is shown as square boxes that can be checked or unchecked for the selection of the given options.

Example

<form>   
      <p>Select your favourite Color</p>  
      <input type="checkbox" name="color1" value="red">Red<br>  
      <input type="checkbox" name="color2" value="brown">Brown<br>  
      <input type="checkbox" name="color3" value="green">Green<br>  
      <input type="checkbox" name="color4" value="yellow">Yellow<br>  
      <input type="checkbox" name="color5" value="pink">Pink<br><br>  
      <input type="submit" value="submit">  
  </form>

Output

Input Type Checkbox

Input Type Button

The “input” type “button” means a simple pressure button, which can be configured to control the operation of any event, such as, click on an event.

Example

<form>  
     <input type="button" value="Click Me" onclick="alert('Welcome To KrTricks')">  
</form>

Output

Input Type button

Input Type File

The <input> feature with “file” type is used to select one or more files from user device storage. Once you have selected a file, and after submitting, this file can be uploaded to the server with the help of the JS code and file API.

Example

<form>
  <label for="myfile">Select File</label>
  <input type="file" id="myfile" name="myfile">
</form>

Output

input type file

Input Type Image

<input> type “image” is used to represent the navigation button in the form of an image.

Example

<form>
  <label for="myimage">Input Type Image:</label>
  <input type="file" alt="myimage" src="image.png"  width="100px >
</form>

Output

Font style

Input Type Color

<input> type “color” is used to describe the input field that contains the color. Allows the user to specify a color with the color interface of the browser.

Example

<form>
  <label for="favouritecolor">Select your favorite color:</label>
  <input type="color" id="favouritecolor" name="favouritecolor">
</form>

Output

Input Type Color

Input Type Date

The <input> section of the “date” type creates an input field, which allows the user to enter a date in a specific format. User can enter a date by text field or by date selector view.

Example

<form>
  <label for="dob">Select Your Date Of Birth:</label>
  <input type="date" id="dob" name="dob">
</form>

 Output

Input Type Date

Input Type Datetime-local

The <input> type of “datetime-local” type creates an input that allows the user to select a date and local time per hour without the knowledge of time zones.

Example

<form>  
    <label>  
      Select Your Meeting Time<br><br>  
      Select date & time: <input type="datetime-local" name="meetdate"> <br><br>  
    </label>  
      <input type="submit">  
</form>

Output

Input Type Datetime-local

Input Type Email

The <input> “email” type creates an input input that allows the user to enter an email address with pattern verification. Many attributes allow the user to enter more than one email address.

Example

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Output

Input Type Email

Input Type Month

The <input> type “month” creates an input field that allows the user to easily enter month and year in the format “MM, YYYY” where MM defines the month value, and YYYY defines the year value.

Example

<form>
  <label for="bdmonth">Birthday Month</label>
  <input type="month" id="bdmonth" name="bdmonth">
</form>

Output

Input Date

Input Type Number

The <input> type number creates an input input that allows the user to enter a numeric value. You can also limit to enter the minimum and maximum values ​​using the minimum and maximum attribute.

Example

<form>
  <label for="quantity">Add Quantity (between 1 and 10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
</form>

Output

Input Type Number

Input Type URL

The <input> element of the “url” type creates an input entry that allows the user to enter a URL.

Example

<form>
  <label for="url">Add your URL:</label>
  <input type="url" id="url" name="homepage">
</form>

Output

Input Type URL

Input Type Week

The <input> type week creates an input field that allows the user to select a week and year to create a downtime calendar outside the time zone.

Example

<form>
  <label for="week">Select a Week:</label>
  <input type="week" id="week" name="week">
</form>

Output

Input Type week

 

Input Type Search

The <input> “search” type creates embedded inputs that allow the user to enter a search unit. These apply equally to the type of text input, but can be edited differently.

Example

<form>
  <label for="search">Search:</label>
  <input type="search" id="search" name="search">
</form>

Output

Input Type Search

Input Type Tel

<input> type tel creates embedded input to insert a phone number. The “tel” type does not have automatic verification like email, because the phone number pattern may vary around the world.

Example

<form>
  <label for="phone">Enter Your Phone Number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Output

Input Type Tel

 

Leave a Comment

Your email address will not be published.