1 minute html tutorial - form basics

25
1 Minute HTML <form> basics

Upload: rimaoka

Post on 15-Apr-2017

332 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: 1 Minute HTML tutorial - form basics

1 Minute HTML

<form> basics

Page 2: 1 Minute HTML tutorial - form basics

HTML form with

one submit button

Page 3: 1 Minute HTML tutorial - form basics
Page 4: 1 Minute HTML tutorial - form basics

A form usually has one

“submit” button

Page 5: 1 Minute HTML tutorial - form basics

If you press it…

Page 6: 1 Minute HTML tutorial - form basics
Page 7: 1 Minute HTML tutorial - form basics

… you jump to a different page

Page 8: 1 Minute HTML tutorial - form basics

Let’s see how

<form> works

Page 9: 1 Minute HTML tutorial - form basics
Page 10: 1 Minute HTML tutorial - form basics

“action” is a file,

which processes submitted data

Page 11: 1 Minute HTML tutorial - form basics

It’s usually NOT an .html file

Page 12: 1 Minute HTML tutorial - form basics

Rather, a server-side

program file, like .php

Page 13: 1 Minute HTML tutorial - form basics

However, we are using .html

for demo

Page 14: 1 Minute HTML tutorial - form basics

“method” is either “get” or “post”

Page 15: 1 Minute HTML tutorial - form basics

Later lessons will explain difference

between “get” and “post

Page 16: 1 Minute HTML tutorial - form basics
Page 17: 1 Minute HTML tutorial - form basics

input type=“submit” creates

a submit button

Page 18: 1 Minute HTML tutorial - form basics

“value” is the display text

of the button

Page 19: 1 Minute HTML tutorial - form basics

Create action.html

Page 20: 1 Minute HTML tutorial - form basics
Page 21: 1 Minute HTML tutorial - form basics

Rendering in the

browser

Page 22: 1 Minute HTML tutorial - form basics
Page 23: 1 Minute HTML tutorial - form basics

Press the button

Page 24: 1 Minute HTML tutorial - form basics
Page 25: 1 Minute HTML tutorial - form basics

URL also changed to

action.html