Computer Science 318

Fundamentals of Web Design

Lab 12 Forms

Goal

Learn

<form>
   <label for="name">
   <input type="email" id="name">
</form>

<form>

The html form element represents a document section that contains interactive controls for submitting information to a web server. Essentially this is the container that will hold all of the <input> and <label> elements.

<input>

The input element is used to create the interactive controls for the web based form. There are a wide variety of input types. The type of input is defined by a type attribute placed inside the opening input tag (just like an alt, class or id). Input tags are self contained and therefore do not have a closing tag. 

<input type="value">

Possible values for the type attribute:

<input type="email" name="email-address">

The name attribute is also applied to input tags. The name attribute is used to identify the submitted data from the form. The name value is only seen on the back end and isn't visible to the users.

There are a large amount of other attributes that can be applied to different types of inputs. We will only be covering the basics in this class. If you want to more about creating inputs for forms checkout this website.

<label for="name">

<label>

The HTML label element is used to caption another element. In this lab you will use it to label the input elements.

The for attribute on the <label> element is used to link a <input> and <label> together. A for attribute looks for an id value, so if you have id on a input and a for attribute with the same value, when you click on the label the input element will focus.

Styling Form

Styling form elements can be quite tricky. Each input has many default styles, so it can be difficult to override them while leaving the element functional. We will be utilizing some basic CSS to style the form.

:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element.

Selectors for input tags look like this:

input[type=text]{
    background-color:white;
}

If you want to add the same styles to multiple inputs it looks like this:

input[type=number], [type=text], [type=color]{
    background-color:white;
}

When using input selectors in CSS if you want to add a hover effect or another pseudo-class it would look like this:

input:hover[type=text]{
    background-color:blue;
}

Notice how the pseudo-class comes after input and not type. If you want to add the same hover effect to multiple inputs it would look like this: 

input:hover[type=number], input:hover[type=text]{
     background-color:red;
}

Practice

Experiment Try clicking on the First Name label. Notice how the input next to the label gets a blue outline. That is the focus status' default styles applying to the input. Now add a for attribute to the second label that matches the id value for the second input. Note for attributes always look for id values, so you do not need a hashtag.

HTML

<form> <label for="first-name">First Name</label> <input type="text" id="first-name" name="first-name"> <label>Telephone Number</label> <input type="tel" id="telephone" name="telephone"> </form>

Preview

Experiment In the example below add a :focus effect on the first name and telephone number input that turns the background aqua. Then add a yellow background color to the submit input. Then add a hover effect of orange to the submit input.

HTML

<form> <label for="first-name">First Name</label> <input type="text" id="first-name" name="first-name"> <label for="telephone">Telephone Number</label> <input type="tel" id="telephone" name="telephone"> <input type="submit"> </form>

CSS

form{ background-color:white; padding:1rem; } label{ display:block; } input[type=text], [type=tel]{ background-color:blue; color:white; } body{ background-color:darkblue; }

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab12

Create a new file called index.html in the lab12 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Monster Creator"

Add a header and main element to the body

In the header add a h1 with the content "Monster Creator"

Add a form element in the main

In the form

label "Monster's Name"

input

label "Monster's Email"

input

label "Monster's Birthday"

input

Add a <fieldset> element

Inside the fieldset element add:

Add a <legend> tag with the content "Scary?"

**Fieldset ends here

label "Color of Monster

input

label "Number of Tentacles"

input

label "Picture of Monster"

input

label "Number of Eyeballs"

input

label "Monster's Creator"

input

Add a div with the class value of "actions"

In the div add:

input

input

Lab 11 HTML setup

Add the for="" attribute to all labels. The value for the for="" attribute will be the same value as the id on the corresponding input. For example:

<label for="name">Monster's Name</label>
<input type="text" id="name" name="monster-name">

CSS

body

margin 0

background color #18810f

font color #fff

font family

Lab 11 Google fonts setup

Lab 11 body css

header

background color #000

font color yellowgreen

margin 0

padding 1rem

text align center

font size 2rem

font-family: 'Eater', cursive;

Lab 11 header css

form>label.
We are using this specific selector because we don't want the labels in the fieldset to use the display block property.

display block

font size 1.5rem

margin 1rem 0 .25rem.
Hint: three values for margin top | left & right | bottom

Lab 11 label css

fieldset

font size 1.5rem

margin 1rem 0 .25rem

border 3px solid yellowgreen

border radius .25rem

Lab 11 fieldset styles

form

background color rgba(0, 0, 0, .9).
Hint: We are using rgba to obtain a transparent black background. It has a 90% opacity.*

padding 1rem 2rem.
Hint: Two values for padding are top & bottom | left & right

width 50rem

max-width:calc(90% - 4rem);.
Hint: We are using this max-width to ensure that the form will look good on all screen sizes, even those smaller than 50rem. The calc() is a way to do a calculation. The reason we need to use this is the width we are setting and the padding on the left and right are getting added together to make the width. So without the calculation the width could be 90% + 4rem.

margin 1rem auto.
Hint: Remember with a set width we can use auto on the left and right to center the element.

Lab 11 form styles

I am only going to list the type of input for the CSS directions, follow the selector examples for inputs in the Learn section above to correctly format the input selectors. Commas indicate that multiple selectors can be used for one ruleset.

Text, email, date, number, color

font-size 1.25rem

width calc(100% - 1rem)

border 3px solid yellowgreen

padding .5rem

border-radius .25rem

Lab 11 input styles

Color

width 4rem

height 4rem

border-radius 2rem

Lab 11 color input

Focus: text, email, date, number, color

background color black

font color white

outline:none;
Hint: This will remove the blue outline caused by the default focus styles on inputs.

Lab 11 input focus styles

Reset, Submit

font-family:Eater, cursive;

font size 1.5rem

padding 1rem

border-radius 2rem

border 3px solid yellowgreen

margin 1rem 2rem 0 0.
[Hint] Four values for margin: top | right | bottom | left

Lab 11 submit and reset styles

Submit

background color yellowgreen

Reset

background color black

font color yellowgreen

Lab 11 button colors

Hover: submit

background color black

font color yellowgreen

Hover: reset

font color black

background color red

border-color red

Lab 11 button hover styles

Create an images folder and place the following image in the folder

Lab 11 background image

body

background image eyeballs.svg

background size 20%

No need for media queries in this lab because the form in styled to function on all sizes.

Lab 11 final styles

Finish Form Setup

In the opening <form> tag add the following attributes:

action="https://theresahanson.com/monster-creator"

method="post"

enctype="multipart/form-data"

Final Steps

Fill out and submit your form. Check your submission here

Validate your HTML.

Lint your CSS at Jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab12 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab12

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.