1 minute html tutorial - input textbox and label

26
1 Minute HTML <input> textbox and <label>

Upload: rimaoka

Post on 17-Jan-2017

255 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: 1 Minute HTML tutorial - input textbox and label

1 Minute HTML

<input> textbox and <label>

Page 2: 1 Minute HTML tutorial - input textbox and label

Form with an input

textbox

Page 3: 1 Minute HTML tutorial - input textbox and label
Page 4: 1 Minute HTML tutorial - input textbox and label

An input textbox accepts

a free text

Page 5: 1 Minute HTML tutorial - input textbox and label

A label describes what the

textbox is for

Page 6: 1 Minute HTML tutorial - input textbox and label

Pressing the submit button…

Page 7: 1 Minute HTML tutorial - input textbox and label

You jump to another page

Page 8: 1 Minute HTML tutorial - input textbox and label

The URL part after “?”

has the input from the textbox

Page 9: 1 Minute HTML tutorial - input textbox and label

The URL part after “?”

... is called “query string”

Page 10: 1 Minute HTML tutorial - input textbox and label

Let’s see how an

<input> textbox works

Page 11: 1 Minute HTML tutorial - input textbox and label
Page 12: 1 Minute HTML tutorial - input textbox and label

<input> tag with type=“text”

becomes a textbox

Page 13: 1 Minute HTML tutorial - input textbox and label

“name” is the parameter

name in query string

Page 14: 1 Minute HTML tutorial - input textbox and label

<input> tag doesn’t have

</input>

Page 15: 1 Minute HTML tutorial - input textbox and label
Page 16: 1 Minute HTML tutorial - input textbox and label

You enter a text

Page 17: 1 Minute HTML tutorial - input textbox and label

Press the button

Page 18: 1 Minute HTML tutorial - input textbox and label

as in “action”,

you jumped to action.html

Page 19: 1 Minute HTML tutorial - input textbox and label

Your input is in query string

Page 20: 1 Minute HTML tutorial - input textbox and label

How <label> works with

an <input> textbox

Page 21: 1 Minute HTML tutorial - input textbox and label
Page 22: 1 Minute HTML tutorial - input textbox and label

Enclose <input> in

<label> </label>

Page 23: 1 Minute HTML tutorial - input textbox and label

If <label> </label> encloses <input>,

then clicking on the label…

Page 24: 1 Minute HTML tutorial - input textbox and label

put the focus to the input textbox

Page 25: 1 Minute HTML tutorial - input textbox and label
Page 26: 1 Minute HTML tutorial - input textbox and label