HTML5 Forms

July 11, 2024

Forms and their attributes

<form>
All the form elements are placed between this tag

action=”url” – The action attribute points to the URL where the forms information will be submitted<

method=”get” or method=”post”- Forms are sent using either the get or post

Values from the form will be added to the URL specified in the ACTION attribute

GET is used in the following form situations:
– Short forms like search
– When only retrieving data from the server

POST method sends the values as HTTP headers and are used for the following forms:
– Upload forms
– Very long forms
– Forms which contain sensitive data
– When adding or deleting information from a database

If no method is set (POST or GET) the form will default to using the GET method

The <input> element is used to create several types of form controls, the value of the type= attribute will determine what kind is created.

Other form elements and attributes include:

– type=”text” – creates a single line output
– name=” ” – identifies the form control for the server
– mexlength=” ” – used to limit the number of characters on a form
– type=”password” – single line text that blocks the input
– element creates a multiline form, text that is coded between the opening and closing tags will appear in the form box
– type=”radio” – creates radio buttons of which only one can be selected
– value=” ” – indicates the value sent to the server of the selected button
– <selected> – this attribute can be used to have a button selected when the page loads
– type=”checkbox” – allows selection of one or more options
– <select> – creates a drop down list
<option> – used with the select element to create options the user can choose
– size=” ” can be used with select to set how many drop down options can be seen
– <multiple=”multiple”> – allows users the pick more than one drop down option
<input> – element is used to allow file uploads
– type=”file” – creates an upload form, method must be set as POST
– type=”submit” – creates a submit button
– type=”image” – can be used to create an image submit button
– type=”hidden” – hides a form on the page
– <button> – element allows more control over button appearance, combine text and image between opening and closing tags
– <label> – identifies the form and helpful for screen readers
– for=” ” – used alongside LABEL and identifies which form it belongs to and allows users to click text
<fieldset> – use to group related forms, browser will show line around group
<legend> – id’s the form group and appears as a form header
– type=”date” – creates a date selection box
– type=”email” – use for email form and also optimizes for smartphone keyboard
– type=”URL” – used when asking for a URL and HTML5 will validate a url as input
– type=”search” – creates a single line search form
– placeholder=” ” – text written in the placeholder attribute shows up in the text form

<html>
    <head>
        <title>Forms</title>
    </head>
    <body>
        <form action="http://www.example.com/review.php" method="get">
            <fieldset>
                <legend>
                    Your Details:
                </legend>
                <label>
                    Name:
                    <input type="text" name="name" size="30" maxlength="100">
                </label>
                <br />
                <label>
                    Email:
                    <input type="email" name="email" size="30" maxlength="100">
                </label>
                <br />
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    Your Review:
                </legend>
                <p>
                    <label for="hear-about">
                        How did you hear about us?
                    </label>
                    <select name="referrer" id="hear-about">
                        <option value="google">Google</option>
                        <option value="friend">Friend</option>
                        <option value="advert">Advert</option>
                        <option value="other">Other</option>
                    </select>
                </p>
                <p>
                    Would you visit again?
                    <br />
                    <label>
                        <input type="radio" name="rating" value="yes" />
                        Yes
                    </label>
                    <label>
                        <input type="radio" name="rating" value="no" />
                        No
                    </label>
                    <label>
                        <input type="radio" name="rating" value="maybe" />
                        Maybe
                    </label>
                </p>
                <p>
                    <label for="comments">
                        Comments:
                    </label>
                    <br />
                    <textarea rows="4" cols="40" id="comments">
                    </textarea>
                </p>
                <label>
                    <input type="checkbox" name="subscribe" checked="checked" />
                    Sign me up for email updates
                </label>
                <br />
                <input type="submit" value="Submit review" />
            </fieldset>
        </form>
    </body>
</html>

HTML – Tables

June 28, 2024

The following is an example of how to construct a table using the following tags

  • <table>
  • <tr>
  • <td>
  • <th>
  • <theader>
  • <tbody>
  • <tfooter>

Tags have been explained in the comments contained in the code below:

<html>
    <head>
        <title>Tables</title>
    </head>
    <body>
        <!-- <table> used to create a table
            <thead> table headers sit inside this element
                <tr> starts a table row
                <td> contains the cell data
                <th> like td but contains the header
            <tbody> groups the body of the table content
            <tfooter> contains the table footer -->
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Income</th>
                    <th>Expemditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>3rd January</th>
                    <td>290</td>
                    <td>50</td>
                </tr>
                <tr>
                    <th>4th January</th>
                    <td>255</td>
                    <td>32</td>
                </tr>
                <tr>
                    <th>5th January</th>
                    <td>315</td>
                    <td>65</td>
                </tr>
                <tr>
                    <th>6th January</th>
                    <td>244</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>7th January</th>
                    <td>450</td>
                    <td>125</td>
                </tr>
                <tr>
                    <th>31st January</th>
                    <td>129</td>
                    <td>64</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td>7824</td>
                    <td>1241</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
The outcome of the preceding code. Note the footer data is not the actual sum, just an example
The outcome of the example code


The Blog Returns

June 28, 2024

It has been almost 10 years since i last posted on this blog and alot has happened in that time. Websites i’ve created have come and gone. While i do have backups of those, they are no longer available online. What is though, is this blog of mine.

I created this blog to act as a record of my knowledge and also a resource to reference at a later date, and today that is exactly what i will continue to do as i begin my journey in learning HTML, CSS, Javascript, JQuery, Python, PHP and MySQL. There will also be Computer Science topics and Cyber Security topics at some point too.

If you found this blog welcome, it’s good to be back and i can’t wait to share and record my knowledge.