From Computer Science Wiki
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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:
- 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
New Learning[edit]
- 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
<!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]
- 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]
|