Build form a story with html5 form

Demo of final form

action attribute directs where the form should go. As a convention that HTTP verb POST is capitalized. It works as well if written as method="post" all lower case.

        <form action="/example.html" method="POST">
        </form>

method="GET" vs method="POST" specifies how form data is submitted to server. When the method is GET, all form data is encoded into the URL, appended to the action URL as query string parameters. With POST, form data appears within the message body of the HTTP request.

• "GET" form data is encoded and retrieve a specific resource.

Send info from my form to "story.html" location using GET request.

<form action="story.html" method="GET"></form>

• "POST" form data appears within the message body of the HTTP request and create a new resource.

Every <input> must have name attribute for server to receive its data. name attribute for input value are submitted together as a pair to track which input value goes with name. Think of it as name: value pair.

        <form action="/example.html" method="POST">

          <label for="username">Name:</label>
          <input type="text" name="username" id="username" required>

          <input type="submit" value="submit">
        </form>

To associate <label> to <input> in form. <label> for="username" need to match up with <input> id="username". This creates <label> and <input> association.

1. Add id attribute with value "meal" to <input>

2. Assign for attribute with value "meal" of <label>. id and for value must match for association to work.
   

        <form action="/example.html" method="POST">
          <label for="meal">What do you want to eat?</label>
          <input type="text" name="food" id="meal">
        </form>

To show default text to appear in a field, include it between the opening and closing

        <textarea>
          Click here to write
        </textarea>

Display Text area larger by setting dimension (rows, cols).

        <label for="message">Meaningful Message:</label>
        <textarea name="message" id="message" cols="40" rows="8" required>Click here to write</textarea>
        <br>

Difference between <select> vs. <datalist> is <datalist> is more flexible. User may input whatever value or one of the options in drop list. For this case, the value of the <input>‘s name and the value of the option selected from drop-down list, or what the user typed in, is sent as a pair.

Important Note: In order for <datalist> to work with <input>, <input> must associate itself by adding list attribute with <datalist>. id="cities" of <datalist> matches list="cities".

Remember to add <label>, <input> when creating <datalist>.

<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">

  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

See the Pen datalist form by Heggyhere (@heggy231) on CodePen.

Matching a Pattern using Regular Expressions (a sequence of characters that make up a search pattern) in forms. Use pattern attribute.

ex) Validate credit card number (14 - 16 digits). [0-9] for user to only provide numbers. {14,16} least 14 digits and at most 16 digits

<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">

ex) Validate usernames to only letters and numbers (and not special characters like ! or @). [a-zA-Z0-9]+ for only letters and numbers. + is quantifier that matches pattern one or more.

"abc123AB".match(/[a-zA-Z0-9]+/);
// => returns all characters that matches "abc123AB" because of `+` greedy quantifier

<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">

As I build form, first I create submit button so that I could keep checking if the information is getting sent correctly.

<form action="story.html" method="GET">
  <input type="submit" value="Form My Story!">
</form>

Add radio button type to form. Use radio button when I want boolean value as my answer. ex: yes/no, one or the other

name attribute in <input> groups the radio buttons' data together. Data gets submitted name: "value" pair when whichever one of yes or no is selected.

<form action="story.html" method="GET">
        <span>Yes or No:</span>
        <input type="radio" id="yes" name="answer" value="yes" required>
        <label for="yes">Yes</label>
        <input type="radio" id="no" name="answer" value="no" required>
        <label for="no">No</label>
        <br>

</form>

To create drop down form, use <select> and <option value="faster">Faster</option>. option value="faster" is the data that gets sent to the server.

        <label for="speed">Relative speed (ends in -er):</label>
        <select name="speed" id="speed" required>
          <option value="faster">Faster</option>
          <option value="slower">Slower</option>
          <option value="speedier">Speedier</option>
          <option value="lazier">Lazier</option>
        </select>
        <br>

See the Pen drop down list form by Heggyhere (@heggy231) on CodePen.

resource on form

form example

form validation

form login validation

PS: My principle when learning:

Don't seek to know everything but seek to figure out everything.

• WatchandCode