Skip to main content

Command Palette

Search for a command to run...

Input Elements

Published
2 min read

Forms are one of main component of web. Because without of forms it will be hard to collect data from the user. And if want to create a good form so it is necessary to know basic input elements in HTML.

Whenever a user visits the website at that time to collect the user's information forms are used. These forms are created through different type of input elements which are following.

  • Button- Button is a push button, which activates after pushing it.

  • CheckBox- If you want to activate checkbox then you have to check it.

  • date- date is used to choose date.

  • Email- It is used to accept email from user.

  • file- It is used to upload a file.

  • Image- It is used to input a image

  • Color - It is used to choose the color of choice.

  • Month -It is used to input year and months in the format of YYYY-MM.

  • Number - It is used to input number.

  • Password - It defines the password field.

  • Radio - It is used to inputting a set of options

  • Range - Slide control interface with Default range is 0 to 100

  • Reset - Reset is used to reset the form.

  • Submit - Submit is used to submit the values of the form.

  • Text - It is used to enter the text in the form.

Syntax

<input type="type">

The type attribute can be diffrent type which are mentioned above.

Example

If we want to create a input type of email then we can write in following way

<input type="email">

<!DOCTYPE html>
<html>
<head>
    <title>Input Types in HTML</title>
</head>
<body>
    <h1> Input Types in HTML </h1>
    <input type="button">Button<br>
    <input type="checkbox">CheckBox<br>
    <input type="color">Color<br>
    <input type="date">Date<br>
    <input type="email" placeholder="Enter Your Mail"><br>
    <input type="file">File<br>
    <input type="image">Image<br>    
    <input type="month">Month<br>
    <input type="number" placeholder="Enter Your Age"><br>
    <input type="password">Password<br>
    <input type="radio">Click It<br>
    <input type="range">Enter the Range<br>
    <input type="reset">Reset form<br>
    <input type="search" placeholder="Search the word"><br>
    <input type="submit">Submit form<br>
    <input type="text" > Enter Text<br>
</body>
</html>