Today we continue our journey with basic HTML. On the agenda for today are forms and their proper elements. Piper continues today freeCodeCamp.com's lesson on radio buttons and basic form components. One thing I will say that I found quite funny was Piper's comment yesterday as we were beginning to learn basic HTML constructs, she asked why she had to make all of the tags instead of using the Markdown syntax. I had to explain to her that the Markdown was a language developed after HTML and the reason we learned it first was to make her blogging site easier to write. She quickly realized how much boilerplate and busy work there is around traditional static pages. I can't wait to see how today goes. If she comprehends the concepts of forms she will soon be able to setup her first website with simple contact-me form.

Piper's Notes

Forms

To create a form element use the tag <form></form>. Forms can submit their data to a server by specifying the action URL

To add a submit button you can do it 2 ways.

  1. <button type="submit">Submit</button>
  2. <input type="submit">

To make a form field required simply add the "required" attribute to the input tag

Radio Buttons

Radio buttons are used on forms when you want to ask questions but only allow for a single answer

Example: When asking if your cat is an indoor or outdoor cat, you can't choose both, there is only one correct answer.

The trick to getting radio buttons to behave and only allow for a single selection is handled by the name attribute. All related radio buttons must have the same name in order to create the radio button group.

Checkboxes

Checkboxes are questions with more than 1 answer. All related checkboxes should have the same name attribute.

 <form action="/submit-me">
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <button type="submit">Submit</button>
  </form>

Divs

Are used as simple containers to divide content up.

DOCTYPE

Used to tell the browser what version of HTML to use.

<!DOCTYPE html>
<html>
    <h1>Doctype defined</h1>
</html>

Lessons Learned

Today I finished up the basics of HTML. I thought it was a bit boring but my dad told me that eventually I will be able to do cool things and make my own website to sell stuff like my drawings. He also told up next is styling html and it is called css.