# 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

```markup
<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.*&#x20;

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

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

*Show how it looks styled with bootstrap vs vanilla css*

#### Text area

```markup
<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:

```markup
<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:

```markup
<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&#x20;

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

```markup
<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/>

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

```markup
<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&#x20;

#### 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.&#x20;

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