SLIDE 1
Agenda
Recap HTML Forms HTTP POST Development Tools Exercises
Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST - - PowerPoint PPT Presentation
Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST - - PowerPoint PPT Presentation
Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST Development Tools Exercises Recap HTTP: Computing model evolution Client Server Request Response HTTP: Uniform Resource Locator (URL) DOMAIN NAME RESOURCE rubymonstas.ch
SLIDE 2
SLIDE 3
Recap
SLIDE 4
HTTP: Computing model evolution
Client Server
Request Response
SLIDE 5
HTTP: Uniform Resource Locator (URL)
rubymonstas.ch DOMAIN NAME RESOURCE /curriculum
SLIDE 6
HTTP: Method & Format
GET REQUEST METHOD FORMAT .HTML
SLIDE 7
Sinatra: Map routes to code
Sinatra
Request Response
get '/' do 'Hello World' end
SLIDE 8
HTML Forms
SLIDE 9
HTML Form
labels, input fields, submit button
SLIDE 10
HTML Form
SLIDE 11
HTML Form
<form method="POST"> <p> <label>Input 1 text: <input type="text" name="input1" /> </label> </p> <p> <label>Input 4 file: <input type="file" name="input4" /> </label> </p> <p> <label>Input 7 number: <input type="number" name="input7" /> </label> </p> </form>
SLIDE 12
HTML Form
<input type="XY" name="UNIQUE_NAME" /> <input type="text" name="some_unique_name1" /> <input type="checkbox" name="some_unique_name2" /> <input type="color" name="some_unique_name3" /> <input type="file" name="some_unique_name4" /> <input type="email" name="some_unique_name5" /> <input type="hidden" name="some_unique_name6" /> <input type="number" name="some_unique_name7" /> <input type="password" name="some_unique_name8" /> <input type="radio" name="some_unique_name9" />
SLIDE 13
HTML Form
Let’s check this in the browser: http://localhost:4567/example_form
SLIDE 14
HTTP POST
SLIDE 15
HTTP POST
We learned from GET so far There are other verbs, like POST Let’s check this in the browser
SLIDE 16
Developer Tools (HTTP GET)
the page we requested (resource) the response rendered by the browser the request in the developer tools
SLIDE 17
Developer Tools (HTTP POST)
SLIDE 18
Developer Tools (HTTP POST)
SLIDE 19
Developer Tools (HTTP POST)
SLIDE 20
Developer Tools (HTTP POST)
<form method="POST"> <p> <label>Input 1 text: <input type="text" name="input1" /> </label> </p> <p> <label>Input 4 file: <input type="file" name="input4" /> </label> </p> <p> <label>Input 7 number: <input type="number" name="input7" /> </label> </p> </form>
SLIDE 21
Time to practice
SLIDE 22
Resources
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input https://developer.mozilla.org/en/docs/Web/HTML/Element/form https://developer.mozilla.org/en-US/docs/Tools https://developer.mozilla.org/en-US/docs/Web/HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol