4

Creiamo un form html un po’ articolato, vediamolo a blocchi:

<form action="elabora.php" method="post">
    <h3>
        <bold> king pizza --- consegna a domicilio</bold>
    </h3>

    Inserire indirizzo consegna
    <input name="indirizzo">
    <a href="https://www.google.it/maps"> Vai a Google Maps</a><br/>

    Inserire il vostro telefono:
    <input name="telefono"><br/>

abbiamo una ipotetica pagina elabora.php al quale inviare i dati, ma che ovviamente non tratteremo. Un titolo <h3>, un campo <input> con il suo nome, un link a Google Maps, un <input> per il telefono con omonimo nome.

Che pizza
<select name="elencoPizze">
    <option>Margherita</option>
    <option>Romana</option>
    <option>Napoletana</option>
    <option>Funghi</option>
</select>

Una <select> con il so nome e le sue scelte (<option>)

Condimento extra?
<ol>
    <li>
        <input type="checkbox" value="peperoni" name="extra">
        pepperoni <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="salsa" name="extra">
        salsa piccante <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="patatine" name="extra">
        patatine fritte <a href="#"> dimmi di più</a>
    </li>
</ol>

Scegli un metodo di pagamento:
<ol>
    <li>
        <input type="radio" value="contanti" name="pagamento">
        contanti
    </li>
    <li>
        <input type="radio" value="buono" name="pagamento">
        buono pasto
    </li>
    <li><i>carta di credito:</i></li>
    <ul>
        <li>
            <input type="radio" value="mastercard" name="pagamento">
            mastercard
        </li>
        <li>
            <input type="radio" value="visa" name="pagamento">
            visa
        </li>
        <li>
            <input type="radio" value="americanexpress" name="pagamento">
            americanexpress
        </li>
    </ul>
</ol>

Una lista ordinata <ol> con i suoi list item <li>. Da notare che il terzo (carta di credito ) con il tag <i> (corsivo ) presenta poi una lista non ordinata <ul> con i suoi <li> che hanno lo stesso name (pagamento) uguale anche agli <li> della <ol>

 Per ordinare la pizza fai clic sul seguente bottone:
    <input type="submit" value="Ordino questa!">
</form>

Pulsante di invio, con chiusura del form

Contattaci: - <a class="linkRossi" href="#"> il boss </a>
- <a class="linkRossi" href="#"> cucine </a>
- <a class="linkRossi" href="#"> ufficio consegne </a>
</body>

links finali (fasulli) dei contatti con la stessa classe. Ho dato un po’ di stile:

<style type="text/css">
    ol {
        margin-top: 0px;
    }

    a:link.linkRossi {
        color: red;
    }

    form {
        border: dashed 1px blue;
        width: 500px;
        background: lightyellow;
    }
</style>

Immaginiamo di inserire un bottone per creare un effetto che aiuta l’utente a trovare i links

<button style="position: relative; left: 50px;" onclick="evidenzia()"> jquery rules!</button>

al suo click lancia la funzione evidenzia() che andrò a creare

<script>
    function evidenzia() {
        $('form a').css('font-size', '25px');
    }
</script>

Una variante per scrivere la medesima cosa è:

$( 'a' , $('form') ).css('font-size', '25px');

potrebbe venir utile questa forma in altri contesti, comunque va letta seleziona i tag <a>   $(‘a’,  nel contesto del form $(‘form’).