HTML FORM E PHP. Programmazione Web 1

Transcript

1 HTML FORM E PHP Programmazione Web 1

2 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

3 Data Name = Sally Strongarm = strongarm@example.com Web application Response (HTML) Programmazione Web 3

4 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

5 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

6 hap://ppl.eln.uniroma2.it/pw/esf/exf.html Programmazione Web 6

7 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

8 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:// %40example.com?name=Sally%20Strongar m& =strongarm%40example.com POST DaI inviai nel body della richiesta DaI: username = Sally Strongarm = 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

9 hap://ppl.eln.uniroma2.it/pw/esf/mailinglist.php? username=pierpaolo& =pierpaolo.lorei %40uniroma2.it Programmazione Web 9

10 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:// 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

11 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 Sally Strongarm and strongarm@example.com valori contenui nelle variabili Programmazione Web 11

12 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

13 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

14 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, , month, number, range, search, tel, Ime, url, week Programmazione Web 14

15 Esempi hap:// html_form_input_types.asp hap:// html_form_aaributes.asp hap:// Programmazione Web 15

16 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

17 Radio e checkbox Radio buttons Checkbox buttons Programmazione Web 17

18 Menu drop down <select> definisce il menu <opion> opzione del menu Programmazione Web 18

19 Menu scelta mul5pla Programmazione Web 19

20 File Seleziona un file dall'computer locale Servono method="post" enctype="mulipart/form-data" File input (Firefox) File input (Chrome) Programmazione Web 20

21 Type hidden Inviare informazioni che non provengono dall'utente dai query precedeni referral nonce Programmazione Web 21

22 Label Associa del testo ad elemento di input associazione implicita associazione esplicita Programmazione Web 22

23 fieldset e legend servono a creare dei gruppi logici ed a fornire una descrizione Programmazione Web 23

24 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

25 Programmazione Web 25

26 Programmazione Web 26

27 PHP WEB Programmazione Web 27

28 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

29 Passare da5 POST Programmazione Web 29

30 Passare da5 GET Programmazione Web 30

31 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

32 Pagine Self Processing Pagine che generano il form e che lo elaborano Programmazione Web 32

33 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

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

35 S5ky Form Uso dei valori inviai per per un form nella pagina di output Programmazione Web 35

36 Programmazione Web 36

37 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

38 Esempio Programmazione Web 38

39 Programmazione Web 39