HTML FORM E PHP Programmazione Web 1
Form Un insieme di elemen5 in una pagina web con cui l'utente interagisce per inviare informazioni ad uno script Realizzazione di due cose la pagina contente il form Lo script che riceve ed elabora le informazioni Programmazione Web 2
Data Name = Sally Strongarm Email = strongarm@example.com Web application Response (HTML) Programmazione Web 3
Flusso operazioni 1. Apertura pagina con il form 2. Compilazione del form e click di un boaone 3. Invio delle informazioni al server 4. Uno script prende le informazioni e le processa 5. Lo script genera una pagina di risposta a seconda delle informazioni 6. Il server invia la pagina al browser che la visualizza Programmazione Web 4
Elemento form <form>...</form> Serve a contenere gli elemeni apparteneni al form AJvi: campi di testo, boaoni, menu Altri elemeni descrijvi: tuj tranne form Programmazione Web 5
hap://ppl.eln.uniroma2.it/pw/esf/exf.html Programmazione Web 6
AGributo ac5on ConIene la URL dello script che elaborerà i dai Se non presente si assume che il suo valore sia quello della pagina corrente Programmazione Web 7
AGributo method Specifica la modalità di invio dei dai valori: get o post GET (default) HTTP GET con i dai concatenai nella URL si usa? all'inizio e & fra i dai hap://www.example.com/mailinglist.php?name=sally%20strongarm&email=strongarm %40example.com?name=Sally%20Strongar m&email=strongarm%40example.com POST DaI inviai nel body della richiesta DaI: username = Sally Strongarm email = strongarm@example.com ES. GET hap://ppl.eln.uniroma2.it/pw/esf/exf.html ES. POST hap://ppl.eln.uniroma2.it/pw/esf/exf2.html Programmazione Web 8
hap://ppl.eln.uniroma2.it/pw/esf/mailinglist.php? username=pierpaolo&email=pierpaolo.lorei %40uniroma2.it Programmazione Web 9
altri agribu5 form accept-charset Specifies the charset used in the submiaed form (default: the page charset). acion Specifies an address (url) where to submit the form (default: the submijng page). autocomplete Specifies if the browser should autocomplete the form (default: on). enctype Specifies the encoding of the submiaed data (default: is url-encoded). hap://www.w3schools.com/tags/ref_urlencode.asp method Specifies the HTTP method used when submijng the form (default: GET). name Specifies a name used to idenify the form (for DOM usage: document.forms.name). novalidate Specifies that the browser should not validate the form. target Specifies the target of the address in the acion aaribute (default: _self). Programmazione Web 10
Variabili e contenuto Può contenere moli elemeni ajvi Ogni elemento definisce una variabile che ha un nome L'utente interagendo con il form varia il contenuto delle variabili che vengono inviate al server Nell'esempio variabili username and email Sally Strongarm and strongarm@example.com valori contenui nelle variabili Programmazione Web 11
AGributo name Definisce i nomi delle variabili <textarea name="comment" rows="4" cols="45" placeholder="leave us a comment."></textarea> Se scrivo: This is the best band ever! La variabile vale: comment=this%20is%20the%20best%20band%20ever%21 Programmazione Web 12
Nomi dei campi Nei form i valori per l'aaributo name possono essere qualunque cosa Devono essere unici nel form Sarebbe meglio evitare spazi I nomi delle variabili li uso in php per prendere il valore delle variabili Il php se trova cose strane li converte Programmazione Web 13
Campi del form MolI sono l'elemento <input> con type diverso <input type="text"> <input type="password"> <input type="submit"> <input type="reset"> <input type="radio"> <input type="checkbox"> <input type="buaon"> <input type="hidden"> <input type="file"> HTML5 type color, date, dateime, dateime-local, email, month, number, range, search, tel, Ime, url, week Programmazione Web 14
Esempi hap://www.w3schools.com/html/ html_form_input_types.asp hap://www.w3schools.com/html/ html_form_aaributes.asp hap://www.w3schools.com/tags/tag_input.asp Programmazione Web 15
Principali AGribu5 disabled Specifies that an input field should be disabled max Specifies the maximum value for an input field maxlength Specifies the maximum number of character min Specifies the minimum value for an input field pagern Specifies a regular expression to check the input value against readonly Specifies that an input field is read only (cannot be changed) required Specifies that an input field is required (must be filled out) size Specifies the width (in characters) of an input field step Specifies the legal number intervals for an input field value Specifies the default value for an input field Programmazione Web 16
Radio e checkbox Radio buttons Checkbox buttons Programmazione Web 17
Menu drop down <select> definisce il menu <opion> opzione del menu Programmazione Web 18
Menu scelta mul5pla Programmazione Web 19
File Seleziona un file dall'computer locale Servono method="post" enctype="mulipart/form-data" File input (Firefox) File input (Chrome) Programmazione Web 20
Type hidden Inviare informazioni che non provengono dall'utente dai query precedeni referral nonce Programmazione Web 21
Label Associa del testo ad elemento di input associazione implicita associazione esplicita Programmazione Web 22
fieldset e legend servono a creare dei gruppi logici ed a fornire una descrizione Programmazione Web 23
Design Usabilità Evitare gli input opzionali o non necessari Posizionare le label in modo opportuno Scegliere il Ipo di input Raggruppate gli input correlai Evidenziate le azioni Usate il CSS per posizionare e gesire lo sile del form Programmazione Web 24
Programmazione Web 25
Programmazione Web 26
PHP WEB Programmazione Web 27
Variabili per form $_SERVER Contains useful informaion about the web server, as described in the next secion $_GET Contains any parameters that are part of a GET request, where the keys of the array are the names of the form parameters $_POST Contains any parameters that are part of a POST request, where the keys of the array are the names of the form parameters $_FILES Contains informaion about any uploaded files Programmazione Web 28
Passare da5 POST Programmazione Web 29
Passare da5 GET Programmazione Web 30
Tipo richiesta GesIre il Ipo di richiesta if ($_SERVER['REQUEST_METHOD'] == 'GET') { // handle a GET request } else { die("you may only GET this page."); } Programmazione Web 31
Pagine Self Processing Pagine che generano il form e che lo elaborano Programmazione Web 32
Parametri con valori mul5pli Uso le parentesi quadre [] nel aaributo name per dire che sarà un array <select name="languages[]"> <option name="c">c</input> <option name="c++">c++</input> <option name="php">php</input> <option name="perl">perl</input> </select> Programmazione Web 33
<html> <head><title>personality</title></head> <body> <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="get"> Select your personality attributes:<br /> <select name="attributes[]" multiple> <option value="perky">perky</option> <option value="morose">morose</option> <option value="thinking">thinking</option> <option value="feeling">feeling</option> <option value="thrifty">spend-thrift</option> <option value="shopper">shopper</option> </select><br /> <input type="submit" name="s" value="record my personality!" /> </form> <?php if (array_key_exists('s', $_GET)) { $description = join(' ', $_GET['attributes']); echo "You have a {$description} personality."; }?> </body> Programmazione Web 34
S5ky Form Uso dei valori inviai per per un form nella pagina di output Programmazione Web 35
Programmazione Web 36
File Upload Il file inviato dal form è posto fra i file temporanei con un nome casuale La variabile $_FILE coniene le informazioni per accedervi <form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> <input type="hidden" name="max_file_size" value="10240"> File name: <input name="toprocess" type="file" /> <input type="submit" value="upload" /> </form> if (is_uploaded_file($_files['toprocess']['tmp_name'])) { // successfully uploaded } move_uploaded_file($_files['toprocess']['tmp_name'], "path/to/put/file/{$file}"); Programmazione Web 37
Esempio Programmazione Web 38
Programmazione Web 39