I Form in Javascript

 

 

Vediamo come è fatto un form:

 

Inserisci il tuo nome:

 

 

 

1 <form action="" method="post">
2     <p class="corpo">Inserisci il tuo nome:</p>
3     <p class="corpo">
4         <input type="text" name="fname" required>
5         <input type="submit" value="Invia">
6     </p>
7     <p class="corpo">&nbsp;</p>
8 </form>

 

Il form è contenuto tra due tag <form> </form> e serve per inviare dati al sever remoto.

l'attributo action="" sta ad indicare a quale pagina lato server dovranno essere inviate i datti. Inquesto caso essendo vuota significa che i dati saranne inviati alla stessa pagina web ( che è necessariamente .php). Quibdi formdi invio e raccolta ed elaborazione dei dati sono entrambe sullo stesso file php. Se avessimo voluto spedire i dati ad un file php diverso avremmo potuto crare due file: un file conForm.html dove c'è il form che chiederà i dati all'utente e li spedirà ad una pagina php ad es. elabora.php. Questa riceverà i dati spediti da conForm.html

ne farà quello che vorrà. in questo caso bisognerà modificare l'attributo action:

<form action="elabora.php" method="post">

ed eventualmente indicando anche il path se necessario.

Seguono due oggetti: un input di tipo="text" e di nome="fname" che chiederà il nome. In questo caso è presente l'attributo: required che lo rende obbligatorio, ossia per poter spedire il form bisogna compilarlo.

Il secondo oggetto è un input di tipo="submit" con etichetta valore="Invia" che servirà ad inviare alla pagina elabora.php o a se stessa " " i dati.

 

Nel caso si invii ad un file.php esterno Il codice php potrebbe essere questo:

 

1 <form action="elabora.php" method="post">
2     <p class="corpo">Inserisci il tuo nome:</p>
3     <p class="corpo">
4         <input type="text" name="fname" required>
5         <input type="submit" value="Invia">
6     </p>
7     <p class="corpo">&nbsp;</p>
8 </form>

 

formName.php - esegui

 

 1 <?php
 2 $alert="";
 3 $name="";
 4 if ($_SERVER["REQUEST_METHOD"] == "POST")  {
 5     if (isset($_POST['fname'])) {
 6         $name = $_POST['fname'];
 7                 $alert="Il file è pervenuto al server<br>".
 8                 "Ed il nome è: ";       
 9     } else {
10        $alert="Il file Non è pervenuto al server";   
11     }
12 }
13 ?>
14 <!DOCTYPE html>
15 <html lang="it">
16 <head>
17 <meta charset="UTF-8">
18 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
19 <title>I Form in Javascript
20 </title>
21 <link rel="icon" href="https://www.cersil.it/ar/img/favicon.ico">
22 <link href="../../css/pag.css" rel="stylesheet" type="text/css" />
23 <link href="../../css/codice.css" rel="stylesheet" type="text/css" />   
24 </head>
25 <body>
26 <table width="800" border="1" align="center" cellpadding="5" cellspacing="5">
27   <tr>
28     <td valign="top" ><p class="tit3">I Form in Javascript</p>
29       <p class="tit2">&nbsp;</p>
30       <p class="corpo">&nbsp;</p>
31       <p class="corpo">&nbsp;</p>
32       <p class="corpo">Vediamo come è fatto un form:</p>
33       <p class="corpo">&nbsp;</p>
34       <table border="1">
35         <tbody>
36           <tr>
37             <td>
38                 <form action="" method="post">
39                     <p class="corpo">Inserisci il tuo nome:
40                         <input type="text" name="fname" required>
41                         <input type="submit" value="Invia">
42                     </p>
43                     <p class="corpo">&nbsp;</p>
44                 </form>
45             </td>
46          </tr>
47         </tbody>
48     </table>
49     <p class="corpo">&nbsp;</p>
50     <p class="corpobold"><?php echo $alert?>
51     <strong><span class="corpored"><?php echo $name?></span></strong>
52     <span class="corpored"></span> </p>
53     <p class="corpobold">&nbsp;</p>
54     </td>
55   </tr>
56 </table>
57 </body>
58 </html>

 

 

 

La 2 controlla se il dato del nome è arrivato a destinazione se si lo mette nella variabile $nome

Consideriamo un primo esempio per caricare sul server dei file:

 

Questo che vedete

 

Per estrarre gli elementi di un form si possono usare:

  1. document.forms: Questo restituisce una raccolta di tutti gli elementi <form> presenti nella pagina. È un oggetto simile ad un array, che contiene tutti i form (moduli) presenti nella pagina. Puoi accedere a ciascun modulo all'interno di questa raccolta utilizzando l'indice corrispondente. Ad esempio, document.forms[0] ti darà accesso al primo modulo, document.forms[1 al secondo, e così via.
  2. document.forms["nomeForm"]: Questo restituisce il modulo specifico con l'attributo name uguale a "nomeForm". Se hai un modulo con l'attributo name uguale a "nomeForm" nella tua pagina HTML, puoi accedere direttamente a questo modulo utilizzando questa proprietà. Questo ti consente di accedere direttamente agli elementi all'interno di quel modulo senza dover iterare su tutti i moduli nella pagina.
  3. document.forms["nomeForm"].elements: Questo restituisce una raccolta di tutti gli elementi all'interno del modulo con l'attributo name uguale a "nomeForm". Questo include tutti gli elementi di input, i pulsanti e altri elementi direttamente associati all'invio dei dati del modulo. Questa è una raccolta di oggetti simili a un array.

 

 

Nome della Classe:

 

CopiaQui

 

CopiaQui