Build form a story with html5 form

#html

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.

Add id attribute with value "meal" to <input>
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> </h2> <div class="highlight"><pre class="highlight html"><code> <textarea> Click here to write </textarea> </code></pre></div> Display Text area larger by setting dimension (rows, cols). <div class="highlight"><pre class="highlight html"><code> <label for="message">Meaningful Message:</label> <textarea name="message" id="message" cols="40" rows="8" required>Click here to write</textarea> </code></pre></div> <h2> <a name="difference-between-raw-ltselectgt-endraw-vs-raw-ltdatalistgt-endraw-is-raw-ltdatalistgt-endraw-is-more-flexible-user-may-input-whatever-value-or-one-of-the-options-in-drop-list-for-this-case-the-value-of-the-raw-ltinputgt-endraw-s-name-and-the-value-of-the-option-selected-from-dropdown-list-or-what-the-user-typed-in-is-sent-as-a-pair" href="#difference-between-raw-ltselectgt-endraw-vs-raw-ltdatalistgt-endraw-is-raw-ltdatalistgt-endraw-is-more-flexible-user-may-input-whatever-value-or-one-of-the-options-in-drop-list-for-this-case-the-value-of-the-raw-ltinputgt-endraw-s-name-and-the-value-of-the-option-selected-from-dropdown-list-or-what-the-user-typed-in-is-sent-as-a-pair" class="anchor"> </a> Difference between <code><select></code> vs. <code><datalist></code> is <code><datalist></code> is more flexible. User may input whatever value or one of the options in drop list. For this case, the value of the <code><input></code>‘s name and the value of the option selected from drop-down list, or what the user typed in, is sent as a pair. </h2> Important Note: In order for <code><datalist></code> to work with <code><input></code>, <code><input></code> must associate itself by adding <code>list</code> attribute with <code><datalist></code>. <code>id="cities"</code> of <code><datalist></code> matches <code>list="cities"</code>. Remember to add <code><label></code>, <code><input></code> when creating <code><datalist></code>. <div class="highlight"><pre class="highlight html"><code><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> </code></pre></div> <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"> 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>. <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <h2> <a name="matching-a-pattern-using-regular-expressions-a-sequence-of-characters-that-make-up-a-search-pattern-in-forms-use-raw-pattern-endraw-attribute" href="#matching-a-pattern-using-regular-expressions-a-sequence-of-characters-that-make-up-a-search-pattern-in-forms-use-raw-pattern-endraw-attribute" class="anchor"> </a> Matching a Pattern using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> (a sequence of characters that make up a search pattern) in forms. Use <code>pattern</code> attribute. </h2> ex) Validate credit card number (14 - 16 digits). <code>[0-9]</code> for user to only provide numbers. <code>{14,16}</code> least 14 digits and at most 16 digits <div class="highlight"><pre class="highlight html"><code><input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}"> </code></pre></div> ex) Validate usernames to only letters and numbers (and not special characters like ! or @). <code>[a-zA-Z0-9]+</code> for only letters and numbers. <code>+</code> is <a href="https://www.rexegg.com/regex-quickstart.html#morequants">quantifier</a> that matches pattern one or more. <div class="highlight"><pre class="highlight javascript"><code>"abc123AB".match(/[a-zA-Z0-9]+/); // => returns all characters that matches "abc123AB" because of `+` greedy quantifier </code></pre></div> <div class="highlight"><pre class="highlight html"><code><input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}"> </code></pre></div> <h2> <a name="as-i-build-form-first-i-create-submit-button-so-that-i-could-keep-checking-if-the-information-is-getting-sent-correctly" href="#as-i-build-form-first-i-create-submit-button-so-that-i-could-keep-checking-if-the-information-is-getting-sent-correctly" class="anchor"> </a> As I build form, first I create submit button so that I could keep checking if the information is getting sent correctly. </h2> <div class="highlight"><pre class="highlight html"><code><form action="story.html" method="GET"> <input type="submit" value="Form My Story!"> </form> </code></pre></div> <h2> <a name="add-radio-button-type-to-form-use-radio-button-when-i-want-boolean-value-as-my-answer-ex-yesno-one-or-the-other" href="#add-radio-button-type-to-form-use-radio-button-when-i-want-boolean-value-as-my-answer-ex-yesno-one-or-the-other" class="anchor"> </a> Add radio button type to form. Use radio button when I want boolean value as my answer. ex: yes/no, one or the other </h2> <code>name</code> attribute in <code><input></code> groups the radio buttons' data together. Data gets submitted name: "value" pair when whichever one of yes or no is selected. <div class="highlight"><pre class="highlight html"><code> <form action="story.html" method="GET"> Yes or No: <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> </form> </code></pre></div> <h2> <a name="to-create-drop-down-form-use-raw-ltselectgt-endraw-and-raw-ltoption-valuefastergtfasterltoptiongt-endraw-raw-option-valuefaster-endraw-is-the-data-that-gets-sent-to-the-server" href="#to-create-drop-down-form-use-raw-ltselectgt-endraw-and-raw-ltoption-valuefastergtfasterltoptiongt-endraw-raw-option-valuefaster-endraw-is-the-data-that-gets-sent-to-the-server" class="anchor"> </a> To create drop down form, use <code><select></code> and <code><option value="faster">Faster</option></code>. <code>option value="faster"</code> is the data that gets sent to the server. </h2> <div class="highlight"><pre class="highlight html"><code> <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> </code></pre></div> <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"> 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>. <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <h3> <a name="resource-on-form" href="#resource-on-form" class="anchor"> </a> resource on <a href="https://www.codecademy.com/learn/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-forms/cheatsheet">form</a> </h3> <h3> <a name="form-example" href="#form-example" class="anchor"> </a> <a href="https://codepen.io/heggy231/pen/bGVoyaZ">form example</a> </h3> <h3> <a name="form-validation" href="#form-validation" class="anchor"> </a> <a href="https://codepen.io/heggy231/pen/eYpeZqB">form validation</a> </h3> <h3> <a name="form-login-validation" href="#form-login-validation" class="anchor"> </a> <a href="https://codepen.io/heggy231/pen/QWjOEWb">form login validation</a> </h3> PS: My principle when learning: <blockquote> Don't seek to know everything but seek to figure out everything. <ul> <li><a href="https://watchandcode.com/">WatchandCode</a></li> </ul> </blockquote>

DEV Community

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.

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

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.

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

Top comments (0)

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.

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.

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.

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

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

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

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.

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