Full-Stack-Development-Learning-Path/Front-End/HTML5-CSS-Advance/input.html at main · kaiwalyakoparkar/Full-Stack-Development-Learning-Path · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning input tags</title>
</head>
<body>
    <form action="" id="myform">
        <!--Type tells the type of input and name tells the server about the input-->
        Name : <input type="text" name="username" autofocus placeholder="Enter your First name" required><br />

        Email : <input type="email" name="useremail" placeholder="Enter your Last name" required><br />

        Phone : <input type="tel" name="usermobile" placeholder="Enter your Mobile number" required><br />

        DOB : <input type="date" name="dob" disabled>
        Gender : <br />


        <!--In radio giving same name to the group will enable you to select any one from the group-->
        <input type="radio" name="gender"> Male <br />
        <input type="radio" name="gender">Female
        <br />
        <input type="radio" name="gender"> Other <br />


        <!--In checkbox it is not necessary to give all the group members the same name-->
        <input type="checkbox" name="lang"> English <br />
        <input type="checkbox" name="lang"> Hindi <br />
        <input type="checkbox" name="lang"> Marathi <br />
        <input type="checkbox" name="lang"> Other <br />

        Color : <input type="color" name="uicolor"><br />

        <!--This will accept only audio files with all formats-->
        Audio file : <input type="file" name="the file upload" accept="audio/*"><br />

        <!--This will accept only video files with all formats-->
        Video file : <input type="file" name="the file upload" accept="video/*"><br />

        <!--This will accept only image files with all formats-->
        Image file : <input type="file" name="the file upload" accept="image/*"><br />

        <!--This will accept only image files with all formats-->
        Multiple file : <input type="file" name="the file upload" multiple><br />

        Person : <input type="number" name="personCount" min="0" max="5"><br />

        Range : <input type="range" name="range" min="0" max="5"><br />

        Search : <input type="search" name="searchBox"><br />

        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>

    <!--Now url is a part of the about form inspite of being outside the tags using the same id for the both-->
    Url : <input type="url" name="inputUrl" form="myform"><br />

</body>
</html>