web-dev-coding/form.html at main · hammadshakeelai/web-dev-coding · 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
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #b{
            width: 100px;
            height: 60px;
            border: 1px solid black;
            background-color: red;
            text-align: center;
            padding-top:40px ;
        }
        td{
            border: 1px solid black;
            /* width: 50px;
            height: 50px; */
            /* text-align: center;/ */
        }
        table{
            border: 1px solid black;
            width: 50px;
            border-collapse: collapse;
        }
        #g{
            background-color: rgb(37, 200, 37);
        }
        #w{
            background-color: white;
        }
    </style>
</head>
<body>
    <img src="nice.jpg" alt="image" width="100%">
        <form>
            <label for = "username"> Username :</label>
            <input type= "text" id="username" name="username"> <br>
            <label for="gender"> Gender: </label>
            <input type="radio" id=“male" name=“gender" value="Male">
            <label for="male"> Male </label>
            <input type="radio" id=“female" name=“gender" value="Female">
            <label for="female"> Female</label> <br>
        </form>

        <br>

        <form style="padding:30px;border: 1px solid black;outline: 1px solid black ;outline-offset: 10px;">
            <label for="vehicle">what is cure for back pain:</label><br>
            <input type="radio" id="vehicle1" name="vehicle" value="Bike">
            <label for="vehicle">exercise</label><br>
            <input type="radio" id="vehicle2" name="vehicle" value="Car">
            <label for="vehicle">rest</label><br>
            <input type="radio" id="vehicle3" name="vehicle" value="Boat">
            <label for="vehicle3">medicine</label>
          </form>
          <form>
            <label for="cars">Choose a car:</label>

                <select id="cars" name="cars">
                    <option value="volvo" selected >Volvo</option>
                    <option   value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>
            </form>

            <form>
                <input list="browsers">
                <datalist id="browsers">
                  <option value="Edge">
                  <option value="Firefox">
                  <option value="Chrome">
                  <option value="Opera">
                  <option value="Safari">
                </datalist>
            </form>
            <textarea name="message" rows="10" cols="30">

            </textarea>
            <button type="button" onclick="alert('Hello World!')">Click Me!</button>
            <h1 style="text-align: center;">sedr</h1>
            <div style="justify-content: center;display: flex;">
                <h1>h</h1><br>
            </div>
            <h1 style="justify-content: center;display: flex;">dfgh</h1>
<section style="justify-content: center;display: flex;gap: 10px;">
    <div id="b">a</div>
    <div id="b">c</div>
    <div id="b">d</div>
    <div id="b">e</div>
</section>
<table>
        <tr id="g">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr id="w">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr id="g">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
</table>
<form>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">1</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">2</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">3</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">4</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">5</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">6</label><br>
    <input type="radio" id="q" name="filename" value="1">
    <label for="q">7</label>
</form>
<div style="width: 300px;height: 300px; border: 1px solid black;overflow: auto;"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas itaque dolores, dolore et illum quam corporis nam reiciendis sunt saepe voluptate architecto? Corrupti in sint, perferendis minus sequi explicabo beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, modi quia. Voluptatum dolorum explicabo error sint harum assumenda, quia ex nostrum suscipit, quis, dignissimos iure veritatis dolorem qui illo quasi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis? Dignissimos, aspernatur earum! Nulla repudiandae tempora ea quasi praesentium deleniti deserunt, beatae excepturi dolorem, odit consequatur voluptatem ullam qui odio.
Eveniet maiores exercitationem voluptatem praesentium consectetur distinctio veritatis ipsa nobis, rerum ab eligendi aperiam officia, obcaecati ex. Adipisci quasi, deserunt dolorum ab earum porro ad at non animi, possimus laudantium.
At tenetur aliquid veniam molestiae repudiandae dolor, distinctio ab voluptas voluptate perspiciatis id dignissimos sunt minima reprehenderit ipsa sapiente voluptates earum deleniti nemo quasi mollitia assumenda aspernatur. Rem, consequatur minus.
Cumque impedit odio vero excepturi tempore molestias, repellendus voluptatum officia necessitatibus at explicabo incidunt magnam dolore illum et accusamus fuga sunt omnis iusto consectetur soluta rerum! Enim, cum. Nemo, tempora!
Ratione sit rem eveniet accusamus quam, ipsam sunt delectus, iure sed exercitationem totam quis, obcaecati eius cum. In, corporis deleniti nihil neque non laboriosam culpa ea fuga deserunt, veniam quasi.
Totam temporibus asperiores amet modi quas delectus, alias doloribus commodi? Odit ad voluptas saepe dolorem dolore est explicabo in, atque nam at cupiditate laboriosam consequuntur illum nostrum architecto modi. Nesciunt?
Corrupti accusamus, cumque quae similique est dolor eius quia sapiente! Reprehenderit illo explicabo ab magni doloremque ullam accusamus veritatis minus numquam omnis labore dicta est harum veniam sit, incidunt dolor!
Repellat quibusdam, corrupti iure dolores consectetur voluptatibus quas quo, placeat voluptas perspiciatis, sequi maxime id itaque? Nisi porro consectetur magnam animi totam exercitationem rerum iusto perspiciatis unde, ab atque omnis!</p></div>
</body>
</html>