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

Web Scraping

 Web Scraping Some websites don't have lovely APIs for us to interface with. If we want data from these pages, we have to use a tecnique called scraping. This means downloading the whole webpage and poking at it until we can find the information we want. You're going to use scraping to get the top ten restaurants near you. Get started 👉 Go to a website like Yelp and search for the top 10 reastaurants in your location. Copy the URL.   url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+United+States"   Import libraries 👉 Import your libraries. Beautiful soup is a specialist library for extracting the contents of HTML and helping us parse them. Run the Repl once your imports are sorted because we want the Beautiful Soup library to be installed (it'll run quicker this way). import requests from bs4 import BeautifulSoup url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+Unite...
Post a Comment
Read more

It's Called Hashing,Hashing, Printing the Hash , Salty, Second User ,

 It's Called Hashing One of the big issues with storing usernames and passwords in a database is what happens if we're hacked? If those passwords are stored as text, our users' security is compromised. Probably across multiple sites because they ignored our advice and used the same password for everything!!!!! Hashing  In reality, organizations don't store your actual password. They store a hash of your password. A hash is produced by turning your password into a sequence of numbers, then passing it though a hashing algorithm (some mathematical process that is very difficult to reverse engineer). The data spit out of this hashing algorithm is what's stored instead of your actual password. 👉 So let's do it. I'm using the built-in hash function to create a numerical hash of the password  password = "baldy1" password = hash(password) print(password) # This will output a really long number  👉 Now let's store that hashed version in our database in...
Post a Comment
Read more

Hide & Remove,Come Back!,

 Hide & Remove DISCLAIMER: I promise the good stuff is coming back. We have to go through the valley to get to the mountain, right? Sometimes, we want to remove a button, image or piece of text from the screen. To do this, we use pack_forget(). 👉 We'll start with our default tkinter program. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!")  button.pack() tk.mainloop() 👉 Now I'm going to add a new subroutine to hide the label and call it on a button click. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  # New subroutine def hideLabel():   hello.pack_forget() # Removes the 'hello' label hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!", command = hideLabel) # Call...
Post a Comment
Read more