Improving the User Interface

00:00 Improve the User Interface of Your Web Application. In this section, you’ll learn how to add an HTML <form> input element to your web app to allow users to interact with it in a straightforward manner that they’re used to from other online applications. To improve the interface and user experience of your web app, you’ll need to work with languages other than Python, namely front-end languages, such as HTML, CSS, and JavaScript.

00:29 This course avoids going into these as much as possible, to remain focused on using Python. However, if you want to add an input box to your web app, then you’ll need to use some HTML.

00:40 You’ll implement only the absolute minimum to get your web app looking and feeling more like a website that users will be familiar with. You’ll use the HTML <form> element to collect their input.

00:53 After the update to your web app, you’ll have a text field where the user can input a temperature in degrees Celsius. There will be a Convert button to convert the user-supplied Celsius temperature into degrees Fahrenheit.

01:06 The converted result will be displayed on the next line and will be updated whenever the user clicks Convert. You’ll also change the functionality of the app so that both the form and the conversion result are displayed on the same page.

01:20 You’ll refactor the code so that you only need a single URL endpoint.

01:26 Start by creating a <form> element on your landing page. Enter the following few lines of HTML into the return statement of index(), replacing the text message from before.

01:58 When you reload your page at the base URL, you’ll see an input box and a button. The HTML renders correctly. Congratulations, you just created an input form!

02:10 Keep in mind that these few lines of HTML don’t constitute a valid HTML page by themselves. However, modern browsers are designed in a way that they can fill in the blanks and create the missing structure for you.

02:23 What happens when you enter a value and click Convert?

02:30 While the page looks just the same, you might notice that the URL changed.

02:36 It now displays a query parameter with a value after the base URL.

02:43 This is good news. The value is successfully recorded and added as a query parameter to the HTTP GET request. Seeing this URL means that you’re once again requesting the base URL, but this time with some extra values that you’re sending along. However, nothing currently happens with that extra value. While the form is set up as it should be, it’s not yet correctly connected to the code functionality of your Python web app.

03:10 In order to understand how to make that connection, you’ll need to know about each piece of the <form> element to see what the different parts are all about.

03:19 You’ll look at the following three elements and their attributes separately: the <form> element, the input box, and the submit button.

03:28 Each of these are separate HTML elements. While this course aims to keep the focus on Python rather than HTML, it’ll still be helpful to have a basic understanding of what goes on in this block of HTML code. Start by looking at the outermost HTML element.

03:46 The <form> element creates an HTML form. The other two <input> elements are wrapped inside it.

03:54 The form element also contains two HTML attributes called action and method. action determines where the data that the user submits will be sent. You’re leaving the value as an empty string here, which makes the browser direct the request to the same URL it was called from.

04:12 In your case, that’s the empty base URL. method defines what type of HTTP request the form produces. Using the default of "get" creates an HTTP GET request.

04:25 This means that the user-submitted data will be visible in the URL query parameters. If you were submitting sensitive data or communicating with a database, then you would need to use an HTTP POST request instead.

04:41 After inspecting the <form> element and its attributes, your next step is to take a closer look at the first of two <input> elements.

04:48 The second HTML element is an <input> element that’s nested inside the <form> element.

04:55 The first <input> element has two HTML attributes. type defines what type of <input> element should be created.

05:03 There are many to choose from, such as checkboxes and drop-down elements. In this case, you want the user to enter a number as text, so you’re setting the type to "text". name defines what the value the user enters will be referred to as.

05:18 You can think of it as the key to a dictionary, where the value is whatever the user inputs into the text box. You saw this name show up in the URL as the key of the query parameter.

05:28 You’ll need this key later to retrieve the user-submitted value.

05:34 HTML <input> elements can have different shapes, and some of them require different attributes. You’ll see an example of this when looking at the second <input> element, which creates a Submit button and is the last HTML element that makes up your code snippet.

05:49 The second <input> element creates the button that allows your users to submit their input. This element also has two HTML attributes, which are named type and value. type defines what sort of input element will be created. Using the value "submit" creates a button that allows you to send the bundled-up form data onwards. value defines what text the button should display. Feel free to change it to see how the button displays your changed text.

06:19 With this brief overview of the different HTML elements and their attributes in mind, you now have a better understanding of what you’re adding to your Python code and what the elements are used for.

06:30 The information that you’ll need to connect your form submission to your Flask code is the first <input> element’s name value, celsius, which you’ll use to access the submitted value in your function.

06:42 Next, you’ll learn how to change your Python code to correctly process the submitted form input.