1 Minute HTML tutorial - form basics
25
1 Minute HTML <form> basics
Transcript of 1 Minute HTML tutorial - form basics
![Page 1: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/1.jpg)
1 Minute HTML
<form> basics
![Page 2: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/2.jpg)
HTML form with
one submit button
![Page 3: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/3.jpg)
![Page 4: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/4.jpg)
A form usually has one
“submit” button
![Page 5: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/5.jpg)
If you press it…
![Page 6: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/6.jpg)
![Page 7: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/7.jpg)
… you jump to a different page
![Page 8: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/8.jpg)
Let’s see how
<form> works
![Page 9: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/9.jpg)
![Page 10: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/10.jpg)
“action” is a file,
which processes submitted data
![Page 11: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/11.jpg)
It’s usually NOT an .html file
![Page 12: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/12.jpg)
Rather, a server-side
program file, like .php
![Page 13: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/13.jpg)
However, we are using .html
for demo
![Page 14: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/14.jpg)
“method” is either “get” or “post”
![Page 15: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/15.jpg)
Later lessons will explain difference
between “get” and “post
![Page 16: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/16.jpg)
![Page 17: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/17.jpg)
input type=“submit” creates
a submit button
![Page 18: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/18.jpg)
“value” is the display text
of the button
![Page 19: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/19.jpg)
Create action.html
![Page 20: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/20.jpg)
![Page 21: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/21.jpg)
Rendering in the
browser
![Page 22: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/22.jpg)
![Page 23: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/23.jpg)
Press the button
![Page 24: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/24.jpg)
![Page 25: 1 Minute HTML tutorial - form basics](https://reader031.fdocument.pub/reader031/viewer/2022022414/587d6fb21a28ab32318b7875/html5/thumbnails/25.jpg)
URL also changed to
action.html