Esercizi su HTML5 e form
|
|
|
- Graziana Barone
- 9 anni fa
- Visualizzazioni
Transcript
1 Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica Sapienza Università di Roma, a.a. 2016/2017 Esercizi su HTML5 e form Esercizio 1 Scrivere un documento HTML contenente una form contenente i seguenti campi: cognome (campo testuale, 40 caratteri) nome (campo testuale, 30 caratteri) matricola (campo numerico, 7 caratteri, minimo 0, massimo ) regione di residenza (da scegliere da un menu che riporta le 20 regioni italiane) (30 caratteri) telefono (16 caratteri) status (campo testuale con autocompletion, valori predefiniti: ripetente, part-time) richieste particolari (area di testo editabile di 12 righe per 60 colonne) in corso, fuori corso, in modo tale che, al momento dell invio della form, il browser esegua i seguenti controlli: verifica che il cognome non sia vuoto; verifica che il nome non sia vuoto; verifica che la matricola sia un numero; verifica che il telefono sia un numero; verifica che sia stata selezionata una regione. Tali controlli NON devono essere effettuati tramite codice JavaScript. Soluzione Documento HTML contenente la form richiesta: <html> <head> </head> <body> <form action="" method="post" name="registr"> cognome: <input type="text" name="cognome" size="40" maxlength="40" required> 1
2 nome: <input type="text" name="nome" size="30" maxlength="30" required> matricola: <input type="number" name="matricola" size="7" maxlength="7" min="0" max=" "> regione: <select name="regione" required> <option></option> <option value="valdaosta">val d Aosta</option> <option value="piemonte">piemonte</option> <option value="liguria">liguria</option> <option value="lombardia">lombardia</option> <option value="veneto">veneto</option> <option value="trentino">trentino Alto Adige</option> <option value="friuli">friuli Venezia-Giulia</option> <option value="emilia">emilia-romagna</option> <option value="toscana">toscana</option> <option value="marche">marche</option> <option value="umbria">umbria</option> <option value="lazio">lazio</option> <option value="abruzzo">abruzzo</option> <option value="molise">molise</option> <option value="campania">campania</option> <option value="basilicata">basilicata</option> <option value="puglia">puglia</option> <option value="calabria">calabria</option> <option value="sicilia">sicilia</option> <option value="sardegna">sardegna</option> </select> <input type=" " name="ind " size="30" maxlength="30"> telefono: <input type="number" name="telef" size="16" maxlength="16"> status: <input type="text" name="stat" size="30" maxlength="30" list="listastatus"> <datalist id="listastatus"> <option value="in corso"> <option value="fuori corso"> <option value="ripetente"> <option value="part-time"> </datalist> richieste particolari: 2
3 <textarea name="richieste" cols="60" rows="12"></textarea> <input type="submit" value="invia"> <input type="reset" value="reset"> </form> </body> </html> Esercizio 2 Scrivere un documento HTML contenente una form contenente i seguenti campi: cognome e nome (campo testuale, 50 caratteri) data di nascita (campo di tipo data) CAP (campo numerico, 5 caratteri) studente lavoratore (selezionabile tramite checkbox) foto (campo di tipo file) descrizione del lavoro svolto (campo testuale, 80 caratteri) in modo tale che, al momento dell invio della form, il browser effettui i seguenti controlli senza usare codice JavaScript: (a) il campo CAP deve essere un numero di 5 cifre; (b) il campo nome non deve essere un numero; (c) il campo nome non deve essere vuoto; (d) se l utente ha dichiarato di essere uno studente lavoratore, la descrizione del lavoro svolto non può essere vuota. Soluzione Non tutti i controlli richiesti possono essere effettuati direttamente dal browser senza aggiunta di codice JavaScript. In particolare, non è possibile effettuare senza script i controlli (b) e (d), mentre è possibile effettuare i controlli (a) e (c). In particolare: il controllo (a) si può realizzare automaticamente, in modo approssimato, dichiarando il campo CAP di tipo number e dichiarando per tale campo un valore massimo di Tale realizzazione per non impedisce all utente di scrivere un CAP di meno di 5 cifre. Per implementare correttamente il controllo richiesto occorre invece dichiarare il CAP come campo ti tipo text e associandogli un pattern che accetta solo sequenze di 5 cifre decimali; il controllo (c) si realizza semplicemente dichiarando required il campo nome. Il documento HTML risultante è il seguente: 3
4 <html> <head> </head> <body> <form action="" method="post" name="eseform" enctype="multipart/form-data"> cognome e nome: <input type="text" name="nome" size="50" maxlength="50" required> data di nascita: <input type="date" name="ddn"> CAP: <input type="text" name="cap" size="5" maxlength="5" pattern="( )(0 1 sono uno studente lavoratore <input type="checkbox" name="lavoratore"> foto: <input type="file" name="foto"> descrizione lavoro: <input type="text" name="descr" size="80" maxlength="80"> <input type="submit" value="invia"> <input type="reset" value="reset"> </form> </body> </html> Esercizio proposto 1 Estendere la soluzione del precedente esercizio, aggiungendo codice JavaScript che realizza i controlli (b) e (d). Esercizio proposto 2 Scrivere un documento HTML contenente una form contenente i seguenti campi: cognome e nome (campo testuale, 50 caratteri) data di nascita (campo di tipo data) codice fiscale (campo testuale, 16 caratteri) telefono o (campo testuale, 40 caratteri) pagina Web personale (campo testuale, 50 caratteri) studente lavoratore (selezionabile tramite checkbox) set di foto (campo di tipo file a valori multipli, ovvero più file possono essere selezionati dall utente) 4
5 descrizione del lavoro svolto (campo testuale, 80 caratteri) in modo tale che, al momento dell invio della form, il browser effettui i seguenti controlli senza usare codice JavaScript: (a) verificare che il valore del campo data di nascita sia una data; (b) verificare che il campo codice fiscale sia effettivamente un codice fiscale (cioè una sequenza di 16 caratteri e cifre secondo le regole dei codici fiscali italiani); (c) verifica che il campo telefono o non sia vuoto; (d) verifica che il campo pagina Web sia effettivamente una URL. 5
Esercizi su HTML e JavaScript
Linguaggi per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria dei sistemi informatici Sapienza Università di Roma, a.a. 2014/2015 Esercizi su HTML e JavaScript Esercizio 1 (a) Scrivere un documento
Esercitazione di riepilogo
Linguaggi e tecnologie per il Web prof. Riccardo Rosati corso di Laurea in Ingegneria Informatica e Automatica Sapienza Università di Roma, a.a. 2015/2016 Esercitazione di riepilogo Esercizio 1 (a) Scrivere
Esercitazione di riepilogo
Linguaggi per il Web prof. Riccardo Rosati corso di Laurea in Ingegneria Informatica e Automatica corso di Laurea in Ingegneria dei Sistemi Informatici Sapienza Università di Roma, a.a. 2013/2014 Esercitazione
Esercizi su JavaScript, DOM e Web Storage
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma, a.a. 2017/2018 Esercizi su JavaScript, DOM e Web Storage Esercizio
HTML e interattività FORM
HTML e interattività FORM Interattività delle pagine web I moderni siti web non sono più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresentano uno strumento per interagire con
Dott.ssa Adriana Pietramala
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Adriana Pietramala [email protected] Riferimenti Sito del corso: Manuale PHP http://www.php.net/download-docs.php Editor di
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8. Andrea Marchetti IIT-CNR 2011/2012
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8 Andrea Marchetti IIT-CNR [email protected] 2011/2012 Architettura di una applicazione Web Browser Web HTTP Server Web Dati View Control
HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
04/05/2011. Lezione 6: Form
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
D B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
Interazione con l utente : i moduli.
Interazione con l utente : i moduli. Nelle lezioni fin qui riportate, non abbiamo mai trattato l input di utente. Nelle applicazioni web, l input dell utente si acquisisce tramite i moduli (o FORM) HTML.
Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche
Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche A.A. 2006-07 Lezione n.10 parte II Prof. Roberto Canonico Università degli Studi di Napoli Federico
1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server
2) Il Server richiama l'interprete PHP il quale esegue i comandi contenuti nel file.php specificato nell'attributo action del tag form creando un file HTML sulla base dei dati inviati dall utente 1) Il
DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE
MODULI O FORM DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE ADATTE ALLA LETTURA MA POSSONO SVOLGERE UN RUOLO ATTIVO NEI CONFRONTI DI UNA PAGINA WEB
MODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link)
MODULO 1 PARTE 3 Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link) Goy - a.a. 2009/2010 Programmazione Web 1 Gli oggetti HTTP request e HTTP response -I Vi ricordate?
Modulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
Laboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR [email protected] 2013/2014
Laboratorio Progettazione Web PHP e FORMs HTML Andrea Marchetti IIT-CNR [email protected] 2013/2014 Struttura Applicazioni Web Browser Web HTTP Server Web API Dati Presentation Application Storage
A. Lorenzi Pagine ASP
Pagine ASP Web server software per la gestione di un computer host Internet oppure di un server di rete, che mette a disposizione dati o applicativi per gli utenti della rete Web server IIS (Internet Information
HTML FORM E PHP. Programmazione Web 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
PHP & MySQL. Giselda De Vita
PHP & MySQL Giselda De Vita - 2014 1 Per creare un applicazione WEB su APACHE, in linguaggio PHP, con Base Dati MySQL, possiamo lavorare in locale o in rete. Per lavorare in locale abbiamo bisogno di installare
ESEMPI DI FORM (da www.html.it)
ESEMPI DI FORM (da www.html.it) Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form. Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso,
Array, Funzioni e interazione con l utente
Array, Funzioni e interazione con l utente Laboratorio di Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - [email protected] Gli array sono contenitori in grado di memorizzare una sequenza di
Creare l array presentato nei lucidi ([pippo, pluto, etc])
![Creare l array presentato nei lucidi ([pippo, pluto, etc])](/thumbs/62/47053635.jpg "Creare l array presentato nei lucidi ([pippo, pluto, etc])")
Creare l array presentato nei lucidi ([pippo, pluto, etc]) Visualizzare sul browser tutto il contenuto dell array formattato come tabella, con una riga di intestazione Personaggi in grassetto e poi una
Esercitazione su AJAX
Linguaggi e tecnologie per il Web prof. Riccardo Rosati corso di Laurea in Ingegneria Informatica e Automatica Sapienza Università di Roma, a.a. 2016/2017 Esercitazione su AJAX Esercizio 1 Scrivere un
HTML5 and Next RIA Apps. Le API per HTML5 Forms
HTML5 and Next RIA Apps Le API per HTML5 Forms Le API per HTML5 Forms Nella precedente lezione abbiamo visto i principali nuov tag di HTML5, un esempio di progetto base con Initializr http://www.initializr.com/
Lezione 6: Form 27/04/2012
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
I FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati.
I FORM Che cosa sono e che caratteristiche hanno Un form contiene molti oggetti che permettono di inserire dati usando la tastiera. Tali dati verranno poi inviati alla pagina php che avrà il compito di
WEP WEb Programming. 4 PHP: dati e form
WEP WEb Programming 4 Lucidi per il corso di Basi di Dati tenuto da Paolo Baldan presso l Università di Padova, anno accademico 2008/09 1 PHP e MySQL 2 Perché? 3 Le applicazioni hanno bisogno di operare
Form HTML. <form> campi del modulo </form>
Form HTML I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L inserimento di un form in una pagina web avviene mediante il tag FORM. Attributi del form campi
AJAX. Riccardo Rosati
AJAX Riccardo Rosati Linguaggi e tecnologie per il Web Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma a.a. 2016/2017 http://www.dis.uniroma1.it/~rosati/lw/ AJAX AJAX
Guida introduttiva al PHP
Fabio Castellini 26/01/2016 Guida introduttiva al PHP Cos'è il PHP? Il PHP è un linguaggio di scripting interpretato, simile al JavaScript, per intenderci, originariamente concepito per la programmazione