Form HTML FORM E PHP. Un insieme di elemen5 in una pagina web con cui l'utente interagisce per inviare informazioni ad uno script

Transcription

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

2 Data Name = Sally Strongarm = 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 bofone 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 2

3 Elemento form <form>...</form> Serve a contenere gli elemenl appartenenl al form AMvi: campi di testo, bofoni, menu Altri elemenl descrimvi: tum tranne form Programmazione Web hfp://ppl.eln.uniroma2.it/pw/esf/exf.html Programmazione Web 6 3

4 AGributo ac5on ConLene la URL dello script che elaborerà i dal 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 dal valori: get o post GET (default) HTTP GET con i dal concatenal nella URL si usa? all'inizio e & fra i dal hfp:// %40example.com?name=Sally%20Strongar m& =strongarm%40example.com POST DaL invial nel body della post DaL: username = Sally Strongarm = strongarm@example.com ES. GET hfp://ppl.eln.uniroma2.it/pw/esf/exf.html ES. POST hfp://ppl.eln.uniroma2.it/pw/esf/exf2.html Programmazione Web 8 4

5 hfp://ppl.eln.uniroma2.it/pw/esf/mailinglist.php? username=pierpaolo& =pierpaolo.lorel %40uniroma2.it Programmazione Web 9 Altri agribu5 accept- charset Specifies the charset used in the submifed form (default: the page charset). aclon Specifies an address (url) where to submit the form (default: the submimng page). autocomplete Specifies if the browser should autocomplete the form (default: on). enctype Specifies the encoding of the submifed data (default: is url- encoded). hfp:// method Specifies the HTTP method used when submimng the form (default: GET). name Specifies a name used to idenlfy 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 aclon afribute (default: _self) Programmazione Web 10 5

6 Variabili e contenuto Può contenere moll elemenl amvi 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 Sally Strongarm and strongarm@example.com valori contenul 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% Programmazione Web 12 6

7 Nomi dei campi Nei form i valori per l'afributo 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 MolL 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="bufon"> <input type="hidden"> <input type="file"> HTML5 type color, date, datelme, datelme- local, , month, number, range, search, tel, Lme, url, week Programmazione Web 14 7

8 Esempi hfp:// html_form_input_types.asp hfp:// html_form_afributes.asp hfp:// 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 8

9 Radio e checkbox Radio buttons Checkbox buttons Programmazione Web 17 Menu drop down <select> definisce il menu <oplon> opzione del menu Programmazione Web 18 9

10 Menu scelta mul5pla Programmazione Web 19 File Seleziona un file dall'computer locale Servono method="post" enctype="mullpart/form- data" File input (Firefox) File input (Chrome) Programmazione Web 20 10

11 Type hidden Inviare informazioni che non provengono dall'utente dal query precedenl referral nonce Programmazione Web 21 Label Associa del testo ad elemento di input associazione implicita associazione esplicita Programmazione Web 22 11

12 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 Lpo di input Raggruppate gli input correlal Evidenziate le azioni Usate il CSS per posizionare e geslre lo slle del form Programmazione Web 24 12

13 Programmazione Web Programmazione Web 26 13

14 PHP WEB Programmazione Web 27 Variabili per form $_SERVER Contains useful informalon about the web server, as described in the next seclon $_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 informalon about any uploaded files Programmazione Web 28 14

15 Passare da5 POST Programmazione Web 29 Passare da5 GET Programmazione Web 30 15

16 Tipo richiesta GesLre il Lpo 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 16

17 Parametri con valori mul5pli Uso le parentesi quadre [] nel afributo 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> </html> Programmazione Web 34 17

18 S5ky Form Uso dei valori invial per per un form nella pagina di output Programmazione Web 35 Valori s5ky Programmazione Web 36 18

19 File Upload Il file inviato dal form è posto fra i file temporanei con un nome casuale La variabile $_FILE conlene 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 19

20 Programmazione Web 39 20