Web Design I

FORM E TRANSIZIONI (pt. I)

CARLO FRINOLLI

email: carlo.frinolli@nois3.it

fb: www.facebook.com/carlo.frinolli

Ho una novità per voi!

Questa classe è formata

solo da 7 persone!

(o almeno tanti mi hanno consegnato l'esercizio :( )

carlo frinolli | web design I | IED 2013/2014

COSA DOBBIAMO RIPETERE?

PER CHI È DI BUONA VOLONTÀ?

se in cuor tuo lo sai che TU non sai tra questi, allora taci.

carlo frinolli | web design I | IED 2013/2014

OGGI PARLIAMO DI:

• <form>, <input>, <select>, <button>
• le transizioni CSS, un mondo meno bruto
• del tempo
• del più e del meno
  
• varie ed eventuali

carlo frinolli | web design I | IED 2013/2014

Umani e HTML

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

<form>

I famigerati formulari.

Quelli brutti, da riempire in triplice copia, delle poste.

Quelli.

Sì. 

QUELLI.

carlo frinolli | web design I | IED 2013/2014

Idee?

Come sono fatti, dove li avete usati?

ESEMPI ORSÙ!

carlo frinolli | web design I | IED 2013/2014

A cosa servono?

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

Come è strutturato un <form>

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>

<form action="" method="get" name="test" id="test">

QUALE?

carlo frinolli | web design I | IED 2013/2014

GET e POST

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

Piccolo angolo paranoia

Ehi! Ma quindi in GET chi intercetta

il mio indirizzo intercetta tutti i miei dati.

E in POST?

carlo frinolli | web design I | IED 2013/2014

It's not encrypted, baby.

Tutto quello che inviate in rete, form o non

che  non  passa attraverso il nostro amico

 https://www.example.com

È IN CHIARO.

carlo frinolli | web design I | IED 2013/2014

TUTTO?

carlo frinolli | web design I | IED 2013/2014

COSA POSSIAMO INVIARE?

I tag deputati all'inserimento nei form sono per lo più

 <input type="">

• text
• password
  
• email
• tel
• checkbox
• radio
  
• etc.

carlo frinolli | web design I | IED 2013/2014

name="mettici-un-nome"

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

cosa?

carlo frinolli | web design I | IED 2013/2014

l'attributo chiave: value=""

Se non specificate l'attributo value,

non passerete mai alcun valore alla vostra pagina web.

 <input type="text" name="username" value="">

Attenzione!

 <input type="text" name="username" value="valore di default">

Ei ma un momento...

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

Placeholder

È 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">

<input> perché così tanti?

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

EWWIWA HTML5!

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

Oh kmq sn brutti gli <input>

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">                 nome opzione 1
nome opzione 2

Ma invece ste <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>

opzione 1
opzione 2
opzione 3
opzione 4

Comunicazione di servizio

TUTTE LE CONSEGNE DEGLI ESERCIZI LE MANDATE A

carlo.frinolli@nois3.it

emanuele.macri@nois3.it

tutor.media_design@roma.ied.it

SEMPRE.

TUTTI

e

PUNTUALI

Orsù imbellettiamoli

input {
  border:1px solid #ccc;
  padding:20px;
  font-size:16px;
  text-transform:uppercase;
}

Compito

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?