HTML-COURSE/forms.html at main · shivanigireesh/HTML-COURSE · 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
<!--form tag-->
<!--action attribute:to what file we should send the form
    method attribute:GET=insensitive data
                     POST=sensitive data-->
<!--requied attribute =tells to fill required txt-->
<!--id attribute=helps to move cursor to textbox when  click on label,
    input=self closing tag-->
<!--minlength,maxlength attributes-->
<!--placeholder attribute = it is used to show the hint to user how he should type -->

<!--to create textbox==<input>self closing input tag-->
<!--to add lable to textbox=<label>tag-->
<!--using 'for' beside label=when cick on label cusor moves to txt box -->
<!--pattern attribute=used to give the pattern of digits -->
<!--value attribute for setting default -->
<!--radio=radio is used to create buttons-->
<!-- if we should select only one radio button then we should use NAME attribute-->
<!--select tag= used to create drop down arrows-->
<!-- add options in the drop down menu-->
<!--checkbox= add input type as checkbox to check and uncheck the button-->
<!--textarea tag =used to create box to add txt within it-->
<!--enctype="multipart/form-data" :if we use this the large image can be broken into simple forms-->


<!DOCTYPE html>
<html>
    <head>
        <title>Forms</title>
    </head>
 <body>
    <form action="form.php" method="POST" enctype="multipart/form-data">
 <!--CREATE USERNAME -->
      <label for ="username">Username:</label>
      <input type="text" id="username" required placeholder="Shivani Gireesh" minlength="5" maxlength="16">
      <br>
<!--CREATE PASSWORD-->
      <label for="password">Password:</label>
      <input type="password" id="password" minlength="5" maxlength="16" required>
      <br>
<!--CREATING EMAIL-->
      <label for="email">email:</label>
      <input type="email" id="email" placeholder="shivani@gmail.com" required>
      <br>
<!--CREATING PHONE NUMBER-->
      <label for="phone">phone #:</label>
      <input type="tel" id="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
      <br>
<!--CREATING BIRTHDATE-->
      <label for="bday">birth date:</label>
      <input type="date" id="bday">
      <br>
<!--CREATING QUANTITY-->
      <label for="quantity">Quantity:</label>
      <input type="number" id="quantity" min="0" max="99" value="1">
      <br>
<!--CREATING TITLE-->
      <label for="title">Title:</label>
         <label for="Mr.">Mr.</label>
         <input type="radio" id="Mr." value="Mr." name="title">
         <label for="Mrs.">Mrs.</label>
         <input type="radio" id="Mrs." value="Mrs." name="title">
         <label for="PHd.">PHd.</label>
         <input type="radio" id="PHd." value="PHd." name="title">
         <br>
<!--CREATING PAYMENT OPTIONS-->
      <label for="payment">payment:</label>
      <select id="payment">
        <option value="visa">visa</option>
        <option value="mastercard">mastercard</option>
        <option value="gift card">giftcard</option>
      </select>
      <br>
<!--CREATING CHECKBOX FOR SUBSCRIBE TEXT-->
      <label for="subsribe">subscribe</label>
      <input type="checkbox" id="subscribe">
      <br>
<!--CREATING THE TEXT AREA-->
      <label for="comment">comment:</label>
      <textarea id="comment" rows="3" cols="25"></textarea>
      <br>
<!--CHOOSE A FILE-->
      <label for="file">file</label>
      <input type="file" id="file" accept="image/png">
      <br>

<!--CREATE SUBMIT AND RESET BUTTON-->
      <input type="reset"><br>
      <input type="submit" >

</form>
 </body>
</html>