Loading

<input> element

  • These are used to collect different types of user input.
  • Common types include text (<input type="text">), password (<input type="password">), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), etc.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        Enter your name <br>
        <input type="text" name="username">
    </form>
</body>

</html>

Output:


HTML Input Types

Below are the various input types that can be used in HTML:

  • <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 Button

  • It is used to define a button in a form.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Button</h2>
        <input type="button" value="Button">
    </form>
</body>

</html>

Output:


Input Type Checkbox

  • It is used to define a checkbox in a form.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Checkbox</h2>
        Agree:<input type="checkbox">
    </form>
</body>

</html>

Output:


Input Type Color

  • It is used for input fields that should contain a color.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Checkbox</h2>
        Agree:<input type="checkbox">
    </form>
</body>

</html>

Output:


Input Type Date

  • It is used for input fields that contain date.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Date</h2>
        DOB:<input type="date">
    </form>
</body>

</html>

Output:


Input Type Datetime-local

  • It is used for input fields that contain date and time.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Datetime-local</h2>
        Start-Time:<input type="datetime-local">
    </form>
</body>

</html>

Output:


Input Type Email

  • It is used for input fields that contain an email id.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <h2>Input Type Email</h2>
    <form>
        Enter your email:
        <input type="email" id="email" name="email">
        <input type="submit" value="Submit">
    </form>
</body>

</html>

Output:


Input Type File

  • It is used for input fields that contain a file as input.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <h2>Input Type File</h2>
    Upload your Photos:
    <input type="file" id="file">
</body>

</html>

Output:


Input Type Hidden

  • It defines a hidden input field from users.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <h2>Input Type Hidden</h2>
    <input type="hidden" id="hidden">
    <p>Note:The hidden field will be shown in source code</p>
</body>

</html>

Output:


Input Type Image

  • It is used for input fields that contain an image as input.

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>
    <form>
        <h2>Input Type Image</h2>
        <input type="image" id="image" src="logo.png">
    </form>
</body>

</html>

Output:


Use of Various Types of Input in Forms Collectively

  • In the below field, we have used input types text, email, password, tel, radio, range, number, reset, submit

Example:

<!DOCTYPE html>
<html>
<title>HTML Forms</title>

<head>
</head>

<body>

    <div>
        <h2>Student Details Form</h2>
        <form>
            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" placeholder="Enter student's name" required>
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Enter student's email" required>
            </div>
            <div>
                <label for="pass">Password:</label>
                <input type="password" id="pass" name="pass" placeholder="Enter student's password" required>
            </div>
            <div>
                <label for="age">Age:</label>
                <input type="number" id="age" name="age" placeholder="Enter student's age" required>
            </div>
            <div>
                <label for="tel">Tel:</label>
                <input type="tel" id="tel" name="tel" placeholder="Enter student's number" required>
            </div>

            <div>
                <label for="gender">Gender:</label>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">Male</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">Female</label>
            </div>
            <div>
                <label for="grade">Grade:</label>
                <input type="range" id="grade" name="grade" min="1" max="10" value="5" required>
            </div>
            <div>
                <input type="reset" id="reset">
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
    </div>

</body>

</html>

Output:


Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Registration Form</title>
</head>
<body>
    <h2>Registration Form</h2>
    <form action="/submit_registration" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone" required><br><br>

        <label for="website">Website:</label>
        <input type="url" id="website" name="website"><br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="1" required><br><br>

        <label for="dob">Date of birth:</label>
        <input type="date" id="dob" name="dob"><br><br>

        <label for="gender">Gender:</label><br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label><br><br>

        <label for="hobbies">Hobbies:</label><br>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">Reading</label><br>
        <input type="checkbox" id="traveling" name="hobbies" value="traveling">
        <label for="traveling">Traveling</label><br>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">Sports</label><br><br>

        <label for="profilePic">Profile Picture:</label>
        <input type="file" id="profilePic" name="profilePic"><br><br>

        <button type="button" onclick="alert('profile pic uploaded!')">Upload</button><br><br>

        <input type="submit" value="Register">
    </form>
</body>
</html>