Codecademy HTML

I decided to pause my JavaScript and finish the Codecademy HTML & CSS. I went to a meet up last week and a very helpful man pointed me in the direction of watch and code and highly recommended it. I think i'll finish the Codecademy basic Javascript and then have a go with that. But first, the rest of the HTML course...

Forms

• To make the foundation of the form you need something like the following. The action attribute determines where the information is sent to and the method attribute of the form element tells the web browser how to send form data to a server.

<form action="/practice.html" method="POST"> </form>

• You can include a title and p tags inside the form element to add context.
• You can also add an input element within the form tags. Type means a text field will be created. Name gives the input a name and value prefills the box.

<input type="text" name="username" value="Your name">

• You can give the input a label to users know what it is for. To do this, you have to assign an id to the input that the label can link to. You use the for attribute for this. (The id attribute is to identify the element in CSS or in JS, the name is to identify the element in HTML and in PHP for form handling.)

 <label for="username">Username</label>
 <input type="text" name="username" id="username">

• The password attribute works similarly, it's just a different type of input. So instead of text being shown when the user types, * or dots are shown but the actual value of the password is sent when the user presses enter.

<form>
  <label for="user-password">Password: </label>
  <input type="password" id="user-password" name="user-password">
</form>

• Another input type is number. This works in the same way as you can see below. The step attribute means that little arrows are also put in the input field that the user can click to increase or decrease their value and the number you assign to step is the amount the value changes by on each click. (The for and id attributes are what link the label and input, so they have to match.)

<label for="age">How many patties would you like?</label>
<input id="age" type="number" name="userage" step="1">

• In case you want a number input that has limited answers you could use the range type instead of number. This provides the user with a slider with min and max numbers. The step works similarly to above but on the slider instead - this can be decimal nums too e.g. step="0.5"

<form>
  <label for="volume">Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>

• To have a multiple choice options where users can select one or more answers you can use checkboxes. You need to provide the labels and separate inputs for each. The name attribute has to be the same for each so they are linked. Each option has its own id and value.

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

• To give the user a multiple choice where only one answer can be chosen you can use radio buttons. They're similar to checkboxes in the way they're used. Notice the name attribute is the same for both so they're linked.

<span>Would you like to add cheese?</span>
<br>
<input type="radio" id="yes" name="cheese" value="yes">
<label for="yes">Yes</label>
<input type="radio" id="no" value="no" name="cheese">
<label for="no">No</label>

• You can use a drop down box for multiple options where only one choice can be made. These are better than radio buttons if there are a few options or more.

<label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>

• A datalist input is another option. It is like a dropdown menu but if the option that the user wants isn't listed, they can also type their own response and enter it.

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

• If you want to give users a text field to add a bit more detail than just one line, a textarea is the best. The rows and cols attribute determine the size of the box.

 <label for="extra">Anything else you want to add?</label>
 <textarea id="extra" name="extra" rows="3" cols="40">Enter extra info here</textarea>

• To add a submit button at the end you just need the following. The value attribute is what is printed on the button.

 <input type="submit" value="Send">

Form Validation

• Server-side validation means data is sent to the server to be checked and result returned. -Client-side validation means this is done in the browser so it is quicker and safer. -Form HTML example:

<form action="/example.html" method="POST">
  <label for="allergies">Do you have any dietary restrictions?</label>
  <br>
  <input id="allergies" name="allergies" type="text" required>
  <br>
  <input type="submit" value="Submit">
</form>

• This gives a simple label, box to type in and submit button. They might appear differently depending on the browser that the website is opened in.
• The 'required' attribute in the input tag means that the form must be filled in and its not optional.
• In a number field you can assign minimum and maximum acceptable values. These are added into the input tag e.g.

<input type="number" name="guess" id="guess" required min="1" max="10">

• Similarly, you can use minlength and maxlength attributes to add validation to text fields.

<input id="username" name="username" type="text" required minlength="3" maxlength="15">

• Pattern validation can limit the characters or number of characters given in a form. The following pattern attribute means that any lower case letter, upper case letter and number from 0-9 can be input. The + means that they can be used any number of times each.

<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">

• In this next example it is saying only 0-9 can be used and in the curly braces, it means the number can be between 14 and 16 characters only.

required pattern="[0-9]{14,16}"

Semantic HTML

• The word semantic means “relating to meaning,” so semantic elements provide information about the content between the opening and closing tags.
• It is better to use semantic HTML to improve the website accessibility (better for screen readers), it improves SEO and it's easier for other developers to read your code.
• Some alternative to div tags are header, nav, main, article and footer (all require closing tags too.)
• The section tag defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
• The article element holds content that makes sense on its own. The article tag can hold content such as articles, blogs, comments, magazines, etc.
• The aside element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. E.g. bibliographies, endnotes, comments etc.
• You can use the figure tag to encapsulate media such as images, diagrams etc. The img src tags go inside the figure tags and you can also add a figcaption tag to describe the media. E.g:

<figure>
  <img src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/dogimage.jpeg"/>
  <figcaption>This is a creepy photograph of a dog staring through a window.</figcaption>
</figure>

• You can add an audio file to a site and specify its type and for the browser to show controls in the attribute tag...

  <audio controls>
    <source src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/dogBarking.mp3" type="audio/mp3"/>  
  </audio> 

• You can use video and embed tags to add other media. The video tag needs a closing tag, however embed is self closing. E.g.

<video src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/dog+video.mp4" controls>Video not supported</video>

<embed src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/dog-on-beach.gif"/>

And now i've finished the HTML course, woop!