Improving the User Interface
Improve the User Interface of Your Web Application. In this section, you’ll learn how to add an HTML
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.
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: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: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.
The form element also contains two HTML attributes called
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: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.
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
name defines what the value the user enters will be referred to as.
<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.
<input> element creates the button that allows your users to submit their input. This element also has two HTML attributes, which are named
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.
The information that you’ll need to connect your form submission to your Flask code is the first
celsius, which you’ll use to access the submitted value in your function.
Become a Member to join the conversation.