Build form a story with html5 form
Tags: html
Published: 2020-05-02 08:38:24

# [Demo](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/form-story/) of final form

## `action` attribute directs where the form should go.  As a convention that [HTTP](https://www.codecademy.com/articles/http-requests) verb `POST` is capitalized.  It works as well if written as `method="post"` all lower case.

```html
        <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](https://www.diffen.com/difference/GET-vs-POST-HTTP-Requests).

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

Send info from my form to "story.html" location using `GET` request.
```html
<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](https://stackoverflow.com/questions/12543848/does-form-data-still-transfer-if-the-input-tag-has-no-name) 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.

```html
        <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.

```html
        <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 <textarea> field, include it between the opening and closing <textarea>

```html
        <textarea>
          Click here to write
        </textarea>
```

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

```html
        <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>`.

```html
<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>
```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="heggy231" data-slug-hash="ZEbaoPP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="datalist form">
  <span>See the Pen <a href="https://codepen.io/heggy231/pen/ZEbaoPP">
  datalist form</a> by Heggyhere (<a href="https://codepen.io/heggy231">@heggy231</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## Matching a Pattern using [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/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

```html
<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](https://www.rexegg.com/regex-quickstart.html#morequants) that matches pattern one or more.

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

```html
<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.

```html
<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.

```html

<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.

```html
        <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>
```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="heggy231" data-slug-hash="KKdyRYG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="drop down list form">
  <span>See the Pen <a href="https://codepen.io/heggy231/pen/KKdyRYG">
  drop down list form</a> by Heggyhere (<a href="https://codepen.io/heggy231">@heggy231</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### resource on [form](https://www.codecademy.com/learn/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-forms/cheatsheet)

### [form example](https://codepen.io/heggy231/pen/bGVoyaZ)

### [form validation](https://codepen.io/heggy231/pen/eYpeZqB)

### [form login validation](https://codepen.io/heggy231/pen/QWjOEWb)


PS: My principle when learning:
> Don't seek to know everything but seek to figure out everything.
> - [WatchandCode](https://watchandcode.com/)