complete html notes pdf, complete html notes for beginners, geeks help html css projects

Input Types and Attributes in HTML

Input Tag in HTML?

  • Input tag specifies an input field where the user can enter data.

  • <input> tag is used to create input fields.

  • Input tags don't need any closing tags.

Input Tag Types

i). Text: It is used to create a text input field.

<input type="text">

ii). Color: It is used for input fields that contain color. And it creates a color picker.

<input type="color">

iii). DateTime: It specifies an input field that contains the date and time.

<input type="datetime">

iv). DateTime Local: It specifies the date and time input with no time zone.

<input type="datetime-local">

v). Email: It is used for the input field which contains e-mail address.

<input type="email">

vi). File: It is used for the input field which takes a file as input form the user.

<input type="file">

vii). ImageIt is used to define an image as a submit button.

<input type="image">

viii). Number: It is used to define an input field which contains a numeric value.

<input type="number">

ix). Password: It is used to create an input field which contains input data as password.

<input type="password">

x). PhoneIt defines an input field which contains telephone number.

<input type="tel">

xi). Range: It is used to define a control for entering a numeric value. The default range is from 0 to 100. 

<input type="range">

xii). RadioIt is used to create radio button.

<input type="radio">

xiii). Time: It is used to create an input field which allows the user to select a time.

<input type="time">

xiv). ResetIt is used to create a reset button.

<input type="reset" value="reset">

xv). URLIt is used for input fields that contain a URL address.

<input type="url">

xvi). WeekIt is used to create an input field which allows the user to select a week and year.

<input type="week">

xvii). Checkbox: It is used to create a checkbox.

<input type="checkbox">

xviii). ButtonIt is used to define a button.

<input type="button" value="Button">

Input Tag Attributes in HTML

  • Attributes are used to provide additional information of an HTML tag.

Input Tag Attributes

i). name: This attribute is used to specify the name of the element.

<input type="text" name="text">

ii). placeholder: It represents, what type of value you can insert in the input field.

<input type="text" placeholder="Enter your name...">

iii). disabled: It is used to disable the input field from the user side.

<input type="text" disabled value="raju">

iv). valueThis attribute is used to set the initial value to the input field.

<input type="text" value="raju">

v). readonlyThis attribute is used to make readonly input field.

<input type="text" readonly value="raju">

vi). required: This specifies that the input field must be filled.

<input type="text" required>

vi). min-maxThese are used to set the min and max values.

<input type="range" name="" id="" min="0" max="100">

Code Described in the video

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Input Tag Types and Attributes in HTML </title>
    <!-- Input Types in HTML -->
    <h2> Input Types in HTML </h2>
    Text: <input type="text"> <br><br>
    Email: <input type="email"> <br><br>
    Number: <input type="number"> <br><br>
    Password: <input type="password"> <br><br>
    Range: <input type="range"> <br><br>
    Radio: <input type="radio" name="gender"> Male <input type="radio" name="gender"> Female<br><br>
    Checkbox: <input type="checkbox"> HTML <input type="checkbox"> CSS <br><br>
    Time: <input type="time"><br><br>
    Submit: <input type="submit" value="Submit">
    Reset: <input type="reset" value="Reset"><br><br>
    <select name="skills" id="">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>

    <!-- Input Attributes in HTML -->
    <h2> Input Attributes in HTML </h2>
    Placeholder: <input type="text" placeholder="Enter your name..."> <br><br>
    Name: <input type="text" name="text"> <br><br>
    Value: <input type="text" value="Subscribe to my channel"> <br><br>
    Readonly: <input type="text" readonly value="Subscribe to my channel"> <br><br>
    Disabled: <input type="text" disabled value="Subscribe to my channel"> <br><br>
    Required: <input type="text" required> <br><br>
    Range: <input type="range" min="0" max="100"> <br><br>


Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section