From Computer Science Wiki
 What are we going to learn today?[edit]
- hello class.
- please review the following code. This should be about 10 minutes. Please see below the code for further information.
<!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>
- There are other inputs you should know about. Please paste the following code into visual studio code and view it in a browser (alt-B).
<!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]
- 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
|
 Credits[edit]
|
