Designing Solutions Through Programming block 1 Lesson Notes - September 19: Difference between revisions
Mr. MacKenty (talk | contribs) No edit summary |
Mr. MacKenty (talk | contribs) |
||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
* I can explain every form input has a '''type''' there are different kinds of types. | __NOTOC__ | ||
<table cellspacing="10" style="width:100%;"> | |||
<tr> | |||
<td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:lightyellow; align:right;vertical-align:top;" colspan="2"> | |||
==[[File:target.png]] Our Big Idea == | |||
<br /> | |||
<h3>The function of every web application system is to accept data, process data and output information. Effective design of interdependent components results in useful function.</h3> | |||
<br /> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="width:50%; margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:#E6F9E6; align:right;vertical-align:top;"> | |||
==[[File:class_plan.png]] What are we going to learn today?== | |||
Hello Class! | |||
By the end of class you will be able to say: | |||
== Review == | |||
* I can explain every form input has a '''type''' and there are different kinds of types. | |||
* I can construct 4 different types of input types | * I can construct 4 different types of input types | ||
== New Learning == | |||
* I can describe the two important attributes of a variables | |||
* I can describe how data is passed to a form | |||
* I can demonstrate how a form passes data | |||
* I can describe a fieldset and a legend element | |||
<syntaxhighlight lang="html"> | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>My forms page</title> | |||
<style> | |||
form { | |||
/* Just to center the form on the page */ | |||
margin: 0 auto; | |||
width: 400px; | |||
/* To see the outline of the form */ | |||
padding: 1em; | |||
border: 1px solid #CCC; | |||
border-radius: 1em; | |||
} | |||
form div + div { | |||
margin-top: 1em; | |||
} | |||
label { | |||
/* To make sure that all labels have the same size and are properly aligned */ | |||
display: inline-block; | |||
width: 90px; | |||
text-align: right; | |||
} | |||
input, textarea, select { | |||
/* To make sure that all text fields have the same font settings | |||
By default, textareas have a monospace font */ | |||
font: 1em sans-serif; | |||
/* To give the same size to all text fields */ | |||
width: 300px; | |||
box-sizing: border-box; | |||
/* To harmonize the look & feel of text field border */ | |||
border: 1px solid #999; | |||
} | |||
/* The 300px width doesnt look good for radio button. This fixes */ | |||
input.radio { | |||
width:10px; | |||
} | |||
input:focus, textarea:focus { | |||
/* To give a little highlight on active elements */ | |||
border-color: #000; | |||
} | |||
textarea { | |||
/* To properly align multiline text fields with their labels */ | |||
vertical-align: top; | |||
/* To give enough room to type some text */ | |||
height: 5em; | |||
} | |||
.button { | |||
/* To position the buttons to the same position of the text fields */ | |||
padding-left: 90px; /* same size as the label elements */ | |||
} | |||
button { | |||
/* This extra margin represent roughly the same space as the space | |||
between the labels and their text fields */ | |||
margin-left: .5em; | |||
} | |||
</style> | |||
</head> | |||
<form action="process.php" method="GET"> | |||
<div> | |||
<label for="firstname">First name:</label> | |||
<input type="text" id="firstname" name="firstname"> | |||
</div> | |||
<div> | |||
<label for="lastname">Last name:</label> | |||
<input type="text" id="lastname" name="lastname"> | |||
</div> | |||
<div> | |||
<label for="password">Password:</label> | |||
<input type="password" id="password" name="password"> | |||
</div> | |||
<div> | |||
<label for="email">Email:</label> | |||
<input type="email" id="email" name="email"> | |||
</div> | |||
<div> | |||
<label for="comments">Comments:</label> | |||
<textarea rows="10" cols="10" name="comments"></textarea> | |||
</div> | |||
<div> | |||
<label for="card">Card type:</label> | |||
<select id="card" name="usercard"> | |||
<option value="visa">Visa</option> | |||
<option value="mc">Mastercard</option> | |||
<option value="amex">American Express</option> | |||
</select> | |||
</div> | |||
<div> | |||
<fieldset> | |||
<legend> Normal size of hot chocolate </legend> | |||
<input class="radio" type="radio" name="size" value="small"> Small <br> | |||
<input class="radio" type="radio" name="size" value="medium"> Medium <br> | |||
<input class="radio" type="radio" name="size" value="large"> Large | |||
</fieldset> | |||
</div> | |||
<hr> | |||
<div> | |||
<label for="multi">Favorite ice cream:</label> | |||
<select multiple id="multi" name="multi"> | |||
<option>Banana</option> | |||
<option>Cherry</option> | |||
<option>Lemon</option> | |||
</select> | |||
</div> | |||
<hr> | |||
<div> | |||
<label for="myFruit">What's your favorite fruit?</label> | |||
<input type="text" name="myFruit" id="myFruit" list="mySuggestion"> | |||
<datalist id="mySuggestion"> | |||
<option>Apple</option> | |||
<option>Banana</option> | |||
<option>Blackberry</option> | |||
<option>Blueberry</option> | |||
<option>Lemon</option> | |||
<option>Lychee</option> | |||
<option>Peach</option> | |||
<option>Pear</option> | |||
</datalist> | |||
</div> | |||
<hr> | |||
<div> | |||
<fieldset> | |||
<legend>Choose all the vegetables you like to eat:</legend> | |||
Carrots: <input type="checkbox" id="carrots" name="veggie[]" value="carrots"> | |||
Peas: <input type="checkbox" id="peas" name="veggie[]" value="peas"> | |||
Corn: <input type="checkbox" checked id="corn" name="veggie[]" value="corn"> | |||
</fieldset> | |||
</div> | |||
<hr> | |||
<div> | |||
<label for="bday">Birthday:</label> | |||
<input type="date" id="bday" name="bday"> | |||
</div> | |||
<hr> | |||
<div> | |||
<label for="favNumber">Favorite Number:</label> | |||
<input type="number" id="favNumber" name="favNumber"> | |||
</div> | |||
<div class="button"> | |||
<button type="submit">Click to pass the form data to another page</button> | |||
</div> | |||
</form> | |||
</html> | |||
</syntaxhighlight> | |||
</td> | |||
<td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:#E6F9E6; align:right;vertical-align:top;"> | |||
==[[file:homework.png]] What is our homework? == | |||
* Please enjoy your trip! | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:lightyellow; align:right;vertical-align:top;" colspan="2"> | |||
==[[File:target.png]] How am I being assessed today? == | |||
I will assess you formatively today, and make a professional judgement to what extent you understand our learning material. I will use observation, your written work, answers to questions, and contribution to class discussions as data to make my decisions. I normally record my observations in a "evidence of learning" spreadsheet, which I will happily share with you privately if you so wish. I usually need a day or two notice. | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:#FFF5FF; align:right;vertical-align:top;" colspan="2"> | |||
== [[Image:computer1.png]] As a computer scientist, you have: == | |||
* Confidence in dealing with complexity | |||
* Persistence in working with difficult problems | |||
* Tolerance for ambiguity | |||
* The ability to deal with open-ended problems | |||
* The ability to communicate and work with others to achieve a common goal or solution | |||
</td> | |||
</tr> | |||
<tr> | |||
<td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; background-color:lightgray; align:right;vertical-align:top;" colspan="2"> | |||
== [[Image:credit.png]] Credits == | |||
* Icons used with tremendous gratitude by [http://www.freepik.com/ Freepik] from [http://www.flaticon.com/ flaticon] | |||
</td> | |||
</tr> | |||
</table> | |||
[[Category:2017-2018 Class Notes]] | |||
[[Category:2017-2018 School Year]] |
Latest revision as of 22:09, 17 September 2017
|
|
|
|
|
|
|
|
|