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

FOR LOOP , RANGE

  FOR LOOP  A  while  loop is perfect to use when we  don't  know how many times we want the loop to repeat.  If we have an idea of how many times we want the loop to repeat, we can use a  for  loop to loop code in exactly the same way the  while  loop did.  EXAMPLE :  for counter in range(10):   print(counter) RANGE  The  range  function creates a list of numbers in the range you create. If you only give it one number, it will start at  0  and move to a state where the final number is  one less  than the number in the brackets. In this case, the final number would be  9 .  EXAMPLE :  total = 0 for number in range(100) :   total += number   print(total)
Post a Comment
Read more

CONTINUE COMMAND AND EXIT LINE

  The Continue Command  The  continue  command stops executing code in the loop and starts at the top of the loop again. Essentially, we want to kick the user back to the original question. EXAMPLE : while True:   print("You are in a corridor, do you go left or right?")   direction = input("> ")   if direction == "left":     print("You have fallen to your death")     break   elif direction == "right":     continue   else:     print("Ahh! You're a genius, you've won") NOTE :  The  else  statement refers to any input besides left or right (up or esc). Since the user is a winner, we do  not  want to use  break  or it would say they have failed.  EXIT  COMMAND LINE  The previous code continues to loop even after the user has won. Let's fix that with the  exit()  command EXAMPLE: print("Let's play chutes and ladders. Pick ladder or chute.") while...
Post a Comment
Read more

IF AND ELSE STATEMENT

  If Statements    These statements are a bit like asking a question. You are telling the computer:  if  something is true,  then  do this specific block of code. Double equals ( == ) is asking the computer to compare if these two things are  exactly  the same.  EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  What is else? IF  the condition is  not  met with the  if  statement, then we want the computer to do the  else  part instead. Likewise, if the condition  is  met in the  if  statement, then the  else  bit is ignored by the computer. The  else  statement must be the first thing  unindented  after the  if  statement and in line with it    EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  print("Welcome Dude!")  print("You're just the baldest dude I've ever seen...
Post a Comment
Read more