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
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
Show how it looks styled with bootstrap vs vanilla css
Text area
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:
The other way is to use the for attribute, giving it the ID of the associated input:
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"
Bootstrap button styling
https://getbootstrap.com/docs/5.0/components/buttons/
You can also use on a tags
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:
Try out all the different button styles from https://getbootstrap.com/docs/5.0/components/buttons/
Go through and try out all the input elements mentioned
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...
Last updated