## Session 05 - CSS, Part 3 - plus some HTML bits
Code Examples

- Example 5.1 - Simple form
  Example 5.1
  <form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit"> Submit </button></form>
- Example 5.2 - Simple for using 'get'
  Example 5.2
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit"> Submit </button></form>
- Example 5.3 - Simple form using 'post'
  Example 5.3
  <form method="post" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit">Submit</button></form>
- Example 5.4 - Form: text input
  Example 5.4
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/> Year of Birth:<input type="text" name="year_of_birth" maxlength="4"/><br/><button type="submit">Submit Information</button></form>
- Example 5.5 - Form: radio buttons
  Example 5.5
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><br/> Please send me email updates:<br/><input type="radio" name="sendupdates" value="yes" checked="checked"/>yes<br/><input type="radio" name="sendupdates" value="no"/>no<br/><button type="submit">Submit Information</button></form>
- Example 5.6 - Form: checkboxes
  Example 5.6
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> What ice cream do you like?<br/><input type="checkbox" name="icecream" value="chocolate"/>Chocolate<br/><input type="checkbox" name="icecream" value="chocolate peanut butter"/>Chocolate Peanut Butter<br/><input type="checkbox" name="icecream" value="vanilla"/>Vanilla<br/><input type="checkbox" name="icecream" value="strawberry"/>Strawberry<br/><button type="submit">Submit Information</button></form>
- Example 5.7 - Form: textarea
  Example 5.7
- Example 5.8 - Pull-down List
  Example 5.8
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><button type="submit">Submit Information</button></form>
- Example 5.9 - Scrollable List
  Example 5.9
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state" size="3" multiple="multiple"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><button type="submit">Submit Information</button></form>
- Example 5.10 - Form Labels
  Example 5.10
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><label><input type="radio" name="basketball" value="Y"/> Yes</label><label><input type="radio" name="basketball" value="N"/> No</label><button type="submit">Submit</button></form>label, button { display: block; } button { margin-top: 1rem;}
- Example 5.11 - Form Labels
  Example 5.11
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><p>Do you like to watch NCAA basketball?</p><input type="radio" name="basketball" id="basketball_y" value="Y"/><label for="basketball_y">Yes</label><br/><input type="radio" name="basketball" id="basketball_n" value="N"/><label for="basketball_n">No</label><br/><input type="submit" value="Submit"/></form>
- Example 5.12 - Form Labels
  Example 5.12
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div> What ice cream do you like? <br/><input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/><label for="icecream_chocolate">Chocolate</label><br/><input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/><label for="icecream_cpb">Chocolate Peanut Butter</label><br/><input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/><label for="icecream_vanilla">Vanilla</label><br/><input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/><label for="icecream_strawberry">Strawberry</label><br/><button type="submit">Submit Information</button></div></form>
- Example 5.13 - Form fieldset and legend elements
  Example 5.13
  <form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div><fieldset><legend>Name</legend><label>First Name <input type="text" name="fname" size="30"/></label><label>Last Name <input type="text" name="lname" size="30"/></label></fieldset><fieldset><legend>Sports</legend><fieldset><legend>Do you like basketball?</legend><label><input type="radio" name="basketball" value="Y"/> Yes</label><label><input type="radio" name="basketball" value="N"/> No</label></fieldset><fieldset><legend>Do you like baseball?</legend><label><input type="radio" name="baseball" value="Y"/> Yes</label><label><input type="radio" name="baseball" value="N"/> No</label></fieldset></fieldset><button type="submit">Submit</button></div></form>label { display: block; } fieldset { margin-top: 1rem;} button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}
- Example 5.14 - Form: optgroup in pull-down menus
  Example 5.14
  <p>Select a school:</p><form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><select name="school"><optgroup label="ACC"><option>Boston College</option><option>Clemson</option><option>Duke</option><option>Florida State</option><option>Georgia Tech</option><option>Louisville</option><option>Miami</option><option>North Carolina</option><option>North Carolina State</option><option>Notre Dame</option><option>Pittsburgh</option><option>Syracuse</option><option>Virginia</option><option>Virginia Tech</option><option>Wake Forest</option></optgroup><optgroup label="Big 10"><option>Illinois</option><option>Indiana</option><option>Iowa</option><option>Maryland</option><option>Michigan</option><option>Michigan State</option><option>Minnesota</option><option>Nebraska</option><option>Northwestern</option><option>Ohio State</option><option>Penn State</option><option>Purdue</option><option>Rutgers</option><option>Wisconsin</option></optgroup><optgroup label="Big XII"><option>Baylor</option><option>Brigham Young</option><option>Central Florida</option><option>Cincinnati</option><option>Houston</option><option>Iowa State</option><option>Kansas</option><option>Kansas State</option><option>Oklahoma</option><option>Oklahoma State</option><option>Texas</option><option>Texas Christian</option><option>Texas Tech</option><option>West Virginia</option></optgroup><optgroup label="Ivy League"><option>Brown</option><option>Columbia</option><option>Cornell</option><option>Dartmouth</option><option>Harvard</option><option>Penn </option><option>Princeton</option><option>Yale</option></optgroup><optgroup label="Pac 12"><option>Arizona</option><option>Arizona State</option><option>California</option><option>Colorado</option><option>Oregon</option><option>Oregon State</option><option>Stanford</option><option>UCLA</option><option>USC</option><option>Utah</option><option>Washington</option><option>Washington State</option></optgroup></select><div><button type="submit">Submit</button></div></form>
- Example 5.15 - text input for email
  Example 5.15
  <form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><label>Email: <input type="email" name="email_address"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;}
- Example 5.16 - text input for URLs
  Example 5.16
  <form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><label>URL: <input type="url" name="url"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;}
- Example 5.17 - HTML5 input type='number' and type='range'
  Example 5.17
  <form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><label>Pick a number: <input type="number" name="entered_number"/></label><label>How happy are you? <input type="range" min="1" max="5" value="3" step="1" name="happy"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;} input { display: block; }
- Example 5.18 - HTML5 input types for date and time
  Example 5.18
  <form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><fieldset><legend>Date and Time</legend><label>Pick a date: <input type="date" name="my_date"/></label><label>Pick a datetime <input type="datetime-local" name="my_datetime"/></label><label>Pick a time (15 minute increments) <input type="time" name="my_time_15" step="900" value="12:00"/></label><label>Pick a time (1 minute increments) <input type="time" name="my_time_1" step="60" value="12:00"/></label><label>Pick a time (1 second increments)<input type="time" name="my_time_1s" step="1" value="12:00"/></label></fieldset><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;} input { display: block; margin-top: 0.25rem;}
- Example 5.19 - Table
  Example 5.19
  <table><caption>A table</caption><tr><th rowspan="1" colspan="1"> Column 1 </th><th rowspan="1" colspan="1"> Column 2 </th><th rowspan="1" colspan="1"> Column 3 </th></tr><tr><td rowspan="1" colspan="1">row 1 column 1</td><td rowspan="1" colspan="1">row 1 column 2</td><td rowspan="1" colspan="1">row 1 column 3</td></tr><tr><td rowspan="1" colspan="1">row 2 column 1</td><td rowspan="1" colspan="1">row 2 column 2</td><td rowspan="1" colspan="1">row 2 column 3</td></tr><tr><td rowspan="1" colspan="1">row 3 column 1</td><td rowspan="1" colspan="1">row 3 column 2</td><td rowspan="1" colspan="1">row 3 column 3</td></tr></table>
- Example 5.20 - Simple data table
  Example 5.20
  <p>United States Urban and Rural Populations</p><table><tr><td rowspan="1" colspan="1">Year</td><td rowspan="1" colspan="1">Percent Urban</td><td rowspan="1" colspan="1">Percent Rural</td></tr><tr><th rowspan="1" colspan="1">2020</th><td rowspan="1" colspan="1">80.0</td><td rowspan="1" colspan="1">20.0</td></tr><tr><th rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></table><p> Data from <a href="http://www.census.gov/">United States Census Bureau</a></p>
- Example 5.21 - Advanced Table
  Example 5.21
  <table summary="This table shows the percentage of the United States population that lived in urban and rural areas from 1800 to 2000."><caption>United States Urban and Rural Populations</caption><thead><tr><th rowspan="1" colspan="1">Year</th><th rowspan="1" colspan="1">Percent Urban</th><th rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th rowspan="1" colspan="1">2020</th><td rowspan="1" colspan="1">80.0</td><td rowspan="1" colspan="1">20.0</td></tr><tr><th rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
- Example 5.22 - 'colgroup' element
  Example 5.22
  <table><caption>United States Urban and Rural Populations</caption><colgroup span="1"><col span="1" style="background-color: lightsalmon;"/><col span="2" style="background-color: wheat;"/></colgroup><thead><tr><th scope="col" rowspan="1" colspan="1">Year</th><th scope="col" rowspan="1" colspan="1">Percent Urban</th><th scope="col" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tbody><tr><th scope="row" rowspan="1" colspan="1">2020</th><td rowspan="1" colspan="1">80.0</td><td rowspan="1" colspan="1">20.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th scope="row" rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th scope="row" rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th scope="row" rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th scope="row" rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
- Example 5.23 - Table with 'scope' attribute
  Example 5.23
  <table><caption>United States Urban and Rural Populations</caption><thead><tr><th scope="col" rowspan="1" colspan="1">Year</th><th scope="col" rowspan="1" colspan="1">Percent Urban</th><th scope="col" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th scope="row" rowspan="1" colspan="1">2020</th><td rowspan="1" colspan="1">80.0</td><td rowspan="1" colspan="1">20.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">2010</th><td rowspan="1" colspan="1">80.3</td><td rowspan="1" colspan="1">19.7</td></tr><tr><th scope="row" rowspan="1" colspan="1">2000</th><td rowspan="1" colspan="1">79.2</td><td rowspan="1" colspan="1">20.8</td></tr><tr><th scope="row" rowspan="1" colspan="1">1950</th><td rowspan="1" colspan="1">64.0</td><td rowspan="1" colspan="1">36.0</td></tr><tr><th scope="row" rowspan="1" colspan="1">1900</th><td rowspan="1" colspan="1">39.6</td><td rowspan="1" colspan="1">60.4</td></tr><tr><th scope="row" rowspan="1" colspan="1">1850</th><td rowspan="1" colspan="1">15.4</td><td rowspan="1" colspan="1">84.6</td></tr><tr><th scope="row" rowspan="1" colspan="1">1800</th><td rowspan="1" colspan="1">6.1</td><td rowspan="1" colspan="1">93.9</td></tr></tbody></table>
- Example 5.24 - Table with 'headers' attribute
  Example 5.24
  <table><caption>United States Urban and Rural Populations</caption><thead><tr><th id="year" rowspan="1" colspan="1">Year</th><th id="urban" rowspan="1" colspan="1">Percent Urban</th><th id="rural" rowspan="1" colspan="1">Percent Rural</th></tr></thead><tfoot><tr><td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/">United States Census Bureau</a></td></tr></tfoot><tbody><tr><th id="y2020" headers="year" rowspan="1" colspan="1">2020</th><td headers="y2020 urban" rowspan="1" colspan="1">80.0</td><td headers="y2020 rural" rowspan="1" colspan="1">20.0</td></tr><tr><th id="y2010" headers="year" rowspan="1" colspan="1">2010</th><td headers="y2010 urban" rowspan="1" colspan="1">80.3</td><td headers="y2010 rural" rowspan="1" colspan="1">19.7</td></tr><tr><th id="y2000" headers="year" rowspan="1" colspan="1">2000</th><td headers="y2000 urban" rowspan="1" colspan="1">79.2</td><td headers="y2000 rural" rowspan="1" colspan="1">20.8</td></tr><tr><th id="y1950" headers="year" rowspan="1" colspan="1">1950</th><td headers="y1950 urban" rowspan="1" colspan="1">64.0</td><td headers="y1950 ruran" rowspan="1" colspan="1">36.0</td></tr><tr><th id="y1900" headers="year" rowspan="1" colspan="1">1900</th><td headers="y1900 urban" rowspan="1" colspan="1">39.6</td><td headers="y1900 rural" rowspan="1" colspan="1">60.4</td></tr><tr><th id="y1850" headers="year" rowspan="1" colspan="1">1850</th><td headers="y1850 urban" rowspan="1" colspan="1">15.4</td><td headers="y1850 rural" rowspan="1" colspan="1">84.6</td></tr><tr><th id="y1800" headers="year" rowspan="1" colspan="1">1800</th><td headers="y1800 urban" rowspan="1" colspan="1">6.1</td><td headers="y1800 rural" rowspan="1" colspan="1">93.9</td></tr></tbody></table>