Form in HTML
FORM 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!doctype html> <html lang="it"> <head> <title>QUESTBASE</title> <meta charset="utf-8" /> </head> <body> <form> <h3>DATI PERSONALI</h3> <strong>Cognome (*):</strong><br /> <input type="text" required /><br /> <strong>Nome (*):</strong><br /> <input type="text" value="Paolo" required /><br /> <strong>Usarname:</strong><br /> <input type="text" placeholder="Enter Username" required /><br /> <strong>Password:</strong><br /> <input type="password" /><br /><br /> <hr> <h3>QUESTIONARIO</h3> <strong>Che utente sei?</strong><br /> <input type="radio" name="utente" checked />Alunno<br /> <input type="radio" name="utente" />Docente<br /> <input type="radio" name="utente" />ATA<br /> <input type="radio" name="utente" disabled />Genitore<br /><br /> <strong>Qual'è il tuo grado di conoscenza informatica?</strong><br /> <input type="radio" name="conoscenza" />Base<br /> <input type="radio" name="conoscenza" />Intermedio<br /> <input type="radio" name="conoscenza" />Avanzato<br /><br /> <strong>Come sei venuto a conoscenza di questo sito (più scelte)?</strong><br /> <input type="checkbox" checked />Web<br /> <input type="checkbox" />Amico<br /> <input type="checkbox" disabled />Scuola<br /> <input type="checkbox" />Rivista<br /><br /> <strong>Dove abiti</strong><br /> <select> <option>Busto Arsizio</option> <option>In provincia di Varese</option> <option>In provincia di Milano</option> <option>Altro</option> </select><br /><br /> <strong>Lascia un Commento</strong><br /> <textarea rows="4" cols="50" placeholder="Inserisci un commento"></textarea> <br /><br /><br /> <hr> <input type="submit" value="INVIO DATI"> </form> </body> </html> |
FORM 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
<!doctype html> <html lang="it"> <head> <title>QUESTBASE</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="shortcut icon" type="image/png" href="favicon.png"/> <style type="text/css"> div.contenitore{ max-width: 800px; margin: 0 auto; background-color: #35682D; } div.icona{ max-width: 600px; margin: 0 auto; color: white; background-color: white; padding: 10px; } div.titolo{ max-width: 600px; margin: 0 auto; color: white; background-color: black; padding: 20px; } div.modulo{ padding: 20px; max-width: 600px; margin: 0 auto; background-color: #CCCCCC; } hr{ border: 5px solid green; } </style> </head> <body> <div class="contenitore"> <div class="titolo"> <center><!-- <p>Styled Google icons (size, color, and shadow):</p> --> <i class="material-icons" style="font-size: 24px; color: white;">cloud</i> <i class="material-icons" style="font-size: 36px; color: green;">cloud</i> <i class="material-icons" style="font-size: 48px; color: red;">cloud</i> <i class="material-icons" style="font-size: 60px; color: lightblue; text-shadow: 2px 2px 4px #000000;">cloud</i> <span style="font-size: 30px;">QUESTBASE <sup>3.0</sup><sub style="font-size: 50%;">ing.Daniele Corti</sub></span> </center> </div> <div class="modulo"> <form name="form1" action="elabora.php" method="post"> <h3 contenteditable="true">DATI PERSONALI</h3> <strong>Cognome (*):</strong><br /> <input type="text" name="cognome" required autofocus /><br /> <strong>Nome (*):</strong><br /> <input type="text" name="nome" value="Paolo" required /><br /> <strong>Città abitazione:</strong><br /> <input type="text" name="citta" autocomplete="off" /><br /> <strong>Email:</strong><br /> <input type="email" name="email" placeholder="Enter Email" size="30" /><br /> <strong>Telefono:</strong><br /> <input type="tel" name="tel"><br /> <strong>Username:</strong><br /> <input type="text" name="username" /><br /> <strong>Password (max 10 char):</strong><br /> <input type="password" name="password" maxlength="10" /><br /><br /> <strong>Data di Nascita:</strong><br /> <input type="date" name="dataNascita"><br /><br /> <strong>Sesso (*):</strong><br /> <input type="radio" name="sex" value="m" required>M<br /> <input type="radio" name="sex" value="f">F<br /> <hr> <h3>QUESTIONARIO</h3> <strong>Lingue parlate:</strong><br /> <input type="checkbox" name="vetling[]" value="spagnolo"/>SPAGNOLO<br /> <input type="checkbox" name="vetling[]" value="inglese"/>INGLESE<br /> <input type="checkbox" name="vetling[]" value="tedesco"/>TEDESCO<br /><br /> <strong>Che utente sei?</strong><br /> <input type="radio" name="utente" value="alunno" checked />Alunno<br /> <input type="radio" name="utente" value="docente" />Docente<br /> <input type="radio" name="utente" value="ata" />ATA<br /> <input type="radio" name="utente" value="genitore" disabled />Genitore<br /><br /> <strong>Qual'è il tuo sito web preferito?</strong><br /> <input type="url" name="url" placeholder="https://www.liceotosi.edu.it"><br /><br /> <strong>Qual'è il tuo livello di conoscenza della programmazione?</strong> <br /> <select name="liv_prog"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select><br /><br /> <strong>Quanati linguaggi di programmazione conosci (da 1 a 10)?</strong><br /> Numero: <input type="number" name="num_ling" min="1" max="10" step="1"><br /><br /> <strong>Come sei venuto a conoscenza di questo sito (più scelte)?</strong> <br /> <input type="checkbox" name="vetConoscenze[]" value="web" checked />Web<br /> <input type="checkbox" name="vetConoscenze[]" value="amico" />Amico<br /> <input type="checkbox" name="vetConoscenze[]" value="scuola" disabled />Scuola<br /> <input type="checkbox" name="vetConoscenze[]" value="rivista" />Rivista<br /><br /> <strong>Provincia della tua scuola</strong><br /> <select name="provScuola"> <option value="" disabled selected>SCEGLI</option> <option value="BG">BG</option> <option value="BS">BS</option> <option value="MI">MI</option> <option value="VA">VA</option> <option value="VE">VE</option> </select><br /><br /> <strong>Quale siti visiti (più scelte)?</strong><br /> <select name="vetsiti[]" multiple size="5"> <option value="http://www.html.it">www.html.it</option> <option value="http://freephp.html.it">frephp.html.it</option> <option value="http://freasp.html.it">freasp.html.it</option> <option value="http://font.html.it">font.html.it</option> <option value="http://cgipoint.html.it" >cgipoint.html.it</option> <option value="http://form.html.it" >form.html.it</option> <option value="http://css.html.it" >css.html.it</option> </select> <p></u>NOTA: Per selezioni multiple tenere premuto CTRL e fare click</u></p><br /> <strong>Provincia di residenza (autocompletante)</strong><br /> <input type="text" list="prov" name="provResidenza"> <datalist id="prov"> <option value="BG">BERGAMO</option> <option value="BS">BRESCIA</option> <option value="CR">CREMONA</option> <option value="CO">COMO</option> <option value="MI">MILANO</option> <option value="VA">VARESE</option> <option value="VE">VENEZIA</option> <option value="VR">VERONA</option> </datalist><br /><br /> <!-- IL VALORE DI LIST COINCIDE CON QUELLO DI ID GLI OPTION HANNO UN VALUE UTILE SE L'UTENTE NON CONOSCE IL CODICE ASSOCIATO ALLA PROV --> <strong>Nazione (autocompletante)</strong><br /> <datalist id="country_list"> <select name="country"> <option value="AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <!-- more --> </select> If other, please specify: </datalist> <input type="text" name="country" id="country" list="country_list"><br /><br /> <input type="hidden" name="passoDatiNascosti" value="123456"> <strong>Lascia un Commento</strong><br /> <textarea rows="4" cols="50" name="commento" placeholder="Inserisci un commento"></textarea><br /><br /><br /> <hr> <h3>RICHIEDE UN APPUNTAMENTO</h3> <strong>Data e orario:</strong><br /> <input type="datetime-local" name="orario_appuntamento"><br /><br /> <strong>Durata dell'appuntamento:</strong><br /> <input type="time" name="durata_appuntamento"><br /><br /> <hr> <input type="image" src="invia.png" style="width: 40px; height: 15px;"> <input type="submit" value="INVIO DATI"> <input type="reset" value="CANCELLA DATI"><br /><br /><br /><br /> </form> </div> </div> </body> </html> |
DATALIST
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html lang="it"> <head> <title>QUESTBASE</title> <meta charset="utf-8" /> </head> <body> <form> <strong>SQUADRA DEL CUORE</strong><br /> <input type="text"><br /> <p>Il campo consente all'utente di inserire il nome della sua sqaudra del cuore. Di default all'utente non saranno dati aiuti aggiuntivi per compilare il campo. </p> <p>Se invece utilizziamo una "datalist", possiamo fornire all'utente una lista di opzioni che potrà selezionare per "completare il campo".<br /> Per far ciò quindi si tulizza il tag "datalist" con una serie di "option" (tanti quante sono le opzioni che si vogliono suggerire).<br /> Inoltre, per collegare una datalist ad un campo di input, assegniamo a quest'ultimo un attributo "list". Il valore di questo attributo "list" dovrà corrispondere al valore dell'attributo "id" assegnato alla datalist.<br /> L'attributo "id" è un atro strumento utilizzato dai linguaggi di scripting lato client (come per esempio Javascript) per riferirsi al quel campo (id sta per identificatore).</p><br /> <strong>SQUADRA DEL CUORE (autocompletante)</strong><br /> <input type="text" list="squadra"> <datalist id="squadra"> <option value="BA">BARCELLONA</option> <option value="BO">BOLOGNA</option> <option value="MI">MILAN</option> <option value="MO">MONACO</option> <option value="RE">REAL</option> <option value="RO">ROMA</option> </datalist> </form> </body> </html> |