Skip to main content

form

 form

👉 In the current template in index.html, delete 'hello world' and add a<form> tag to add a form inside the <body>.


  <form>

    

  </form>



Don't worry. It is suppose to be empty when you hit run. Let's fix that.


method & action

👉 First, we'll add a post method which packages the data in the form and sends it to the web server. (Like packaging something in an envelope and sending it through the postal service back to your web server...well kinda).


I'll also add an action. This specifies where to send the data. Later on, we'll write some 'process' code in Flask to deal with the data that arrives from the form, so that's the address we'll give now. Don't forget the forward slash.


<form method = "post" action = "/process">

    

</form>



Getting Input

👉 Inside the form, we'll use the <input> tag to get the user's name. Input tags have several types that specify the sort of data they will collect. In this one, we'll use text. Every input tag must be given an identifier by setting the name property inside the tag.


<form method = "post" action = "/process">

    <p>Name: <input type="text" name="username"> </p>

</form>



Refresh and we will see the first input box and text label on our page:  

 


Different Types of Text Box
Here are a few examples of different types of text boxes you can use:

<form>
    <p>Name: <input type="text" name="username"> </p>
    <p>Email: <input type="Email" name="email"> </p>
    <p>Website: <input type="url" name="website"> </p>
    <p>Age: <input type="number" name="age"> </p>
    <p><input type="hidden" name="userID" value="232"> </p>
    
  </form>


hidden is particularly useful when you have some information that is relevant to the form or back end processing (like user ID), but that the user doesn't necessarily need to see.

Buttons
👉 Next up, we need a 'submit' button. And the tag, like most HTML tags, is blindingly obvious. Go on, see if you can spot it in the code below:

<form>
    <p>Name: <input type="text" name="username"> </p>
    <p>Email: <input type="Email" name="email"> </p>
    <p>Website: <input type="url" name="website"> </p>
    <p>Age: <input type="number" name="age"> </p>
    <p><input type="hidden" name="userID" value="232"></p>
  <button type="submit">Save Data</button>
    
  </form>


Again, there are different types of button that you can specify.

Our page is now looking a bit like this:   
   


Required
Putting the required attribute inside an input tag makes it, erm, well, required. ie the user can't leave it blank:

<p>Name: <input type="text" name="username" required> </p>


Drop down... drop down!
👉 To create a drop down menu, you use the <select> tag, which works a bit like an unordered list. Each option in the menu is surrounded by <option> tags. I've added a drop down to my form here:

<form>
    <p>Name: <input type="text" name="username" required> </p>
    <p>Email: <input type="Email" name="email"> </p>
    <p>Website: <input type="url" name="website"> </p>
    <p>Age: <input type="number" name="age"> </p>
    <input type="hidden" name="userID" value="232"> </p>
    <p>
      Fave Baldy: 
      <select name="baldies">
        <option>David</option>
        <option>Jean Luc Picard</option>
        <option>Yul Brynner</option>
      </select>
    </p>
    <button type="submit">Save Data</button>
  </form>


This gives me a lovely little drop down like this:   

  

Value
However, there's a problem. I haven't told the form how to identify and store the choice. To do this, I have to give each option a value.

<p>
  Fave Baldy: 
  <select name="baldies">
    <option value = "david">David</option>
    <option value = "jean luc">Jean Luc Picard</option>
    <option value = "yul">Yul Brynner</option>
  </select>
</p>










Comments

Post a Comment

Popular posts from this blog

Automate! Automate!

 Making this customizable 👉So how about making our search user customizable? In the code below, I have: Asked the user to input an artist (line 14) Tidied up their input (line 15) formatted the search URL as an fString that includes the artist (line 19) Here's tAutomate! Automate! We are so close. I can taste it, folks! Massive kudos on getting this far! Today's lesson, however, will work best if you have one of Replit's paid for features (hacker plan or cycles). Free plan Repls 'fall asleep' after a while. Automation kinda relies on the Repl being always on. If you have hacker plan or you've bought some cycles, then you can enable always on in the drop down menu that appears when you click your Repl name (top left).he code: This is important because when our repl is always running, it can keep track of time and schedule events. 👉 I've set up a simple schedule that prints out a clock emoji every couple of seconds. It works like this: Import schedule librar...
Post a Comment
Read more

HTTP & Sessions

 HTTP & Sessions One of the main protocols (rules that govern how computers communicate) on the web is called HTTP. HTTP is what is known as a stateless protocol. This means that it doesn't 'remember' things. It's a bit like having a conversation with a goldfish. You can ask a question and get a reply, but when you ask a follow up question, the original has already been forgotten, as has who you are and what you were talking about. So if HTTP is stateless, how come my news site remembers to give me the weather for my home town, my preferred South American river based online store tells me when it's time to order more multivitamins, and I'm justifiably proud of my #100days success streak? The answer is......... Sessions Sessions are a way of storing files on your computer that allows a website to keep a record of previous 'conversations' and 'questions' you've asked. By using sessions, we can store this info about the user to access later....
Post a Comment
Read more

Incoming!

 Incoming! Today, we're going to learn how to deal with data from forms in Flask. 👉 To start, I've added yesterday's HTML code for my form in main.py for you already. (You're welcome!) Go take a look! 👉 However, at the moment, the app.route() has no method associated with it, so I need to create a route for this page to receive the data. First, I need a new import: request. Then I create the app.route - I also need to add an extra argument to specify the methods being received. At the moment, that's just 'post', but it does need to be ALL CAPS - POST. Finally I define the process() subroutine that returns request.form 👉 Here's the new code on its own: from Flask import Flask, request app.route('/process', methods=["POST"]) def process():   return request.form 👉 And here it is as part of the whole code: from flask import Flask, request app = Flask(__name__) app.route("/process", methods=["POST"]) def process():   ...
Post a Comment
Read more