html-forms/index.html at main · Omnipotent-coder0/html-forms · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>forms</title>
</head>
<body>
    <!-- form -->
    <!-- enctype = "multipart/form-data" this will break long data and send then repatch -->
    <form action="/" methon = "POST" enctype="multipart/form-data">    <!-- action = "sends data to this location"  method = "GET or POST"  -->
        <label for="username">username : </label> <!-- we can use 'for' attribute for visually impaired people
                                                        and when we click on the label it will automatically
                                                        move cursor to the input with the same id-->
        <input type="text" id = 'username' placeholder="Nilesh Gautam" minlength="6" maxlength="15" required>    <!-- required will make this input , compulsary to enter
                                                                        we can also add minlenght and maxlenght as well-->

        <!-- password -->
        <br><label for="password">password : </label>
        <input type="password" id="password" minlength="6" maxlength="15" required>

        <!-- email -->
        <br><label for="email">email : </label>
        <input type="email" id="email" placeholder="nilesh@emamil.com">

        <!-- phone number -->
        <br><label for="phone">phone no. :</label>
        <input type="tel" id="phone" placeholder="9876543210" pattern="[7-9]{1}[0-9]{9}"> <!-- we can also add pattern -->

        <!-- calender date -->
        <br><label for="bday">D.O.B : </label>
        <input type="date" id="bday">

        <!-- quantity -->
        <br><label for="quantity">Quantity</label>
        <input type="number" id="quantity" min="0" max="99" value="1">

        <!-- redio buttons -->
        <br><label for="title">title : </label><br>
        <label for="Mr">Mr. </label>
        <input type="radio" id="Mr." name = "title">
        <label for="Mrs">Mrs. </label>
        <input type="radio" id="Mrs." name="title">
        <label for="Dr">Dr. </label>
        <input type="radio" id="Dr" name="title" >

        <!-- Dropdown menu -->
        <br><label for="payment">payment</label>
        <select name="" id="payment">
            <option value="visa">visa</option>
            <option value="mastercard">mastercard</option>
            <option value="giftcard">giftcard</option>
        </select>

        <!-- checkbox -->
        <br><label for="subscribe">Subscribe : </label>
        <input type="checkbox" id="subscribe">

        <!-- text area -->
        <br><label for="comment">Comment : </label><br>
        <textarea name="" id="comment" cols="30" rows="10"></textarea> <!-- we can add default dimensions using row and col -->

        <br><label for="file">File : </label>
        <input type="file" id="file" accept="image/png,image/jpeg, image/jpg ">

        <br><input type="reset"><br>
        <input type="submit">
    </form>
</body>
</html>