THE INPUT TYPE ELEMENT

HTML input type element is a very powerful attribute. It tells the web browser the type of value needed depending on the type of data to be entered. For every input tag, always use the <label> tag to caption the input type.

These are the available input type values:

Button: <input type="button">: This input type is used to create a button in a page.

Here is an example:

<button type="button" autofocus onclick="alert ('Magic!')" >Touch me</button>

Checkbox: <input type="checkbox">: The checkbox input is a square-shaped box that can allow a user to select more than one option in a form.

Here is an example;

<form action="#">
  <input type="checkbox" id="Instrument1" name="Instrument1" value="Guitar">
  <label for="Instrument1">A guitar</label><br>
  <input type="checkbox" id="Instrument2" name="Instrument2" value="Piano">
  <label for="Instrument2">A piano</label><br>
  <input type="checkbox" id="Instrument3" name="Instrument3" value="Drum">
  <label for="vehicle3">A drum</label><br><br>
  <input type="submit" value="Submit">
</form>

Color: <input type="color">: The color input type is used to select a range of colors.

Here is an example:

<form action="#">
  <label for="color">Select a color:</label>
  <input type="color" id="color" name="color" value="#000000">
  <input type="submit" value="Submit">
</form>

Date: <input type="date">: This input type will display a drop-down calendar for the

Here is an example:

<form action="#">
  <label for="birthday">When is your birthday?</label>
  <input type="date" id="birthday" name="birthday" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

Date and Time: <input type="datetime-local">: This input type will allow a user to select both data and time together.

Here is an example:

<form action="#">
  <label for="Localtime">What is your local timezone?</label>
  <input type="datetime-local" id="Localtime" name="Localtime" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

Email Address: <input type="email">: This input type is created for a user to input their email address.

Here is an example:

<form action="#">
  <label for="email">Enter your email address:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

File: <input type="file">: To allow a user to select any kind of file format in a form, use this input type. A button displaying "choose file" will appear automatically.

Here is an example:

<form>
  <label for="files">Select a file:</label>
  <input type="file" id="files" name="files">
</form>

Hide: <input type="hidden">: The input type hidden allows the web developer to enter a value that can only be modified and seen by the web developer. When the form is submitted, the hidden value is sent along with the user's information to the web server. Also note that the input type hidden is not used for security purposes.

Here is an example:

<form>
  <label for="name">First name:</label>
  <input type="text" id="name" name="name"><br>
  <input type="hidden" id="schoolId" name="schoolId" value="347">
  <input type="submit" value="Submit">
</form>

Image: <input type="image">: The input type image is used to make an image a submit button. The image src attribute is used to specify the pathway to the image.

Here is an example:

<label for="name">Last name: </label>
  <input type="text" id="name" name="name"><br><br>
  <input type="image" src="" alt="Submit" width="50" height="50">
</form>

Month: <input type="month">: To select only the month and year, use this input type.

Here is an example:

<form action="#">
  <label for="birthmonth">When is your birth month?</label>
  <input type="month" id="birthmomth" name="birthmonth" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

Number: <input type="number">: With this input type, the keypad changes to the numeric value signifying that only numbers can be entered in that field.

Here is an example:

<form action="#">
  <label for="age">Your age:</label>
  <input type="number" id="age" name="age">
  <input type="submit" value="Submit">
</form>

You can set the minimum and maximum number range to be entered in the field.

Here is an example:

<form action="#">
  <label for="age">Your age(16-30):</label>
  <input type="number" id="age" name="age" min="16" max="30">
<br><br>
  <input type="submit" value="Submit">
</form>

Password: <input type="password">: To protect a user's password, use this input type. The password will automatically be changed to asterisks as the user types.

Here is an example:

<form action="#">
  <label for="password">Your password:</label>
  <input type="password" id="password" name="password">
  <br>
  <br>
  <input type="submit" value="Submit">
</form>

Radio: <input type="radio">: The radio input type allows a user to select only one answer in a pool of many options. To select more than one option, refer back to the checkbox input type.

Here is an example:

<form action="#">
    <input type="radio" id="english" value="English" name="Language">
    <label for="english">English</label>
    <br>
       <input type="radio" id="hausa" value="Hausa" name="Language">
        <label for="hausa">Hausa</label>
        <br>
        <input type="radio" id="Yoruba" value="Yoruba" name="Language">
        <label for="Yoruba">Yoruba</label>
        <br><br>
        <input type="submit" value="Submit">
        </form>

Range: <input type="range">: The input type will be displayed as a horizontal bar that can be moved back and forth to either show decrement or increment of a value on a page. The default range is usually from 0 - 100, but can be changed using the min, max, or stop attribute.

Here is an example:

<form action="#">
  <label for="length">Length:</label>
  <input type="range" id="length" name="length">
  <br><br>
  <input type="submit" value="Submit">
</form>

Reset: <input type="reset">: The input type reset is a type of button value that resets every content in the form on a page to their default value.

Here is an example:

<form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Search: <input type="search">: This input type is used to find specific information in a web browser. In some supposed browsers, the delete icon is placed on the RHS to clear a text.

Here is an example:

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

Submit: <input type="submit">: This input type represents another button type for submitting a form to the web server.
Telephone: <input type="tel">: To collect a user's contact, use the input type tel.

Here is an example:

<form>
    <label for="Postal">Your postal code:</label>
    <input type="tel" id="Postal" name="Postal" value="" required>
    <br><br>
    <input type="submit" value="Submit">
</form>

Text: <input type="text">: The input type text is used to enter plain text. It can only hold 20 characters because it is a single line text field. To enter longer plain texts, use <textarea>.

Here is an example:

<form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name">

Time: <input type="time">: This input type will display a clock for the user to select the current time zone.

Here is an example:

<form action="#">
  <label for="localtime">What is your local time?</label>
  <input type="time" id="localtime" name="localtime" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

Link: <input type="url">: To input clickable or dead links, use the input type url.

Here is an example:

<form action="#">
  <label for="link">Add your Twitter account:</label>
  <input type="url" id="link" name="link" placeholder="https://">
<br><br>
  <input type="submit" value="Submit">
</form>

Week: <input type="week">: This input type is for selecting only the week and year.

Here is an example input type element:

<form action="#">
  <label for="Week">What week are we in?</label>
  <input type="week" id="Week" name="Week" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

For More blogs about HTML click here