UVA Web Design - Week 8

Photo by Kelly Sikkema on Unsplash

 This week we learned about <table> and <form>.  

I remember working with Tables back in the day to create HTML page layouts, but Flexbox, Grid and other techniques have taken over for layout styling.  While I imagine there are still good reasons for using Tables, I found it much easier to use a flexbox or grid to present a table-like layout, including "cell" borders.  

Here's a link to some good table syntax information:
https://www.w3schools.com/html/html_tables.asp

Here is an excerpt from my project:

<table border="1">

            <caption><h2>Links to Useful Information</h2></caption>

            <thead>

              <tr>

                  <th id="group">Link Group</th>

                  <th id="link">Links</th>

              </tr>

            </thead>

            <tbody>

              <tr>

                <td class="group" rowspan="6" headers="group">Technology</td>

              </tr>

              <tr>

                <td headers="link"><a href="https://www.freebsd.org" target="_blank">FreeBSD Information</a></td>

              </tr>

           </tbody>

          </table>

Forms on the other hand...  awesome! Forms are essential when you want to collect information from site visitors.  There are many types of form controls.  Here's a great link to some form information:  https://www.tutorialspoint.com/html/html_forms.htm

Here's an excerpt from the form on my project site.  Notice I am using a server-side script to process the form and that script is hosted on formmail.com

<form class="submit" action="https://fp1.formmail.com/cgi-bin/REDACTED" method="post">
            <input type="hidden" name="_pid" value="REDACTED">
            <input type="hidden" name="_fid" value="REDACTED">
            <input type="hidden" name="recipient" value="1">
            <label for="realname">Name:</label>
            <input type="text" name="realname" id="realname" required="required" placeholder="Your Name"><br>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required="required" placeholder="Your Email"><br>
            <label for="comments">Question:</label>
            <textarea name="comments" id="comments" rows="4" cols="22" required="required"></textarea><br>
            <input id=mySubmit name="askbutton" type="submit" value="Ask!">

</table></form> 🤣