Designing Solutions Through Programming - block 6 - September 24 2018 Lesson Notes
What are we going to learn today?[edit]
<!doctype html>
<!-- this file is used to teach 9th grade students about input types -->
<html>
<head>
<title>My forms</title>
<!-- style sheet will go here eventually -->
</head>
<body>
<p>Hi there :-) </p>
<!-- the form element holds all the input elements -->
<!-- don't worry about method and action yet -->
<form action="GET" method="#">
<!-- text input type is used when you want text :-) -->
<p>Please enter your first name: <input type="text" name="first_name"></p>
<!-- text input type is used when you want text :-) -->
<p>Please enter your last name: <input type="text" name="last_name"></p>
<!-- text input type is used when you want text :-) This input type has a PLACEHOLDER attribute-->
<p>Please enter your favorite city:
<input type="text" name="favorite_city" placeholder="Type your city here" ></p>
<!-- date input type is used when you want date :-) this input typ eincludes a cool drop-down calendar-->
<p>Please enter your favorite day ever: <input type="date" name="favorite_day"></p>
<!-- color input type is used when you want a color. honestly, this is rarely used, but it's fun to look at. -->
<p>Please enter your favorite color: <input type="color" name="favorite_color"></p>
<!-- password input type is used when you want a password. the result is not copiable. -->
<p>Please enter your password: <input type="password" name="password"></p>
<!-- number input type is used when you want a number. lots of options on this one. -->
<p>Please enter your age: <input type="number" name="my_age" min="2" max="18"></p>
<!-- this input type confuses students because the formatting is different than other input types. This basically gives
you a large area to type text. Like all input types, you can add attributes to this like readonly and placeholder to
this. -->
<p>Please type your biography:
<textarea name="biography" cols=40 rows="10"></textarea>
</p>
<button type="submit">Click to submit!</button>
<button type="reset">Click to reset</button>
<!-- always, always, alwyas close your tags!!!!!!! -->
</form>
</body>
</html>
<!doctype html>
<!-- this file is used to teach 9th grade students about input types -->
<html>
<head>
<title>My forms</title>
<!-- style sheet will go here eventually -->
</head>
<body>
<p>Hi there :-) </p>
<!-- the form element holds all the input elements -->
<!-- don't worry about method and action yet -->
<form action="GET" method="#">
<!-- text input type is used when you want text :-) -->
<p>Please enter your first name: <input type="text" name="first_name"></p>
<!-- text input type is used when you want text :-) -->
<p>Please enter your last name: <input type="text" name="last_name"></p>
<!-- text input type is used when you want text :-) This input type has a PLACEHOLDER attribute-->
<p>Please enter your favorite city:
<input type="text" name="favorite_city" placeholder="Type your city here" ></p>
<!-- date input type is used when you want date :-) this input typ eincludes a cool drop-down calendar-->
<p>Please enter your favorite day ever: <input type="date" name="favorite_day"></p>
<!-- color input type is used when you want a color. honestly, this is rarely used, but it's fun to look at. -->
<p>Please enter your favorite color: <input type="color" name="favorite_color"></p>
<!-- password input type is used when you want a password. the result is not copiable. -->
<p>Please enter your password: <input type="password" name="password"></p>
<!-- number input type is used when you want a number. lots of options on this one. -->
<p>Please enter your age: <input type="number" name="my_age" min="2" max="18"></p>
<!-- this input type confuses students because the formatting is different than other input types. This basically gives
you a large area to type text. Like all input types, you can add attributes to this like readonly and placeholder to
this. -->
<p>Please type your biography:
<textarea name="biography" cols=40 rows="10"></textarea>
</p>
<!-- the input types below are new, you should explore them. My favorite is the datatype. Please just type the letter C to
see how this input works. -->
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
<br />
<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<fieldset>
<legend>Choose some monster features</legend>
<div>
<input type="checkbox" id="scales" name="feature"
value="scales" checked />
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="feature"
value="horns" />
<label for="horns">Horns</label>
</div>
<div>
<input type="checkbox" id="claws" name="feature"
value="claws" />
<label for="claws">Claws</label>
</div>
</fieldset>
<br />
<fieldset>
<legend>Select a maintenance drone</legend>
<div>
<input type="radio" id="huey"
name="drone" value="huey" checked />
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey"
name="drone" value="dewey" />
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie"
name="drone" value="louie" />
<label for="louie">Louie</label>
</div>
</fieldset>
<!-- always, always, alwyas close your tags!!!!!!! -->
<button type="submit">Click to submit!</button>
<button type="reset">Click to reset</button>
</form>
</body>
</html>
|
|
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 will also ask you to complete a self-assessment which I will use to help me guage how well you think you understand our material in class. |
|
As a computer scientist, you have:[edit]
|
|
Credits[edit] |