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