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). Image: It 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). Phone: It 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). Radio: It 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). Reset: It is used to create a reset button.

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


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

<input type="url">


xvi). Week: It 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). Button: It 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). value: This attribute is used to set the initial value to the input field.

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


v). readonly: This 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-max: These 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Input Tag Types and Attributes in HTML </title>
</head>
<body>
    <!-- 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>
    </select>

    <!-- 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>

</body>
</html>


Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

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

Top Post Ad

Below Post Ad