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 /curriculum

HTTP: Method & Format REQUEST METHOD FORMAT GET .HTML

Sinatra: Map routes to code Sinatra Request get '/' do 'Hello World' Response end

HTML Forms

HTML Form labels, input fields, submit button

HTML Form

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 >

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" />

HTML Form Let’s check this in the browser: http://localhost:4567/example_form

HTTP POST

HTTP POST We learned from GET so far There are other verbs, like POST Let’s check this in the browser

Developer Tools (HTTP GET) the request in the developer tools the page we requested (resource) the response rendered by the browser

Developer Tools (HTTP POST)

Developer Tools (HTTP POST)

Developer Tools (HTTP POST)

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 >

Time to practice

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