HTML FORMS

  FORM VALIDATION Matching a Pattern In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the  pattern  attribute and assign it a  regular expression , or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted. Let’s say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the regex:  [0-9]{14,16}  which checks that the user provided only numbers and that they entered at least 14 digits and at most 16 digits. To add this to a form: <form action = "/example.html" method = "POST" >    <label for = "payment" > Credit Card Number (no spaces): </label>    <br>    <input id = "payment" name = "payment" type = "text" required pattern = "[0-...

  FORM VALIDATION Checking Text Length In the previous exercise, we were able to use  min  and  max  to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn’t want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters. Conveniently, there are built-in HTML5 validations for these situations. To set a minimum number of characters for a text field, we add the  minlength  attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the  maxlength  attribute and set a maximum value. Let’s take a look at these attributes in code: <form action = "/example.html" method = "POST" >    <label for = "summary" > Summarize your feelings in less than 250 character s </label>...

  FORM VALIDATION Set a Minimum and Maximum Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g.  <input type="number">  and  <input type="range"> . To set a minimum acceptable value, we use the  min  attribute and assign a value. On the flip side, to set a maximum acceptable value, we assign the  max  attribute a value. Let’s see this in code: <form action = "/example.html" method = "POST" >    <label for = "guests" > Enter # of guests: </label>    <input id = "guests" name = "guests" type = "number" min = "1" max = "4" >    <input type = "submit" value = "Submit" > </form> If a user tries to submit an input that is less than 1 a warning will appear: A similar message will appear if a user tries to input a number greater than 4. Let’s now see this action. Inst...

  FORM VALIDATION Requiring an Input Sometimes we have fields in our  <form> s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the  required  attribute to an  <input>  element. Take for example: <form action = "/example.html" method = "POST" >    <label for = "allergies" > Do you have any dietary restrictions? </label>    <br>    <input id = "allergies" name = "allergies" type = "text" required >    <br>    <input type = "submit" value = "Submit" > </form> This renders a text box, and if we try to submit the  <form>  without filling it out we get this message: The styling of the message varies from browser to browser, the picture above depicts the message in a Chrome browser. We’ll also continue to show these messages as they appear in Chrome in later ...

  FORM VALIDATION Introduction to HTML Form Validation Ever wonder how a login page actually works? Or why the combination of a username and password grants you access to a website? The answers lie in  validation . Validation is the concept of checking user provided data against the required data. There are different types of validation. One type is  server-side validation , this happens when data is sent to another machine (typically a server) for validation. An example of this type of validation is the usage of a login page. The form on the login page accepts username and password input, then sends the data to a server that checks that the pair matches up correctly. On the other hand, we use  client-side validation  if we want to check the data on the browser (the client). This validation occurs before data is sent to the server. Different browsers implement client-side validation differently, but it leads to the same outcome. Shared among the different browse...

  <!DOCTYPE html> <html lang = "en" dir = "ltr" > <head> <meta charset = "utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > <link href = "https://fonts.googleapis.com/css?family=Rubik" rel = "stylesheet" > <title> Forms Review </title> </head> <body> <section id = "overlay" > <img src = "https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt = "Davie's Burgers Logo" id = "logo" > <hr> <form action = "submission.html" method = "POST" > <h1> Create a burger! </h1> <section class = "protein" > <label for = "patty" > What type of protein would you like? </label> <i...