Designing Solutions Through Programming block 1 Lesson Notes - September 19: Difference between revisions
Mr. MacKenty (talk | contribs) |
Mr. MacKenty (talk | contribs) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 25: | Line 25: | ||
== Review == | == Review == | ||
* I can explain every form input has a '''type''' there are different kinds of types. | * 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 | ||
Line 33: | Line 33: | ||
* I can describe how data is passed to a form | * I can describe how data is passed to a form | ||
* I can demonstrate how a form passes data | * I can demonstrate how a form passes data | ||
* I can describe | * 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> | ||
Line 41: | Line 228: | ||
==[[file:homework.png]] What is our homework? == | ==[[file:homework.png]] What is our homework? == | ||
* | * Please enjoy your trip! | ||
</td> | </td> | ||
</tr> | </tr> |
Latest revision as of 22:09, 17 September 2017
Our Big Idea[edit]
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.
|
|
What are we going to learn today?[edit]Hello Class! By the end of class you will be able to say: Review[edit]
New Learning[edit]
<!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>
|
What is our homework?[edit]
|
How am I being assessed today?[edit]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. |
|
As a computer scientist, you have:[edit]
|
|
Credits[edit] |