Web Forms
Web Forms A web form is an area of an HTML page that contains input areas When the user submits the form, the browser uses the information in the form to construct a URL and transmit the form data to a web application
A Form for Google Search <html> <body> <div align="center"> <img src="https://www.google.com/images/logo.png"> <br><br> <form action="https://www.google.com/search"> Enter your search words: <input type="text" name="q"><br><br> <input type="submit" value="Google Search"> </form> </div> </body> </html>
Form Anatomy <form> tag <input> tag action: specifies URL type: kind of input area name: used to create query parameter value: Default value for text box Label for button <form action="https://www.google.com/search"> Enter your search words: <input type="text" name="q"><br><br> <input type="submit" value="Google Search"> </form>
Form processing User clicks submit button on form Browser builds query string using data entered into <input> areas on form Browser constructs URL using action attribute + query string and sends to server Server processes request and sends response
Form Submission Example User enters "Python" in search box Browser builds URL: https://www.google.com/search?q=Python <form action="https://www.google.com/search"> Enter your search words: <input type="text" name="q"><br><br> <input type="submit" value="Google Search"> </form>
Handling Special Characters Spaces and certain other characters are not allowed in the query string The browser encodes these characters using the ASCII table See asciitable.com Spaces can be encoded either as + or as %20 Other special characters are encoded as % followed by two hex digits Your program does not need to decode the data retrieved using request.args
Flask Example A Flask application can display a form, and handle its submission When a form is generated by an application, its action attribute contains only the path, not the complete URL The browser fills in the rest of the URL automatically <form action="/hello"> … </form> See examples/webapps/helloform.py
Handling Errors Web applications need to handle errors and omissions on forms gracefully See examples/webapps/helloform_handle_errors.py
A Guessing Game Let's convert our guessing game to a web application We'll use a two-page design: Home page (/) Pick secret number Display guess form (submits to Guess page) Guess page (/guess) Check user's guess and give feedback
Remembering the Secret Number We must use a global variable to remember the secret number Local variables hold their values only while a function is running See /examples/webapps/guess.py