Fuel Watch Form

This fiddle demonstrates the construction of a simple form.

by Michael Borck

HTML

<!-- This fiddle demonstrates the creation and use of a simple form            -->
<!-- Accesses the fuel watch RSS feed using parameters specified in the form   -->
<!-- Fuel watch is a service offered by the WA Departemtn of Commernce         -->
<!-- Fuel Watch Web Site: http://www.fuelwatch.wa.gov.au/                      -->
<!-- Fuel Watch RSS Feed information:                                          -->
<header>
   <p id="today"></p>
</header>
<!-- Use GET to access fuel watch RSS feed for parameters specified in the form when submitted -->
<form id="fuelform" action="http://www.fuelwatch.wa.gov.au/fuelwatch/fuelWatchRSS" method="GET">
    <ul>
        <li>
            <!-- Text input  to enter the suburb -->
            <label for="Suburb"> Perth Suburb:</label>
            <input type="text" name="Suburb" value="Bentley"/>
        </li>
        <li>
            <!-- Radio button to specify if nearby areas should be considered -->
            <label for="Surrounding">Include nearby areas?</label>
            <input type="radio" name="Surrounding" value="yes"checked="true"> yes</input>
            <input type="radio" name="Surrounding" value="no" >no</input>
        </li>
        <li>
            <!-- Select dropdown menu to specify fuel product -->
            <label for="Product"> Product: </label>
            <select name="Product">
                <option value="1"> Unleaded Petrol  </option>
                <option value="2"> Premium Unleaded </option>
                <option value="4"> Diesel </option>
                <option value="5"> LPG </option>
            </select>

        </li>
        <li>
            <!-- submit the form when pressed -->
            <input id="fuelsubmit" type="submit" align="right" value="Get Today's Prices" />
        </li>           
    </ul>
</form>
<footer>
    <p>
        Data Brought to you by
        <a href="http://www.fuelwatch.wa.gov.au/fuelwatch/pages/home.jspx">Fuel Watch</a>
    </p>
</footer>

CSS

body {
    background: lightgray;
}

header p, footer p {
    width: 75%;
    margin: auto;
    background-color: darkblue;
    padding-top: 1em;
    padding-bottom: 1em;
    color: white;
    text-align: center;
}

header p a:link, footer p a:link, header p a:visited, footer p a:visited  {
    color: white;
}

#fuelform ul {
    list-style-type: none;
}

#fuelform li {
    padding: .6em;
}

#fuelform {
    background-color: lightyellow;
    width: 75%;
    margin: auto;
}

#fuelsubmit {
    display: block;
    margin: auto;
}

#fuelsubmit li{
    padding: 5em;
}

JavaScript

// Self invoking function to update the form with today's date
(function () {
    var dayOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var monthInYear = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var d    = new Date();
    var day  = dayOfWeek[d.getDay()];
    var date =  d.getDate();
    var month  = monthInYear[d.getMonth()];
    var year   = d.getFullYear();
    var newTitle  = "Find Western Australian Fuel Prices for " +  day + ", " + date + " " + month + " "+ year;
    document.getElementById("today").innerHTML = newTitle;
})();