Difference between revisions of "Designing Solutions Through Programming block 1 Lesson Notes - September 19"

From Computer Science Wiki
Jump to navigation Jump to search
 
Line 34: Line 34:
 
* I can demonstrate how a form passes data   
 
* I can demonstrate how a form passes data   
 
* I can describe a fieldset and a legend element
 
* 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>

Latest revision as of 20:09, 17 September 2017

Target.png 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.

Class plan.png What are we going to learn today?[edit]

Hello Class!

By the end of class you will be able to say:

Review[edit]

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


Homework.png What is our homework?[edit]

  • Please enjoy your trip!

Target.png 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.

Computer1.png 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

Credit.png Credits[edit]

Produce a plan, simulation or model.

Give a detailed account including reasons or causes.

Develop information in a diagrammatic or logical form.

Give a detailed account or picture of a situation, event, pattern or process.

Prove or make clear by reasoning or evidence, illustrating with examples or practical application.

Give a brief account.

Add labels to a diagram.

Give a sequence of brief answers with no explanation.

A unit of abstract mathematical system subject to the laws of arithmetic.

A unit of abstract mathematical system subject to the laws of arithmetic.

Consider the merits or otherwise of an argument or concept. Opinions and conclusions should be presented clearly and supported with appropriate evidence and sound argument.

Retrieved from "https://computersciencewiki.org/index.php?title=Designing_Solutions_Through_Programming_block_1_Lesson_Notes_-_September_19&oldid=6743"