14.4. Web Applications and HTML Forms

Perhaps you’re thinking, “I don’t usually perform searches by typing in URL’s – I fill out a search form.” True – if web applications forced users to interact with them by entering query strings, the World-Wide Web would be a much less popular place.

So go ahead – bring up the Google home page (I’ll wait):

http://google.com

Now, type in your query. When I type in “Microsoft” and click Search, here is what I see:

../_images/googlesearchresults.png

Now, take a good look at the URL in the title bar – notice the query string? It’s a bit more complicated than the one I had you create by hand earlier. But you can probably pick out the “q=Microsoft” if you look closely. How did all of that get there? Well, when you clicked Search, the browser took the information you typed into the form, packaged it up into a query string, and transmitted it to the Google web server. You see, when you fill out a form on a web page and click Submit, the browser uses the form data to construct a URL, and then sends a normal request to the web server.

Even if you’re a novice at writing HTML pages, it’s not hard to learn to create HTML forms. Take a look at this simplified version of the Google home page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
    <title>Google</title>
</head>
<body>
    <div align="center">
    <img src="https://www.google.com/images/logo.png"><br><br>
    <form action="http://google.com/search">
      Enter your search words: <input type="text" name="q"><br><br>
      <input type="submit" name="btnG" value="Google Search">
    </form>
    </div>
</body>
</html>

Focus on the region of this example in between the <form> tags. Here’s a quick overview of this part of the page:

Try it out! Using Notepad, type in this example, and save as googleform.html. Open it in your browser; you should see something like this:

../_images/googleform.png

Fill out the form, and, if Google still works as it did when this chapter was written, you should see search results appear in your browser.

You have attempted of activities on this page
Next Section - 14.5. Writing Web Applications With Flask