1 minute html tutorial - input textbox and label
TRANSCRIPT
![Page 1: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/1.jpg)
1 Minute HTML
<input> textbox and <label>
![Page 2: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/2.jpg)
Form with an input
textbox
![Page 3: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/3.jpg)
![Page 4: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/4.jpg)
An input textbox accepts
a free text
![Page 5: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/5.jpg)
A label describes what the
textbox is for
![Page 6: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/6.jpg)
Pressing the submit button…
![Page 7: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/7.jpg)
You jump to another page
![Page 8: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/8.jpg)
The URL part after “?”
has the input from the textbox
![Page 9: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/9.jpg)
The URL part after “?”
... is called “query string”
![Page 10: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/10.jpg)
Let’s see how an
<input> textbox works
![Page 11: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/11.jpg)
![Page 12: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/12.jpg)
<input> tag with type=“text”
becomes a textbox
![Page 13: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/13.jpg)
“name” is the parameter
name in query string
![Page 14: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/14.jpg)
<input> tag doesn’t have
</input>
![Page 15: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/15.jpg)
![Page 16: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/16.jpg)
You enter a text
![Page 17: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/17.jpg)
Press the button
![Page 18: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/18.jpg)
as in “action”,
you jumped to action.html
![Page 19: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/19.jpg)
Your input is in query string
![Page 20: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/20.jpg)
How <label> works with
an <input> textbox
![Page 21: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/21.jpg)
![Page 22: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/22.jpg)
Enclose <input> in
<label> </label>
![Page 23: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/23.jpg)
If <label> </label> encloses <input>,
then clicking on the label…
![Page 24: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/24.jpg)
put the focus to the input textbox
![Page 25: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/25.jpg)
![Page 26: 1 Minute HTML tutorial - input textbox and label](https://reader031.vdocuments.pub/reader031/viewer/2022021919/587d6f901a28ab32318b781b/html5/thumbnails/26.jpg)