Online Resources

HTML Cheat Sheet

Basics

Headings

• level h1

• level h2

• level h3

• level h4

• level h5

• level h6

Add separation line

This is an inserted line to show a new section. Use <hr> in brackets, no closing tag required.

To create a line break in text

To force a break
in a line of text,
use <br> in brackets,
no closing tag required.

To add 4 blank spaces in text

• & emsp; (no spaces in between)

To type a < showing HTML code on website

• & lt; (no spaces in between)

Lists

Unordered (ul) list

• Inside each list you have list items (li).
• This list uses bullet points as an unordered list.

Ordered (ol) list

1. Inside each list you have list items (li).
2. This list uses numbers, but could also use Roman Numerals, or could be started at a certain number. Look up specifics at MDN.

Nested List

1. Yellow
• Sunflower
• Banana

HTML Elements

Adding Images

To add an image you will use <img src="something.png" alt="Description of picture"> or something of the sort.

• You can link to an image from the web, ie. <img src="https://www.kate.reviews" alt="Picture from the web">
• Linking to pictures from the web is not as reliable because you rely on pinging their website, and the server downloading to have it show up on yours. If their site goes down, you have a broken image.
• It is better to link to a local image in the same folder as your website. <img src="katie.jpg" alt="Picture of Katie">
• It is common to store images in a sub-folder. You then must include the folder name in the src attribute.
• <img src="images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
• Also, adding alt text could possibly increase your Google ranking because it includes more text that could help tie it to someone's search.

Adding Links

To add a link use an <a> tag

• You can either link to an internal page on your own website, or to an external website.
• To link to an internal page, first make sure that the two pages are saved in the same folder. Then use the <a href="nameOfFile.html"Name of website</a>
• To link to an external page <a href="http://www.whatever.com" target="_blank">Name of website</a>
• If you want it to open in a new window, it is important to add the target="_blank" (always opens new window) or target="blank" (opens one window and reuses it for all links) inside the a tag.

Internal Links

You can create a navbar with links that just link to another place on the same page.

You start by giving the new section an ID, and then place the ID in the html section of the link.

• <a class="nav-link" href="#footer">Contact</a>

HTML Tables

Starts with <table> </table>. You can add nested rows <tr> </tr> and nested data within each row <td> </td>

You can also add a header row (thead) with a tr inside of it and then a th inside of that (automatically bold), table body (tbody), or footer row (tfoot). The reason you might want to use these different sections is in case you want to isolate one or more sections to style it differently or have one section behave differently.

One example of where you might do this is to make the table head sticky so that it doesn't move as you scroll through a table. This could be accomplished through CSS or javascript.

A simple table example using the table head assignment. th=table header, tr=table row, td=table data

Here is an example of a table used with one cell being my avatar and the other cell having all of my info. This makes it more interesting than just text below the image.

Katie Lezon Web Developer I am a web developer, and a teacher. Check out my website at kate.reviews!

Form Basics

HTML Forms Cheat Sheet

All About Forms

Form Design Best Practices

Form Design Best Practices: 15 Tips to Boost Conversions and UX

Here are a few examples of different input options:

• <input type="text"> :
• <input type="date"> :
• <input type="color"> :
• <input type="file"> :
• <input type="checkbox"> :

Audio settings:

Click for even more examples of different input types on MDN

Short Answer: Adding a Multi-Line Text Control

The <textarea>...</textarea> elements allow you to add a multi-line plain text control

• <form method="post">
•  <textarea></textarea>
• </form>
• Now pressing Enter/Return does not submit the form. It just starts a new line.
• You can control the initial size of the textarea by using the rows and cols attributes. It can be done this way, but it is better to control their size using CSS.
• <form method="post">
•  <textarea rows="5" cols="50"></textarea>
• </form>
• Still needs name="#" attribute so the information will be submitted with the form.
• <form>
•  <textarea name="nameHere"></textarea>
• </form>

Pull Down Menus

Select Control

The <select> control element allows you to have a pull down menu with a fixed list of options to choose from.

• The <select></select> element wraps a series of option elements.
• It still needs name="#" element for GET or POST array results
• Each <option> also needs value="#" to be submitted with chosen field

Example:

BMW Ford Saab

• <form method="post">
•  <select name="cars">
•   <option value="bmw">BMW</option>
•   <option value="ford">Ford</option>
•   <option value="saab">Saab</option>
•  </select>
•  <button>SEND</button>
• </form>

You can have your user choose multiple choices from the pull down menu by holding shift/control while clicking multiple answers, but it is better to use check boxes for that situation.

• If you want to allow them to select multiple answers, you need to add to the select line of code:
• <select name="cars[]" multiple>

BMW Ford Saab

Titles & Groups within a Menu

If you have a long list and want to group the together use optgroup with label= to give it a heading in the menu.

• <select name="country">
•  <optgroup label="Europe">
•   <option value="germany">Germany</option>
•   <option value="france">France</option>
•   <option value="uk">England</option>
•  </optgroup>
•  <optgroup label="North America">
•   <option value="canada">Canada</option>
•   <option value="us">United States</option>
•  </optgroup>

The default value of a select control is always the first option.

To set a specific option to be selected when form loads add selected option

• <option value="us" selected>United States</option>

Checkboxes in HTML Forms

Checkbox Input Type

<input type="checkbox">

• Can add name="#" and that info will be submitted when checked and sent
• If nothing is checked, the submitted array will be empty. Browsers don't send anything for empty checkboxes.
• Default value="on" for checkbox. You can change it by adding value="yes".
• By default the box is unchecked. To change that add checked, and it will begin checked.
• To add text next to checkbox, just add it after the control. The user cannot just click on the text to check the box with this though, so it is better to use the Label feature
• <input type="checkbox" name="terms" value="yes" checked> I agree to the terms

2 Ways to Get Values From Checkboxes

1. Give each checkbox a different name and not specify a value.
• → array(1) {['red']=>string(2)"on"}
2. Give each checkbox the same name with an empty square brackets following it: name="colors[]", and then a different value attribute for each separate choice
• → array(1) {['colors']=>array(2){[0]=>string(3)"red" [1]=>string(4)"blue"}}

Radio Buttons: Select Only One Option

<input type="radio">

This allows a user to only select a single value out of a number of set choices for submission in a form.

All radio buttons within the same question need two things:

1. name="#" - Same name on each
2. value="#" - Different value for each one, but best if it is same as label for radio button

Do you prefer cats or dogs?

Do you prefer cats or dogs?
<form>
 <label for="cats">Cats: </label>
  <input name="petChoice" id="cats" type="radio" value="cats">
 <label for="dogs">Dogs: </label>
  <input name="petChoice" id="dogs" type="radio" value="dogs">
 <button>Go!</button>
</form>

To select a radio button as default, add checked attribute

Labels in HTML Forms

<label></label> - Represents a caption for an item

• Needs for="typeAndIdMustMatch" within the label element.
• Needs id="typeAndIdMustMatch" within the input element.
• Both must match.

• <label for="title">Title</label>
• <input id="title" name="article_title">

By using this label for="title" you can now click on the word Title and the cursor will go into the box on the form. Also allows screen readers to describe the control.

Shortcut for Checkboxes & Radio Buttons

Instead of separating the input and label elements, you can wrap the input element inside of the label element. If you do it this way, you don't need an id attribute on the checkbox or a for attribute on the label. You can still click on the text to check the box using this alternative.

Instead of this:

• <input type="checkbox" name="visible" value="yes" id="visible"><label for="visible">Visible</label>

Use this:

• <label><input type="checkbox" name="visible" value="yes">Visible</label>

Placeholder Text

• Placeholder text is used in an input field.
• It is usually light gray and gives an example of what to type in the field.
• It will disappear as soon as someone starts typing.
• If no content is added to text field, nothing will be submitted.

<input type="text" placeholder="username"> :
<input type="password" placeholder="password"> :

Fieldset

• You can wrap sections of a form in fieldset to group them together in a box
• You can add legend to label your fieldset box
• If the box does not show up after adding it, here is some CSS code to help:
• fieldset {
   background-color: #eeeeee;
  }
• legend {
   background-color: gray;
   color: white;
   padding: 5px 10px;
  }

Example:

• <fieldset>
   <legend>User:</legend>
   <label for="fname">First name:</label>
   <input type="text" id="fname" name="fname">
  
   <label for="lname">Last name:</label>
   <input type="text" id="lname" name="lname">
  
   <label for="email">Email:</label>
   <input type="email" id="email" name="email">
  
   <label for="birthday">Birthday:</label>
   <input type="date" id="birthday" name="birthday">
  
   <input type="submit" value="Submit">
  </fieldset>

Common Form Control Attributes

readonly

• This means that the input field shows on the form, but the user cannot change its value.
• You use this by adding readonly inside the input element.
• In the browser it doesn't look any different, but you can't change the value.
• When the form is submitted, the value of the field is submitted.

disabled

• For a select control, you can disable the entire control by adding disabled to the select control
• You can disable an individual option in a select control by adding disabled to the specific option
• When submitted, the value of a disabled control is not sent to the server
• A disabled control is usually shown as grayed out, although you can change how it looks if you want to

autofocus

• If you add autofocus, that control will have the focus when the form is first loaded

Client-Side Form Validation

Form Validation:

• When you enter data, the browser and/or web server will check to see that the data is in the correct format and within the constraints set by the application.
• If the information is correctly formatted, the application allows the data to be subitted to the server and (usually) saved in a database.
• If the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again.
• By default, if nothing is entered into a box on the form it does not get validated (and can be submitted empty) - Reference required attribute below

Error message examples using client-side form validation:

• "This field is required" (You can't leave this field blank)
• "Please enter a valid email address" (The data you entered is not in the right format)

Required Attribute

• The required attribute makes an input mandatory.
• You can set the CSS to change the border or background color to show an invalid or valid response
• For good user experience, indicate to the user when a field is required. (This is also required by WCAG acessibility guidelines.)
• Also, only require fields that you actually need.

Example:

• <form>
   <label for="choose">Would you prefer a banana or cherry? (required)</label>
   <input id="choose" name="i_like" required>
   <button>Submit</button>
  </form>

Pattern Attribute

• The pattern attribute expects a Regular Expression as its value
• A Regular Expression (regex) is a pattern that can be used to match character combinations in text strings, so regexs are ideal for form validation.
• Regex can be very complex, so search for what you need as you need it.
• The textarea element does not support the pattern attribute.

Simple Password Requirements

• You can set a minimum character requirement, or a min and max.
• <input pattern=".{5,10}" required title="Password must be 5-10 characters"> :
• Or just set a minimum: <input pattern=".{3, }">

Form Examples

Check source code or file for code for following example

Advanced Form Example:

Register

Contact Form Example - HTML only (no JS to validate)

<form action="mailto:hi@example.com" method="post" enctype="text/plain">
 <label>Your Name: </label>
 <input type="text" name="Name" value="">
 <label>Your Email: </label>
 <input type="email" name="Email" value="">
 <label>Your Message: </label>
 <textarea name="Message" rows="10" cols="50" placeholder="Your message here"></textarea>
 <button>Submit</button>
</form>

• Form: action--changed so that when the field is filled out, it will automatically open your default email program and send your message with all info to the email linked there.
• Form: method--must be post so that the message is sent.
• Form: enctype--must be "text/plain" so that it does not change all punctuation to symbols.
• name="somethingHere" field for each input will show in email before the information they provide on form. ie-- Name=Katie, Email=their@email.com, Message=Their message

Adding Favicons to your Website

CSS-Tricks: Favicons Next to External Links

There are two different ways you can add a favicon to your website:

1. Create your own favicon, save it in the same folder as your project, and link to it like so:
• Add <link rel="icon" href="favicon.ico" type="image/x-icon"> in the head.
2. You can use a Google shortcut to access a favicon already on a website and use it as yours.
• Add <link rel="icon" type="image/png" href="https://www.google.com/s2/
  favicons?domain=jacinto.design"> in the head.

Make Your Own Favicon

Favicon.cc

Favicon.io

Font Awesome

There are two different ways to add Font Awesome.

1. Link to a CDN
2. Use a kit link from their site

• Font Awesome CDN

• Must add link in head: <script src="https://kit.fontawesome.com
  /5bec42a223.js" crossorigin="anonymous"> for these to work.
• Easy way to add in small symbols into HTML.
• Often used in buttons or in lists.
• Example:    <i class="fas fa-laptop-code"></i>

Image Maps

Image-Map.net

Create clickable images! With the help of our generator creating html imagemaps is free and easy. Simply start by selecting an image from your pc, or load one directly from an external website. Next up create your hot areas using either rectangle, circle or polygon shapes. Creating these shapes is as easy as pointing and clicking on your image. Don't forget to enter a link, title and target for each of them. Then once you're finished simply click Show Me The Code!