HTMLdevslopes/HTMLformsandinputs at main · OldsoulPhil/HTMLdevslopes · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML BASICS</title>
</head>

<body>
<!-- forms where you fill out info and is sent some where processed by a server or data base -->
<!-- collect user input and sent to sever for processing -->
<!-- form element acts as a container for input elements such as textfields, inputfields, checkbox, radio buttons, submit buttons -->

<!-- form attribute action -->
<!-- action attribute defines an action to be performed when the form is submitted -->
<!-- the value will link to a file for a submission request or hit a url for a server request -->
    <form autocomplete="on">
    <!-- this autocomplete will turn on the form to fill in data -->

      <!-- method specifies http method to be used to send form data -->

  <!-- <form method="post"> post transaction(method), when we want to send data to a sever. -->
  <!-- <form method="get"> get method, used when request data from specified resource. append data to url. Never use get to send sensative data.  -->
  <!-- <form target="_top"> diplay reponse in full body of the window -->
  <!-- <form target="_parent"> displays response in parent frame -->
  <!-- <form target="_self"> display response in the same window, this is a default setting already. Will have to add extra code. -->
  <!-- <form target="_blank"> used to specify a response after the submit which will open a new browser tab -->
  <!-- <form action="/action_page.php"> will allow our own on click event to submit  -->

  <!-- input types will validate what is going into an input -->
  <!-- input element (input field) -->
  <!-- input type text. Will take letters, special characters, and numbers. Will take it as text or string format -->

    <input type="text">

  <!-- input type number -->
  <!-- will have incrimentors and decromentors which means go up and down for the number -->

    <input type="number">

  <!-- check box element -->
  <!-- adds a check mark to a box to validate true or false simoultainisly -->

    <input type="checkbox">

  <!-- radio button -->
  <!-- validate true on or false off -->

    <input type="radio">

  <!-- submit button -->
  <!-- submit button will take all info in the fields and when submit is hit. It will gather all the information at once and then do what ever we want to it. -->
  <!-- when you hit enter button it will submit the submit button -->

    <input type="submit">

  <!-- button -->
  <!-- the value attribute give the button some text -->

    <input type="button" value="Click me">

  <!-- label tag/element -->
  <!-- good UI accessability -->
  <!-- label will help give info about what type of data the input is looking for -->
  <!-- name attribute -->
  <!-- for attribute must always belong to a label element -->
  <!-- id and name attribute must always belong to a input element -->
  <!-- the name and id element for an input label should match -->

    <label for="firstname">First Name:</label>
    <input id="firstname" name="firstname" type="text"><br>
    <label for="lastname">Last Name:</label>
    <input id="lastname" name="lastname" type="text">

    <input name="gender" id="male" type="radio" value="male">
    <label for="male">Male</label><br>

    <input name="gender" id="female" type="radio" value="female">
    <label for="female">Female</label><br>

    <input name="gender" id="other" type="radio" value="other">
    <label for="other">Other</label><br>

 <!-- you bind the input and label elements from having the "for" match the "id" attributes -->
 <!-- allowing for the input element to be on the inside of the label element allows for the input elmeent to be better used mobily. -->

    <label for="male">
      <input name="gender" id="male" type="radio">
      Male
      </label>

 <!-- check box elements -->

    <input name="skateboarding" id="skateboarding" type="checkbox" value="skateboarding">
    <label for="skateboarding">Skateboarding</label><br>

    <input name="hunting" id="hunting" type="checkbox" value="hunting">
    <label for="hunting">Hunting</label><br>

    <input name="skydiving" id="skydiving" type="checkbox" value="skydiving">
    <label for="skydiving">Skydiving</label><br>

    <!-- this will create a dropdown menu on our form -->
    <!-- called a select tag -->

    <br><br>
    <label for="weaonClass">Call of Duty Weapon Class</label>
    <select id="weaponClass" name="weaponClass" size="3">

    <!-- called an option tag/element -->
    <!-- gives the select element and object to show in its list -->
    <!-- selected attribute makes that one directly selected in the select parent dropdown -->
    <!-- size attribute makes the display of the list show how many the user wants and causes a scroll effect -->
      <option value="sniper">Sniper</option>
      <option value="assualt" selected>Assualt</option>
      <option value="smg">SMG</option>
      <option value="lmg">LMG</option>
      <option value="shotgun">Shotgun</option>
    </select>

    <br><br>
    <!-- like a list attribute -->
    <!-- datalist -->
    <label for="country">Country</label><br>
    <input list="country" name="country">
    <datalist id="country">
      <option value="Afghanistan">Afghanistan</option>
      <option value="Åland Islands">Åland Islands</option>
      <option value="Albania">Albania</option>
      <option value="Algeria">Algeria</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Andorra">Andorra</option>
      <option value="Angola">Angola</option>
      <option value="Anguilla">Anguilla</option>
      <option value="Antarctica">Antarctica</option>
      <option value="Antigua and Barbuda">Antigua and Barbuda</option>
      <option value="Argentina">Argentina</option>
      <option value="Armenia">Armenia</option>
      <option value="Aruba">Aruba</option>
      <option value="Australia">Australia</option>
      <option value="Austria">Austria</option>
      <option value="Azerbaijan">Azerbaijan</option>
      <option value="Bahamas">Bahamas</option>
      <option value="Bahrain">Bahrain</option>
      <option value="Bangladesh">Bangladesh</option>
      <option value="Barbados">Barbados</option>
      <option value="Belarus">Belarus</option>
      <option value="Belgium">Belgium</option>
      <option value="Belize">Belize</option>
      <option value="Benin">Benin</option>
      <option value="Bermuda">Bermuda</option>
      <option value="Bhutan">Bhutan</option>
      <option value="Bolivia">Bolivia</option>
      <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
      <option value="Botswana">Botswana</option>
                <option value="Bouvet Island">Bouvet Island</option>
                <option value="Brazil">Brazil</option>
                <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                <option value="Brunei Darussalam">Brunei Darussalam</option>
                <option value="Bulgaria">Bulgaria</option>
                <option value="Burkina Faso">Burkina Faso</option>
                <option value="Burundi">Burundi</option>
                <option value="Cambodia">Cambodia</option>
                <option value="Cameroon">Cameroon</option>
                <option value="Canada">Canada</option>
                <option value="Cape Verde">Cape Verde</option>
                <option value="Cayman Islands">Cayman Islands</option>
                <option value="Central African Republic">Central African Republic</option>
                <option value="Chad">Chad</option>
                <option value="Chile">Chile</option>
                <option value="China">China</option>
                <option value="Christmas Island">Christmas Island</option>
                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                <option value="Colombia">Colombia</option>
                <option value="Comoros">Comoros</option>
                <option value="Congo">Congo</option>
                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                <option value="Cook Islands">Cook Islands</option>
                <option value="Costa Rica">Costa Rica</option>
                <option value="Cote D'ivoire">Cote D'ivoire</option>
                <option value="Croatia">Croatia</option>
                <option value="Cuba">Cuba</option>
                <option value="Cyprus">Cyprus</option>
       <option value="Czech Republic">Czech Republic</option>
    </datalist>

    <br><br>
    <!-- multiline text box -->
    <!-- textarea element/tag -->
    <label for="commnts">Comments</label><br>
    <!-- sets the hieght and width of the multiline text area -->
    <!-- out of box we can set the scale of the text box -->
    <!-- rows attribute gives you how tall height the box is and col attribute give you how wide width the box is -->
    <textarea name="comments" rows="8" cols="40">
      This is some starter text.
    </textarea>

    <!-- email element/tag -->
    <label for="email">Email</label><br>
    <input type="email"><br>

        <!-- other input types -->
    <!-- <input type="color">
    <!-- <input type="month">
    <!-- <input type="date">
    <!-- <input type="week">
    <!-- <input type="password">
    <!-- <input type="range">
    <!-- <input type="search">
    <!-- <input type="file">

        <!-- input field attributes -->
    <!-- <input type="text" value="sample data" readonly> -->
    <!-- <input type="text" value="sample data" disabled> -->
        <!-- size controls the width of the characters -->
        <!-- width of the box -->
    <!-- <input type="text" value="sample data" size="8"> -->
        <!-- maxlength is what controls the size of the amount of characters -->
    <!-- <input type="text" value="sample data" maxlength="15"> -->

    <!-- <input
            id="atributes"
            type="number"
            value="5"
            size="20"
            maxlength="15"
            min="5"
            max="100"
            <!-- multiple will allow more than one email or file on an input -->
            multiple
            <!-- placeholders text -->
            placeholder="First name"
            <!-- required attribute, means required by the user to submit data -->
            required
            <!-- step attribute deals with numbers and we want to incriment -->
            <!-- use usally only with step -->
            step="5"
            <!-- autofocus attribute -->
            autofocus
            <!-- autocomplete attribute -->
            autocomplete="off"
            -->

    <br><br><br>
    <input type="submit">

  </form>

</body>
</html>