Umbriaway Formazione e gli elementi dei form

castello di colleContinua il percorso di approfondimento di Umbriaway Consulting sugli elementi di approfondimento legati ai moduli HTML5. L’upload file consente il caricamento di un file da una directory vediamo nello specifico la sintassi. Con <INPUT scrivo un marcatore di apertura che non richiede un marcatore di chiusura. Con TYPE=”file” definisco il tipo di elemento in questo caso un file e con NAME=”nomefile” specifico il nome dell’ elemento. Quindi riassumento un esempio completo é il seguente: <INPUT TYPE=”file” NAME=”nomefile”>. Passiamo ora ad affrontare la delicata questione dei campi nascosti. Si tratta di un campo di testo nascosto che per l’appunto non verrà visualizzata nella pagina web. <INPUT é il solito marcatore che non ha bisogno del corrispondente collega di chiusura. Con TYPE=”hidden” definisco il tipo di elemento in questo caso un elemento nascosto. Con NAME=”nomeElemento” assegno un nome all’ elemento che verrà utilizzato dal codice e con VALUE=”testoValore” definisco un valore iniziale dell’ oggetto definito come elemento nascosto. Esempio completo: <INPUT TYPE=”hidden” NAME=”testoInvisibile”> e ora passiamo ad analizzare il campo PASSWORD che é un campo speciale di immissione testo che visualizza al posto dei caratteri digitati una serie di asterischi: <INPUT solito marcatore che non ha bisogno di uno analogo in chiusura. Con TYPE=”password” definisco il tipo di elemento, con NAME=”nomePassword” assegno un nome che verrà poi utilizzato dal codice, con SIZE=valoreIntero definisco il numero dei caratteri che il campo potrà accettare e con VALUE=”valoreTesto” assegno un valore iniziale al campo (opzionale). Esempio completo: <INPUT TYPE=”password NAME=”passwordUtente” SIZE=15 VALUE=”segreto!”>. Con il pulsante RESET posso azzerare tutti i valori di un modulo riportandoli a quelli iniziali. <INPUT é il marcatore di apertura che non richiede l’analogo collega in chiusura. TYPE definisce il tipo di elemento del modulo quindi TYPE=”reset”. Come al solito assegnerò un nome che verrà utilizzato dal codice quindi NAME=”nomePulsante Reset” con VALUE=”etichettaPulsante” definisco il testo che dovrà apparire all’ interno del pulsante e poi posso anche integrare elementi JS come gestori di eventi del tipo onClick=”handlerText” codice che verrà richiamato quando l’utente farà click sul pulsante (facoltativo). Vediamo un esempio completo: <input type=”reset” name=”pulsanteReset” value=”azzera i dati immessi” onClick=”ripristinaDefault()”>. Analizziamo adesso il SUBMIT che ha lo scopo di inviare i valore immessi in un modulo e che lavora in tandem con l’attributo ACTIOn presente all’ interno del marcatore FORM. <INPUT apre il marcatore, TYPE=”submit” definisce il tipo di elemento del form, NAME=”nomePulsanteSubmit” é il nome assegnato da utilizzare per i richiami di codice, VALUE assegna l’etichetta al pulsante e il solito gestore di eventi onClick esegue un codice richiamato esempio completo: <INPUT TYPE=”submit” NAME=”pulsante” VALUE=”inoltra” onClick=”verificaInput()”>. I pulsanti di opzione é un elemento ch e può essere attivato o disattivato, vediamo direttamente un esempio completo:

<form action=””>
<fieldset>
<legend>squadre simpatia</legend>
HTML <input type=”radio” name=”squadra” value=”torino”/>
CSS <input type=”radio” name=”squadra” value=”milan”/>
JavaScript <input type=”radio” name=”squadra” value=”inter”/>
</fieldset>
</form>

a questo punto non ci resta che valutare la select:

<form>
<fieldset>
<legend>Portali Umbriaway</legend>
<select name=”umbriaway”>
<option value=”http://www.umbriaway.eu/incrementa&#8221; selected=”selected”>umbriawayincrementa</option>
<option value=”http://www.umbriaway.eu/umbriawaypotenzia”>umbriawaypotenzia</option&gt;
<option value=”http://www.umbriaway.eu/umbriawayfocus”>umbriawayfocus</option&gt;
</select>
</fieldset>
</form>

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...