HTML-CSS-Project/chapter5.html at main · TulyXPlatform/HTML-CSS-Project · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 5: Forms in HTML</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* Minimal styling just for form demo clarity */
        .form-demo {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            background: #f9f9f9;
            max-width: 500px;
        }
        .form-demo label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        .form-demo input,
        .form-demo select,
        .form-demo textarea,
        .form-demo button {
            width: 100%;
            padding: 6px;
            margin-top: 4px;
            border: 1px solid #aaa;
            border-radius: 4px;
        }
        .form-demo fieldset {
            margin-top: 15px;
            padding: 10px;
            border: 1px solid #aaa;
        }
        .form-demo legend {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2 class="chapter-header" id="heading">Chapter 5: Web FORMS</h2>

    <div class="tag-section">
        <h3>Form Example</h3>
        <div class="tag-demo">
            <div class="head-demo">
                <form class="form-demo" action="/submit" method="post" autocomplete="on">

                    <!-- Text Inputs -->
                    <label for="username">Username:</label>
                    <input type="text" id="username" name="username" placeholder="Enter username" required>

                    <label for="password">Password:</label>
                    <input type="password" id="password" name="password" placeholder="Enter password" required>

                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com">

                    <label for="phone">Phone:</label>
                    <input type="tel" id="phone" name="phone" placeholder="123-456-7890">

                    <label for="website">Website:</label>
                    <input type="url" id="website" name="website" placeholder="https://example.com">

                    <label for="age">Age:</label>
                    <input type="number" id="age" name="age" min="1" max="100" step="1">

                    <label for="dob">Date of Birth:</label>
                    <input type="date" id="dob" name="dob">

                    <label for="appt">Choose Time:</label>
                    <input type="time" id="appt" name="appt">

                    <label for="color">Favorite Color:</label>
                    <input type="color" id="color" name="color">

                    <label for="range">Satisfaction (1-10):</label>
                    <input type="range" id="range" name="range" min="1" max="10">

                    <!-- Checkbox and Radio -->
                    <fieldset>
                        <legend>Interests</legend>
                        <label><input type="checkbox" name="interest" value="coding" checked> Coding</label>
                        <label><input type="checkbox" name="interest" value="music"> Music</label>
                        <label><input type="checkbox" name="interest" value="sports"> Sports</label>
                    </fieldset>

                    <fieldset>
                        <legend>Gender</legend>
                        <label><input type="radio" name="gender" value="male"> Male</label>
                        <label><input type="radio" name="gender" value="female"> Female</label>
                        <label><input type="radio" name="gender" value="other" checked> Other</label>
                    </fieldset>

                    <!-- Select and Options -->
                    <label for="country">Country:</label>
                    <select id="country" name="country">
                        <optgroup label="Asia">
                            <option value="bd">Bangladesh</option>
                            <option value="in">India</option>
                        </optgroup>
                        <optgroup label="Europe">
                            <option value="uk">United Kingdom</option>
                            <option value="de">Germany</option>
                        </optgroup>
                    </select>

                    <!-- Datalist -->
                    <label for="browser">Favorite Browser:</label>
                    <input list="browsers" id="browser" name="browser">
                    <datalist id="browsers">
                        <option value="Chrome">
                        <option value="Firefox">
                        <option value="Edge">
                        <option value="Safari">
                    </datalist>

                    <!-- Textarea -->
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" rows="4" placeholder="Type your message here..."></textarea>

                    <!-- File Upload -->
                    <label for="resume">Upload Resume:</label>
                    <input type="file" id="resume" name="resume" multiple>

                    <!-- Buttons -->
                    <input type="submit" value="Submit Form">
                    <input type="reset" value="Reset Form">
                    <button type="button" onclick="alert('Hello! This is a button')">Click Me</button>
                </form>
            </div>
        </div>
    </div>

</body>
</html>