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