Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->

  <body>
<div class="doc">

  
        <nav class="navbar-light bg-light" id="navbar">
            <header>
                <a href="#">NavBar Header</a>
            </header>

            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="#Prerequisites" class="nav-link">Prerequisites</a>
                </li>
                <li class="nav-item">
                    <a href="#Your_first_HTML_form" class="nav-link">Your first HTML form</a>
                </li>
                <li class="nav-item">
                    <a href="#Active_Learning" class="nav-link">Active Learning</a>
                </li>
                <li class="nav-item">
                    <a href="#The_Label,_Input_and_Textarea_elements" class="nav-link">The Label, Input and Textarea elements</a>
                </li>
                <li class="nav-item">
                    <a href="#The_Button_Element" class="nav-link">The Button Element</a>
                </li>
                <li class="nav-item">
                    <a href="#Basic_Form_Styling" class="nav-link">Basic Form Styling</a>
                </li>
                <li class="nav-item">
                    <a href="#Sending_Form_Data_To_Your_Web_Server" class="nav-link">Sending Form Data To Your Web Server</a>
                </li>

            </ul>
        </nav>
        <main id="main-doc">
            <h1>HTML Forms</h1>
            <h2>This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful
                tool for interacting with users; however, for historical and technical reasons, it's not always obvious how
                to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure
                to styling, from data handling to custom widgets.</h2>
            <section class="main-section" id="Prerequisites">
                <header>
                    Prerequisites
                </header>
                <hr>
                <p>Before starting this module, you should at least work through our Introduction to HTML. At this point you
                    should find the Basic guides easy to understand, and also be able to make use of our Native form widgets
                    guide.
                </p>
                <p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you
                    can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore,
                    before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript
                    first.
                </p>
                <code class="codeBlocks">function helloWorld (x) {
  console.log(`hello ${x}`)
  }
                </code>



                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam porro voluptatibus aliquid eaque, fugiat
                    itaque distinctio adipisci necessitatibus iusto ea!</p>

                <codeclass="codeBlocks">function helloWorld (x) { console.log(`hello ${x}`) }
                    </code>

                    <code class="codeBlocks">function greetMe(yourName) {
  alert("Hello " + yourName);
  }
greetMe("World");
                              </code>


            </section>
            <section class="main-section" id="Your_first_HTML_form">
                <header>
                    Your first HTML form
                </header>
                <hr>
                <h3>What are HTML Forms
                </h3>
                <p>HTML Forms are one of the main points of interaction between a user and a web site or application. They allow
                    users to send data to the web site. Most of the time that data is sent to the web server, but the web
                    page can also intercept it to use it on its own.</p>
                <p>An HTML Form is made of one or more widgets. Those widgets can be text fields (single line or multiline),
                    select boxes, buttons, checkboxes, or radio buttons. Most of the time those widgets are paired with a
                    label that describes their purpose — properly implemented labels are able to clearly instruct both sighted
                    and blind users on what to enter into a form input.</p>
                <p>The main difference between a HTML form and a regular HTML document is that most of the time, the data collected
                    by the form is sent to a web server. In that case, you need to set up a web server to receive and process
                    the data. How to set up such a server is beyond the scope of this article, but if you want to know more,
                    see Sending form data later in the module.</p>
                <h3>Designing your form</h3>
                <p>Before starting to code, it's always better to step back and take the time to think about your form. Designing
                    a quick mockup will help you to define the right set of data you want to ask your user. From a user experience
                    (UX) point of view, it's important to remember that the bigger your form, the more you risk losing users.
                    Keep it simple and stay focused: ask only for that data you absolutely need. Designing forms is an important
                    step when you are building a site or application. It's beyond the scope of this article to cover the
                    user experience of forms, but if you want to dig into that topic you should read the following articles:</p>
                <ul>
                    <li>Smashing Magazine has very good articles about forms UX, but perhaps the most important is their Extensive
                        Guide To Web Form Usability.</li>
                    <li>UXMatters is also a very thoughtful resource with good advice from basic best practices to complex concerns
                        such as multi-page forms.</li>
                </ul>
                <p>In this article, we'll build a simple contact form. Let's make a rough sketch.</p>
                <img src="https://developer.mozilla.org/files/4579/form-sketch-low.jpg" alt="sketch of form layout" id="imgSketch">
                <p>Our form will contain three text fields and one button. We are asking the user for their name, their e-mail
                    and the message they want to send. Hitting the button will send their data to a web server.</p>
            </section>
            <section class="main-section" id="Active_Learning">
                <header>
                    Active Learning
                </header>
                <hr>
                <p>Ok, now we're ready to go to HTML and code our form. To build our contact form, we will use the following
                    HTML elements:
                    <strong>
                        <code> &lt;form&gt;, &lt;label&gt;, &lt;input&gt;, &lt;textarea&gt;,</code>
                    </strong>and
                    <code> <strong>&lt;button&gt;</code>
                    </strong>.
                </p>
                <p>All HTML forms start with a
                    <strong>&lt;form&gt </strong> element like this:</p>
                <code class="codeBlocks">&lt;form action=&quot;/my-handling-form-page&quot; method=&quot;post&quot;&gt;

&lt;/form&gt;</code>
                <p>This element formally defines a form. It's a container element like a
                    <strong>&lt;div&gt; </strong>or
                    <strong>&lt;p&gt; </strong>element, but it also supports some specific attributes to configure the way the form
                    behaves. All of its attributes are optional but it's considered best practice to always set at least
                    the action attribute and the method attribute.
                </p>
                <ul>
                    <li>The
                        <code>action</code> attribute defines the location (URL) where the form's collected data should be sent when it is submitted</li>
                    <li>The
                        <code>method</code> attribute defines which HTTP method to send the data with (it can be "get" or "post").</li>
                </ul>
                <p>For now, add the above
                    <form> element into your HTML body.</p>

            </section>
            <section class="main-section" id="The_Label,_Input_and_Textarea_elements">
                <header>
                    The Label, Input and Textarea elements
                </header>
                <hr>

                <p>Our contact form is really simple and contains three text fields, each with a label. The input field for
                    the name will be a basic single-line text field, the input field for the e-mail will be a single-line
                    text field that accepts only an e-mail address, and the input field for the message will be a basic multiline
                    text field.
                </p>
                <p>In terms of HTML code we need something like the following to implement these form widgets:</p>
                <code class="codeBlocks">&lt;form action=&quot;/my-handling-form-page&quot; method=&quot;post&quot;&gt;
  &lt;div&gt;
    &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;user_name&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;mail&quot;&gt;E-mail:&lt;/label&gt;
    &lt;input type=&quot;email&quot; id=&quot;mail&quot; name=&quot;user_mail&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;msg&quot;&gt;Message:&lt;/label&gt;
    &lt;textarea id=&quot;msg&quot; name=&quot;user_message&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;
&lt;/form&gt;</code>
                <p>Update your form code to look like the above.</p>
                <p>The
                    <strong>
                        <code>&lt;div&gt;</code>
                    </strong> elements are there to conveniently structure our code and make styling easier (see later in
                    the article). Note the use of the for attribute on all
                    <strong>
                        <code>&lt;label&gt;</code> </strong>elements; it's a formal way to link a label to a form widget. This attribute references
                    the id of the corresponding widget. There is some benefit to doing this. The most obvious one is to allow
                    the user to click on the label to activate the corresponding widget. If you want a better understanding
                    of the other benefits of this attribute, you can find the details in How to structure an HTML form.</p>
                <p>On the
                    <strong>
                        <code>&lt;input&gt;</code>
                    </strong> element, the most important attribute is the
                    <strong>
                        <code>type</code>
                    </strong> attribute. This attribute is extremely important because it defines the way the
                    <strong>
                        <code>&lt;input&gt;</code>
                    </strong> element behaves. It can radically change the element so pay attention to it. You'll find more
                    about this in the native form widgets article later on.
                </p>
                <ul>
                    <li>In our simple example we use the value text for the first input — the default value for this attribute.
                        It represents a basic single-line text field that accepts any kind of text input.</li>
                    <li>For the second input, we use the value email that defines a single-line text field that only accepts
                        a well-formed e-mail address. This last value turns a basic text field into a kind of "intelligent"
                        field that will perform some checks on the data typed by the user. You'll find out more about form
                        validation in the Form data validation article later on.</li>
                </ul>
                <p>Last but not least, note the syntax of
                    <strong>
                        <code>&lt;input&gt;</code>
                    </strong> vs.
                    <strong>
                        <code>&lttextarea;&gt;</code>
                    </strong>
                    </textarea>. This is one of the oddities of HTML. Th
                    <strong>
                        <code>&lt;input&gt;</code>
                    </strong> tag is an empty element, meaning that it doesn't need a closing tag. On the contrary,
                    <strong>
                        <code>&lt;textarea&gt;</code>
                    </strong> is not an empty element, so you have to close it with the proper ending tag. This has an impact
                    on a specific feature of HTML forms: the way you define the default value. To define the default value
                    of a
                    <strong>
                        <code>&lt;input&gt;</code>
                    </strong> element you have to use the value attribute like this:
                </p>
                <code class="codeBlocks">&lt;input type=&quot;text&quot; value=&quot;by default this element is filled with this text&quot; /&gt;</code>
                <p>On the contrary, if you want to define the default value of a
                    <code>&lt;textarea&gt;</code>, you just have to put that default value between the opening and closing tag of the
                    <code>&lt;textarea&gt;</code> element, like this:</p>
                <code class="codeBlocks">&lt;textarea&gt;by default this element is filled with this text&lt;/textarea&gt;</code>
            </section>
            <section class="main-section" id="The_Button_Element">
                <header>
                    The Button Element
                    <br>

                </header>
                <strong>
                    <code>&lt;button&gt;</code>
                </strong>
                <hr>
                <p>Our form is almost ready; we just have to add a button to allow the user to send their data once they have
                    filled out the form. This is simply done by using the
                    <strong>
                        <code>&lt;button&gt;</code>
                    </strong> element; add the following just above the closing
                    <strong>
                        <code>&lt;/form&gt;</code>
                    </strong> tag:
                </p>
                <code class="codeBlocks">&lt;div class=&quot;button&quot;&gt;
  &lt;button type=&quot;submit&quot;&gt;Send your message&lt;/button&gt;
&lt;/div&gt;</code>
                <p>You'll see that the
                    <strong>
                        <code>&lt;button&gt;</code>
                    </strong> element also accepts a type attribute — this accepts one of three values:
                    <strong>
                        <code>submit</code>
                    </strong>,
                    <strong>
                        <code>reset</code>
                    </strong>, or
                    <strong>
                        <code>button</code>
                    </strong>.</p>
                <ul>
                    <li>A click on a submit button (the default value) sends the form's data to the web page defined by the action
                        attribute of the
                        <strong>
                            <code>&lt;form&gt;</code>
                        </strong> element.</li>
                    <li>A click on a
                        <strong>
                            <code>reset</code>
                        </strong> button resets all the form widgets to their default value immediately. From a UX point
                        of view, this is considered bad practice.</li>
                    <li>A click on a
                        <strong>
                            <code>button</code>
                        </strong> button does... nothing! That sounds silly, but it's amazingly useful for building custom
                        buttons with JavaScript.</li>
                </ul>
            </section>
            <section class="main-section" id="Basic_Form_Styling">
                <header>
                    Basic Form Styling
                </header>
                <hr>
                <p>Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At
                    the moment, you'll see that it looks rather ugly.</p>
                <img src="https://developer.mozilla.org/files/4049/form-no-style.png" alt="image of ugly boring form" id="imgUnstyledForm">
                <p>Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling,
                    so for the moment we will just get you to add some CSS to make it look OK.
                </p>
                <p>First of all, add a
                    <strong>
                        <code>&lt;style&gt;</code>
                    </strong> element to your page, inside your HTML head. It should look like so:</p>
                <code class="codeBlocks">&lt;style&gt;

&lt;/style&gt;</code>
                <p>Inside the style tags, add the following CSS, just as shown:</p>
                <code class="codeBlocks">
form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
        By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text fields */
    width: 300px;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}

textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 5em;
}

.button {
    /* To position the buttons to the same position of the text fields */
    padding-left: 90px; /* same size as the label elements */
}

button {
    /* This extra margin represent roughly the same space as the space
        between the labels and their text fields */
    margin-left: .5em;
}</code>
                <p>Now our form looks much less ugly.
                </p>
                <img src="https://developer.mozilla.org/files/4051/form-style.png" alt="image of styled form" id="imgStyledForm">
            </section>
            <section class="main-section" id="Sending_Form_Data_To_Your_Web_Server">
                <header>
                    Sending Form Data To Your Web Server
                </header>
                <hr>
                <p>The last part, and maybe the trickiest, is to handle form data on the server side. As we said before, most
                    of the time an HTML Form is a convenient way to ask the user for data and to send it to a web server.</p>
                <p>The
                    <strong>
                        <code>&lt;form&gt;</code>
                    </strong> element will define where and how to send the data thanks to the action attribute and the
                    <strong>
                        <code>method</code>
                    </strong> attribute.</p>
                <p>But it's not enough. We also need to give a name to our data. Those names are important on both sides; on
                    the browser side, it tells the browser which name to give each piece of data, and on the server side,
                    it lets the server handle each piece of data by name.</p>
                <p>To name the data in a form you need to use the name attribute on each form widget that will collect a specific
                    piece of data. Let's look at some of our form code again:</p>
                <code class="codeBlocks">&lt;form action=&quot;/my-handling-form-page&quot; method=&quot;post&quot;&gt; 
&lt;div&gt;
    &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;user_name&quot; /&gt;
&lt;div&gt;
&lt;div&gt;
    &lt;label for=&quot;mail&quot;&gt;E-mail:&lt;/label&gt;
    &lt;input type=&quot;email&quot; id=&quot;mail&quot; name=&quot;user_email&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;label for=&quot;msg&quot;&gt;Message:&lt;/label&gt;
    &lt;textarea id=&quot;msg&quot; name=&quot;user_message&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;</code>
                <p>In our example, the form will send 3 pieces of data named "
                    <strong>
                        <code>user_name</code>
                    </strong> ", "
                    <strong>
                        <code>user_email</code>
                    </strong>", and "
                    <strong>
                        <code>user_message</code>
                    </strong> ". That data will be sent to the URL "
                    <strong>
                        <code>/my-handling-form-page</code>
                    </strong> " using the HTTP
                    <strong>
                        <code>POST</code>
                    </strong> method.</p>
                <p>On the server side, the script at the URL "
                    <strong>
                        <code>/my-handling-form-page"</code>
                    </strong>will receive the data as a list of 3 key/value items embodied in the HTTP request. The way this
                    script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.)
                    has its own mechanism. It's beyond the scope of this guide to go deeply into that subject, but if you
                    want to know more, we have provided some examples in the Sending form data article.
                </p>
                <hr>
                <header>Summary</header>
                <p>Congratulations, you've built your first HTML form. It looks like this live:</p>
                <div id="formExample">

                    <form action="/my-handling-form-page" method="post">

                        <div>

                            <label for="name">Name:</label>

                            <input type="text" id="name" name="user_name">   </div>


                        <div>

                            <label for="mail">E-mail:</label>

                            <input type="email" id="mail" name="user_email">   </div>


                        <div>

                            <label for="msg">Message:</label>

                            <textarea id="msg" name="user_message"></textarea>   </div>

                        <div class="button">

                            <button type="submit">Send your message</button>
                        </div>
                    </form>

                </div>
            </section>
            <footer>
                <hr>
                <p>All Material Respectably Borrowed from
                    <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">MDN Web Docs</a>
                </p>
            </footer>

        </main>
</div>

</body>


              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Anton|Montserrat");

p {
  font-family: "Montserrat", sans-serif;
}
h1 {
  font-family: "Anton", sans-serif;
  text-align: center;
  color: rgb(8, 102, 149);
}

h3 {
  font-family: "Montserrat", sans-serif;
}

#navbar {
  position: fixed;
  min-width: 295px;
  width: 300px;
  height: 100%;
  border-right: black solid 2px;
}

#main-doc {
  border-left: black solid 2px;
  padding: 20px;
  position: absolute;
  margin-left: 310px;
}
#navbar header {
  text-align: center;
  font-family: "Anton", sans-serif;
  margin: 20px 0px;
}

#navbar header a {
  color: rgb(8, 102, 149);
  text-decoration: none;
}

#navbar ul {
  padding: 0;
  margin: 0;
}
#navbar li {
  list-style: none;
  font-family: "Montserrat", sans-serif;
  border-top: black solid 2px;
  padding: 10px 20px;
}

#navbar li a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}
@media (max-width: 600px) {
  #navbar {
    display: block;
    position: relative;
    width: 100%;
  }

  #main-doc {
    display: block;
    margin-left: 0;
    border: none;
    width: 100%;
  }
}

section header {
  font-family: "Anton", sans-serif;
  font-size: 1.5em;
  color: rgb(8, 102, 149);
  margin-top: 20px;
}

.codeBlocks {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  border-left: rgb(8, 102, 149) solid 5px;
}

code {
  background-color: #f7f7f7;
  padding: 4px 5px;
  border-radius: 5px;
  color: rgb(8, 102, 149);
}

#imgStyledForm,
#imgUnstyledForm {
  width: 80%;
  height: auto;
}

/* FORM Example in summary */
#formExample {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid rgb(8, 102, 149);
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  font-family: "Anton", sans-serif;
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid rgb(8, 102, 149);
}

input:focus,
textarea:focus {
  /* To give a little highligh on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra magin represent the same space as the space between
     the labels and their text fields */
  margin-left: 0.5em;
  font-family: "montserat", sans-serif;
  font-size: 1em;
  padding: 10px 15px;
  color: white;
  background-color: rgb(8, 102, 149);
  border-radius: 5px;
}

              
            
!

JS

              
                
              
            
!
999px

Console