[HTML] Inserire i forms ed elementi multimediali

In questo articolo vediamo una parte molto interessante di HTML: i forms, ovvero le strutture che ci permettono di interagire con i nostri utenti; e l'inserimento di elementi multimediali.

HTML - Hyper Text Markup Language

[HTML] Inserire i forms ed elementi multimediali

4

I forms

I forms sono delle strutture che ci permettono di interagire con gli utenti del nostro sito.
Un’ esempio di form, è quello che si trova alla fine di questa pagina per lasciare un commento, oppure appena più sotto per inscriversi alla newsletter di InformaticaLab.

I forms generalmente (ma non è un obbligo) si dividono in due pagine:

  • una pagina, è quella addetta a raccogliere i dati del nostro form (ed è di questa che parleremo),
  • un’altra invece è uno script che ha il compito di prelevare i dati inviati dal modulo e farne ciò che è più appropriato.

Quindi, come appena detto, noi ci occuperemo della pagina appunto che contiene i forms mentre scansiamo la pagina “ricevente” in quanto non riguarda l’ HTML – ma comunque, se vi interessa, potete prendere come esempio come gestire le checkbox in PHP.

 Creare un form

Per creare un form, la sintassi è questa:

<form name="Nomedelform" action="pagina-destinazione.php" method="POST" id="form" enctype="plain/text">
<span style="font-size: 13px; line-height: 19px;">...
</form></span>

Gli attributi:

  • name : il nome del form
  • action : destinazione del form
  • id: id del form, in caso volessimo usare JS per gestirlo

HTML - Hyper Text Markup Language
Per quanto riguarda l’attributo method, esso può essere:

  • GET – il contenuto del form appare nell’ URL con il nome e contenuto di ogni campo, ad esempio: form.php?nome=federico&cognome=ponzi – il massimo di caratteri complessivo è 255
  • POST – il contenuto del form viene inviato direttamente al sito, senza apparire nella querystring

Invece enctype ci permette di definire che tipo di dati stà inviando il browser al server. Normalmente se omesso, questo attributo vale plain/text ma se vogliamo inviare per esempio immagini dovrà essere enctype=”multipart/form-data”

I campi del form

Input text

Il tag input di tipo text creare un riquadro per una linea di testo:

<span style="font-size: 13px; line-height: 19px;"><input type="text" value="Inserisci il tuo nome"></span>

Inviare il form

L’input di tipo submit permette di creare un bottone con la quale l’utente potrà sottomettere il form.

<input type="submit" value="Invia il form!">

Aree di testo

Se avete bisogno di dare più spazio, magari per scrivere qualcosa di più lungo, allora avrete bisogno del tag TextArea.

<textarea name="areaditesto" rows="10" cols="50">Un'area di testo da 10 righe e 50 colonne! </textarea>

Campo di password

Vi siete mai chiesti come si fanno a creare gli “asterischi” quando dovete inserire la password magari ad una registrazione/login? Ecco svelato l’arcano:

<input type="password" maxlength="8" size="18" value="password" name="password" />

Maxlenght indica la lunghezza in caratteri.

CheckBox

Le checkbox sono dei quadratini(box) che possono essere cliccati(in inglese checked).

<input type="checkbox" name="seleziona" value="checkbox"/> Checkbox

RadioButton

I bottoni radio sono simili alle checkbox, solo che permettono una scelta sola

RadioButton <input type="radio" name="seleziona" value="radio"/>

Menu opzioni

Ecco come creare, utilizzando il tag select e il tag figlio option, un menù con opzioni:

<select name="statoconiugale" >
<option value="Single" selected="selected">Single</option>
<option value="Fidanzato" selected="selected">Fidanzato</option>
<option value="Perso">Sposato</option>
</select>

Selezionare un file

Questo tipo di input permette all’utente di selezionare un file. Ovviamente per upparlo o comunque riceverlo, dovremo creare uno script ad hoc sulla pagina che riceve lo script, e dovremo utilizzare l’altro tipo di enctype

<input name="fileupload" type="file" size="20" />

Inserire elementi multimediali

All’ inizio, quando ho cominciato spiegando che questa è una guida ad (x)HTML4 e che avremmo incontrato tags obsoleti e deprecati, avevo premesso che di volta in volta avrei specificato quelli da conoscere solo per “storia”.

La categoria contenente il maggior numero di tag poco usati e deprecati è probabilmente questa: per questo motivo, darò solo un’infarinatura in quanto veramente non ricordo l’ultima volta che ho incontrato questi tags utilizzati nel web.

Per includere un file audio:

<object type="audio/wav" autostart="true"  data="<em>url del file audio</em>">
  <embed autostart="true" src="<em>url-file"</em>>
</object>

Per includere un file video (ormai si utilizza youtube oppure html5):

<object type="video/quicktime" width="164" height="140"  data="url-filmato.mov">
 <embed  type="video/quicktime" width="160" height="160" src="url-filmato.mov">
</object>

Per includere un file flash (forse quello ancora che potreste, per poco, incontrare sul web):

<object type="application/x-shockwave-flash" data="url-file-flash.swf" width="450" height="164">
  <param name="movie" value="url-file-flash.swf"/>
</object>

In tutti e tre i casi, utilizziamo l’oggetto object che fra tutti i tag obsoleti, è quello meno obsoleto e cross-browser.

About the Author

Federico Ponzi

Studente, Webmaster ed appassionato di tutto ciò che è informatico con una spruzzata di scienza.

View all posts by Federico Ponzi

  1. Mattyw
    Mattyw07-13-2013

    Ma il tag non è affatto obsoleto, anzi, con html5 è stato anche standarizzato il vecchik tag . Poi il fatto che sia stato aggiunto anche il tag è un altro discorso, ma i vecchi tag rimangono, anche per retrocompatibilità.

  2. ricettedelcuore
    ricettedelcuore03-21-2014

    Ciao Federico,
    A proposito di come gestire una pagina, io vorrei fare una cosa ancora più semplice che inserire un form.
    Vorrei creare una pagina che contenga l’elenco delle pagine sottostanti, e che si aggiorni automaticamente.
    Ho provato a farla ma con scarsissimi risultati
    Ricettedelcuore.it/le-basi

    • Federico Ponzi
      Federico Ponzi03-21-2014

      Ciao!
      Mi sà che stai confondendo i linguaggi “statici” con quelli “dinamici”:
      HTML è un linguaggio statico. Questo vuol dire che, una volta creata una pagina in html, sia che la vedo io che la vedi tu questa non cambia. Quello che vuoi fare tu, è qualcosa di dinamico: a seconda del momento (es: oggi ci sono due pagine, domani tre) visualizzi un dato differente. Questo è realizzabile ad esempio con PHP (linguaggio di scripting che però penso sia inutile impararsi per fare una semplice lista come vuoi tu).
      Premesso questo, sicuramente con solo HTML non vai da nessuna parte: o appunto ti impari il PHP e il core di WordPress, o più semplicemente ti affidi ad un plugin. Nella pagina principale le-basi ne usi uno per visualizzare la lista di categorie disponibili. Per ogni pagina poi, puoi visualizzare la lista di post contenuti nella categoria. Cercando velocemente un plugin come questo dovrebbe fare al caso tuo:
      http://wordpress.org/plugins/category-post-shortcode/ oppure puoi chiedere un plugin ad hoc nel forum di WordPress: http://wordpress.org/support/
      Ciao!

Leave a Reply to Federico Ponzi Click here to cancel reply.