CSIT_Labs/5th_Semester/Web_Technology/Lab1 (HTML)/32_controls.html at main · sthsuyash/CSIT_Labs · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qn.32 10 Different types of controls generated by Input tag</title>
</head>
<body>
    <h2>HTML Form with Different Input Types</h2>
    <form action="#" method="POST">

        <!-- Text Input -->
        <label for="text-input">Text Input:</label>
        <input type="text" id="text-input" name="text-input" placeholder="Enter text"><br><br>

        <!-- Password Input -->
        <label for="password-input">Password Input:</label>
        <input type="password" id="password-input" name="password-input" placeholder="Enter password"><br><br>

        <!-- Radio Buttons -->
        <label>Radio Buttons:</label><br>
        <input type="radio" id="radio1" name="radio-group" value="option1">
        <label for="radio1">Option 1</label>
        <input type="radio" id="radio2" name="radio-group" value="option2">
        <label for="radio2">Option 2</label><br><br>

        <!-- Checkboxes -->
        <label>Checkboxes:</label><br>
        <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
        <label for="checkbox1">Checkbox 1</label>
        <input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
        <label for="checkbox2">Checkbox 2</label><br><br>

        <!-- Number Input -->
        <label for="number-input">Number Input:</label>
        <input type="number" id="number-input" name="number-input" min="1" max="10"><br><br>

        <!-- Date Input -->
        <label for="date-input">Date Input:</label>
        <input type="date" id="date-input" name="date-input"><br><br>

        <!-- Color Input -->
        <label for="color-input">Color Input:</label>
        <input type="color" id="color-input" name="color-input"><br><br>

        <!-- File Input -->
        <label for="file-input">File Input:</label>
        <input type="file" id="file-input" name="file-input"><br><br>

        <!-- Range Input -->
        <label for="range-input">Range Input:</label>
        <input type="range" id="range-input" name="range-input" min="0" max="100"><br><br>

        <!-- Email Input -->
        <label for="email-input">Email Input:</label>
        <input type="email" id="email-input" name="email-input" placeholder="Enter email"><br><br>

        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>
</body>
</html>