3. Bootstrap and user input

3. Bootstrap and user input

Lesson objectives

  • Understand some input fields such as input, radio button, select, checkbox

  • Understand Bootstrap styling

  • Understand Bootstrap grid system

  • Buttons, A tag as button

Lesson time to deliever:

2-3 hours

Course materials

Slide deck by emmanuel.

Lesson code by emmanuel

Lesson Content

  • Cover a getting user input: different input fields: label, input, textarea, checkbox, radio button, button

  • Do not cover form

  • Bootstrap - Go through bootstrap form controls

Bootstrap

Introduce bootstrap: a css frame work for making the page look nicer

How to include in html page

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Bootstrap grid system

Explain the bootstrap grid system.

The bootstrap grid system is a nice way of laying out the page that is responsive (aka when user resizes the page things still look nice and appropriately styled. For example a picture might now drop below a block of text as there is not enough space for the picture and text to be side by side)

Use the starter template here https://getbootstrap.com/docs/5.0/getting-started/introduction/

Explain container & the grid system: https://getbootstrap.com/docs/5.0/layout/grid/

  • Container acts as a container. Difference between container and container-fluid class

  • Row class

  • Col class. Different sizes sm, md, lg and how they react on different width screens

  • How using numbers can have a column larger/smaller than other cols on that row

Form Elements

Form elements allow us to get data from the user. One of the key reasons the internet was invented for. (That and showing data)

We'll cover:

  • Input tags: Your generic enter text here field

  • Text area: A bigger input tag

  • Labels

  • Radio Boxes

  • Buttons

We'll be using bootstrap to style the elements better: https://getbootstrap.com/docs/5.0/forms/overview/

Input Tag

<input type='text' name='theinput' id='theinput'>

Show how it looks styled with bootstrap vs vanilla css

Text area

<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Label for

Explain "Label for" and other way of doing it: https://stackoverflow.com/questions/18432376/what-does-for-attribute-do-in-html-label-tag

The tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:

One way is to wrap the label element around the input element:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

The other way is to use the for attribute, giving it the ID of the associated input:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Radio boxes

https://getbootstrap.com/docs/5.0/forms/checks-radios/

Radio buttons need to have the same name in order to group them together

Explain the value vs what see on input label: Label is what gets displayed to the user. Value is the underlying value that will get set when they select that option. E.g. Can have labels "I am happy to proceed", "Not right now" with values "True", "False"

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Bootstrap button styling

https://getbootstrap.com/docs/5.0/components/buttons/

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

You can also use on a tags

<a class="btn btn-primary" href="#" role="button">Link</a>

Our buttons do nothing right now. In the future we will learn how to use javascript to make our buttons do something!

Class Ex: Homework 1: Try out all the different button

Recommendations:

  • Live server in vs code to live reload code

  • Have a split screen setup so don't have to switch screens as often.

What worked well in the past

What hasn't worked well in the past

Homework/In class excerises

For this either get them to do in class and follow them step by step. Or set as a home work. The last two tasks are excercises to test knowlege.

Learning:

  1. Try out all the different button styles from https://getbootstrap.com/docs/5.0/components/buttons/

  2. Go through and try out all the input elements mentioned

  3. Do bootstrap grid tutorial - https://designmodo.com/bootstrap-grid/ and https://getbootstrap.com/docs/5.0/layout/grid/ with https://getbootstrap.com/docs/5.0/layout/columns/

Test excerises:

  • Create a login form

  • Create a form to get data from user: name, ... address...

Previous2. More Html/CSSNext4. Javascript

Last updated