CSS - Forms and Specificity

HTML <form> Elements

HTML forms are used to collect user input. The <form> element defines an HTML form. Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

Let's create a new contact page for your website!

1. Use the same method we've used for our projects and blog pages to create a contact page. When you're finished, your site's directory structure should look like this:

   / (root)
   |
   |-blog/
   |   |-index.html
   |
   |-contact/
   |   |-index.html
   |-style.css
   |
   |-projects/
   |   |-index.html
   |
   |-index.html
   |-.git (hidden directory)

2. Set up your new contact page to use the same stylesheet as the rest of your site. HINT:

   <link rel="stylesheet" href="../style.css">

3. Now set up the rest of your page's structure, including a navigation bar, .container area, and footer (like the other pages in your portfolio site).

The heart of your contact page will almost certainly be a form. Let's try out a very basic form to get started:

1. Type out the following code in the content area of your contact page:

   <form>
     <input type="text">
     <input type="password">
     <input type="email">
     <input type="submit">
   </form>

2. Try working with each element to see what it does in a browser preview.

3. Once everything is up-and-running, stage, commit, push, and deploy your website!

4. Now let's try a more complicated example. Replace the code from above with the following snippet. Try to re-type instead of copy->pasting!

   <!--
     The action attribute defines where on the server the form data should be sent
     The method attribute specifies the HTTP method (GET or POST)
   -->
   
   <form action="forms/non-existent-form-handler.php" method="POST">
    <div>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name" placeholder="Full Name">
    </div>
   
    <div>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" placeholder="[e-mail]">
    </div>
   
    <div>
      <label for="fone">Phone:</label>
      <input type="tel" name="fone" id="fone">
    </div>
   
        <div>
          <label for="msg">Enter your message:</label>
          <textarea name="msg" id="msg" cols="30" rows="10"></textarea>
        </div>
   
     <p>What's this message about?</p>
   
     <div>
       <input type="radio" name="subject" value="professional" id="pro" checked>
       <label for="pro">I'd like to hire you!</label>
     </div>
   
     <div>
       <input type="radio" name="subject" value="personal" id="personal">
       <label for="personal">Personal message</label>
     </div>
   
     <div>
       <input type="radio" name="subject" value="other">
       <label>Don't know/something else</label>
     </div>
   
     <input type="checkbox" name="optin" value="trusting" id="news" checked>
     <label for="news">Subscribe me to your newsletter!</label>
   
     <div>
      <label for="marketing">How did you hear about me?</label>
     <select name="marketing">
       <optgroup label="Online">
         <option value="social">Social Media (FB, Twitter, LinkedIn)</option>
         <option value="github">Online Portfolio (GitHub)</option>
         <option value="search">Search Engine</option>
         <option value="email">Email</option>
       </optgroup>
       <optgroup label="In-Person">
         <option value="networking">We met at a networking event</option>
         <option value="referral">Personal referral</option>
         <option value="random">We met somewhere else</option>
       </optgroup>
       <option value="other">Other</option>
     </select>
     </div>
   
      <input type="submit" value="Submit">
   </form>

   Spend a little bit of time breaking and fixing the form above. Also try submitting the form... what happens?

5. Style the form a bit! Try using flexbox and @media to get the form alignment looking clean for different width viewports.

Network Traffic

When you submitted the form data, why was there an error in the console?

The action attribute tries to POST data to a server somewhere, but there's no server specified, so things go haywire.This request-response cycle is the foundation of the internet!

the internet!

We're not going to mess with it very much, though. Instead, we'll use Netlify to act as a server for our contact form data.

Other HTML Form Elements and Attributes

HTML5 gives us fancy new input types. Give them all a try by setting the type attribute of an input element to the following:

• color

• date

• datetime

• datetime-local

• file

• email

• month

• number

• range

• search

• tel

• time

• url

• week

We can also use HTML attributes to change the behavior of form elements or do form validation to only allow users to submit the form when certain conditions are met. Try out a few:

• disabled -- Specifies that an input field should be disabled

• max -- Specifies the maximum value for an input field

• maxlength -- Specifies the maximum number of character for an input field

• min -- Specifies the minimum value for an input field

• pattern -- Specifies a regular expression to check the input value against

• readonly -- Specifies that an input field is read only (cannot be changed)

• required -- Specifies that an input field is required (must be filled out)

• value -- Specifies the default value for an input field

Check out MDN for all of the deets!

Basic HTML Form Validation

Let's add some form validation to your contact form.

1. Mark all required fields with required.

2. Anything that isn't required should have a default value.

3. While not exactly form validation, it's very helpful to have a placeholder value for text inputs.

4. It can also be useful to check some boxes by default with checked.

5. Change your opening <form> tag to implement Netlify, like so: <form name="contact" method="POST" data-netlify="true">

6. Once your new-and-improved form works like you would like, stage, commit, push and deploy your site.

7. When your site is live, test out your form! You should get parsed responses from Formspree as soon as you confirm your email address.

Specificity Concepts

Up to this point, you've heard all about the 'cascade' in Cascading Style Sheets. That cascade refers to the way in which styles are applied in a cascading pattern of increasing specificity. Up to this point, you've heard the term "specificity" used colloquially, but here we're going to give you a quick way of putting a number value on a given selector's specificity.

specificity diagram

As a quick rule of thumb, look at a selector, and put a number in the correct box that corresponds to the number of each selector's component parts.

In other words:

• If the element has inline styling, that automatically1 wins (1,0,0,0 points)

• For each ID value, apply 0,1,0,0 points

  -For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points

  -For each element reference, apply 0,0,0,1 point

You can generally read the values as if they were just a number, like 1,0,0,0 is "1000", and so clearly wins over a specificity of 0,1,0,0 or "100". The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 - and that "13" doesn't spill over like a base 10 system would. Source

As an example:

example specificity calculation

In this example, there are more component parts in the second example, but the first is still more specific (and would take precendent over the second in the event of a rule collision) because of the power of the ID #nav

example specificity calculation 2