CARLO FRINOLLI
email: carlo.frinolli@nois3.it
fb: www.facebook.com/carlo.frinolli
(o almeno tanti mi hanno consegnato l'esercizio :( )
carlo frinolli | web design I | IED 2013/2014
se in cuor tuo lo sai che TU non sai tra questi, allora taci.
carlo frinolli | web design I | IED 2013/2014
carlo frinolli | web design I | IED 2013/2014
In che lingua si parleranno mai?
Finora markup è sinonimo di descrizione e non di interazione.
Il massimo che avete visto è stato cliccare su un link.
Come invio dati a una pagina HTML affinché
lui sappia qualcosa di me?
carlo frinolli | web design I | IED 2013/2014
I famigerati formulari.
Quelli brutti, da riempire in triplice copia, delle poste.
Quelli.
Sì.
carlo frinolli | web design I | IED 2013/2014
Come sono fatti, dove li avete usati?
carlo frinolli | web design I | IED 2013/2014
La maggior parte delle volte li avrete usati
senza sapere cosa fossero.
Eppure come comunico a una pagina web qual è
il mio nome utente, la mia data di nascita,
i dati della mia carta di credito?
carlo frinolli | web design I | IED 2013/2014
Tipicamente un form contiene alcuni tag.
<form action="" method="get" name="test" id="test">
<legend>
Please put a description here.
</legend>
<input type="text" name="">
...
<input type="submit" value="Send">
</form>
<form action="" method="get" name="test" id="test">
carlo frinolli | web design I | IED 2013/2014
http://www.cs.tut.fi/~jkorpela/forms/methods.htmlThe HTML specifications technically define the difference between
"GET"
and"POST"
so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body.
Ehi! Ma quindi in GET chi intercetta
il mio indirizzo intercetta tutti i miei dati.
carlo frinolli | web design I | IED 2013/2014
Tutto quello che inviate in rete, form o non
che non passa attraverso il nostro amico
https://www.example.com
carlo frinolli | web design I | IED 2013/2014
carlo frinolli | web design I | IED 2013/2014
I tag deputati all'inserimento nei form sono per lo più
<input type="">
carlo frinolli | web design I | IED 2013/2014
Ma voi, quando passare in un corridoio
e vi urlano "COSO!!" "COSA!???"
ve girate?
Allo stesso modo gli elementi di input
hanno bisogno di un nome per poter assegnarci...
carlo frinolli | web design I | IED 2013/2014
Se non specificate l'attributo value,
non passerete mai alcun valore alla vostra pagina web.
<input type="text" name="username" value="">
<input type="text" name="username" value="valore di default">
se specificate un valore nel codice questo viene passato
Se voglio far vedere qualcosa all'utente che
poi scompare quando comincia a scriverci sopra?
<input type="text" name="username" value="default value">
Sarà così?
carlo frinolli | web design I | IED 2013/2014
È un attributo HTML5 che ha superato il problema del
valore di default nelle input text/email/tel.
<input type="text" name="username" value="" placeholder="write your username">
Piccola digressione filosofica.
Il desktop ha una tastiera fisica (hardware), sono le dita
che si adattano alla scrittura del particolare input.
Il mobile touch ha una tastiera virtuale (software),
essa può adattarsi ai vari tipi di dati che sono necessari.
Scrivere un indirizzo email ha una caratteristica diversa
dallo scrivere un numero di telefono.
carlo frinolli | web design I | IED 2013/2014
in HTML5 infatti sono stati standardizzati molti tipi
di input diversi e separati da i classici text/password
carlo frinolli | web design I | IED 2013/2014
disse il bimbominkia che è in voi.
Beh anche questi tag possono essere manipolati via css
benché gli elementi dei form sono storicamente
più complessi da stilare.
Soprattutto tre tag che vedremo più avanti.
<input type="checkbox">
<input type="radio">
<select">
Beh per scegliere una voce tra molte no?
<select name="options" id="options">
<optgroup>
<option value="a">opzione 1</option>
<option value="b">opzione 2</option>
<option value="c">opzione 3</option>
<option value="d">opzione 4</option>
<optgroup>
</select>
TUTTE LE CONSEGNE DEGLI ESERCIZI LE MANDATE A
carlo.frinolli@nois3.it
emanuele.macri@nois3.it
tutor.media_design@roma.ied.it
SEMPRE.
input {
border:1px solid #ccc;
padding:20px;
font-size:16px;
text-transform:uppercase;
}
CREATE UNA FORM DI CONTATTO
PER LA VOSTRA PAGINA WEB RESPONSIVA.
p.s.: avete capito vero che NON consegnare gli esercizi implica niente occhi dolci, ma trattamento da soldato palla di lardo?