[HTML] Inserire i forms ed elementi multimediali

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:

[fancy_list style=”bullet_list”]

• 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.

[/fancy_list]

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:

...

Gli attributi:

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

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

[one_fourth]

Input text

[/one_fourth]
[three_fourth_last]

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

[/three_fourth_last]

[one_fourth]

Inviare il form

[/one_fourth]
[three_fourth_last]

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

[/three_fourth_last]

[one_fourth]

Aree di testo

[/one_fourth]
[three_fourth_last]

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

Un'area di testo da 10 righe e 50 colonne! 

[/three_fourth_last]

[one_fourth]

Campo di password

[/one_fourth]
[three_fourth_last]

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:

Maxlenght indica la lunghezza in caratteri.

[/three_fourth_last]

[one_fourth]

CheckBox

[/one_fourth]
[three_fourth_last]

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

 Checkbox

[/three_fourth_last]

[one_fourth]

RadioButton

[/one_fourth]
[three_fourth_last]

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

RadioButton 

[/three_fourth_last]

[one_fourth]

Menu opzioni

[/one_fourth]
[three_fourth_last]

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

Single
Fidanzato
Sposato

[/three_fourth_last]

[one_fourth]

Selezionare un file

[/one_fourth]

[three_fourth_last]

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

[/three_fourth_last]

[divider_top]

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:

  url-file">

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

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

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