Form con tabelle

**condor_uk** · 05-04-2014, 10:34

Buongiorno amici del forum,
dovrei creare in html un form su più colonne con etichetta descrittiva e campi input per inserimento dati, che passi successivamente i valori inseriti ad una pagina php per l'inserimento in un db.

Non so come impaginare la tabella, mi fareste un esempio di codice ?

Mi basta giusto un esempio, non so affiancare le colonne...

Grazie

**carlomarangoni** · 05-04-2014, 18:55

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Documento senza titolo</title>
  <meta charset="utf-8">
  <style type="text/css">.ts-1 {
 border: none;
 height: 173px;
 position: relative;
 text-align: left;
 width: 500px;
}
.ts-1-1 {
 border: none;
 height: 25px;
 left: 0px;
 line-height: 25px;
 padding: 0px;
 position: absolute;
 top: 0px;
 width: 167px;
}
.ts-1-2 {
 border: none;
 height: 25px;
 left: 167px;
 line-height: 25px;
 padding: 0px;
 position: absolute;
 top: 0px;
 width: 167px;
}
.ts-1-3 {
 border: none;
 height: 25px;
 left: 333px;
 line-height: 25px;
 padding: 0px;
 position: absolute;
 top: 0px;
 width: 167px;
}
.ts-1-4 {
 border: none;
 height: 24px;
 left: 0px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 25px;
 width: 167px;
}
.ts-1-5 {
 border: none;
 height: 24px;
 left: 167px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 25px;
 width: 167px;
}
.ts-1-6 {
 border: none;
 height: 24px;
 left: 333px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 25px;
 width: 167px;
}
.ts-1-7 {
 border: none;
 height: 38px;
 left: 0px;
 padding: 0px;
 position: absolute;
 top: 49px;
 width: 167px;
}
.ts-1-8 {
 border: none;
 height: 38px;
 left: 167px;
 padding: 0px;
 position: absolute;
 top: 49px;
 width: 167px;
}
.ts-1-9 {
 border: none;
 height: 38px;
 left: 333px;
 padding: 0px;
 position: absolute;
 top: 49px;
 width: 167px;
}
.ts-1-10 {
 border: none;
 height: 24px;
 left: 0px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 87px;
 width: 167px;
}
.ts-1-11 {
 border: none;
 height: 24px;
 left: 167px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 87px;
 width: 167px;
}
.ts-1-12 {
 border: none;
 height: 24px;
 left: 333px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 87px;
 width: 167px;
}
.ts-1-13 {
 border: none;
 height: 38px;
 left: 0px;
 padding: 0px;
 position: absolute;
 top: 111px;
 width: 167px;
}
.ts-1-14 {
 border: none;
 height: 38px;
 left: 167px;
 padding: 0px;
 position: absolute;
 top: 111px;
 width: 167px;
}
.ts-1-15 {
 border: none;
 height: 38px;
 left: 333px;
 padding: 0px;
 position: absolute;
 top: 111px;
 width: 167px;
}
.ts-1-16 {
 border: none;
 height: 24px;
 left: 0px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 149px;
 width: 167px;
}
.ts-1-17 {
 border: none;
 height: 24px;
 left: 167px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 149px;
 width: 167px;
}
.ts-1-18 {
 border: none;
 height: 24px;
 left: 333px;
 line-height: 24px;
 padding: 0px;
 position: absolute;
 top: 149px;
 width: 167px;
}
</style>
 </head>
 <body>
  <form>
   <div class="ts-1">
    <div class="ts-1-1">Etichetta</div>
    <div class="ts-1-2">Etichetta</div>
    <div class="ts-1-3">Etichetta</div>
    <div class="ts-1-4"><input></div>
    <div class="ts-1-5"><input></div>
    <div class="ts-1-6"><input></div>
    <div class="ts-1-7"><br>Etichetta</div>
    <div class="ts-1-8"><br>Etichetta</div>
    <div class="ts-1-9"><br>Etichetta</div>
    <div class="ts-1-10"><input></div>
    <div class="ts-1-11"><input></div>
    <div class="ts-1-12"><input></div>
    <div class="ts-1-13"><br>Etichetta</div>
    <div class="ts-1-14"><br>Etichetta</div>
    <div class="ts-1-15"><br>Etichetta</div>
    <div class="ts-1-16"><input></div>
    <div class="ts-1-17"><input></div>
    <div class="ts-1-18"><input></div>
   </div>
  </form>
 </body>
</html>

**condor_uk** · 06-04-2014, 10:56

Ciao carlomarangoni,
ti ringrazio di vero cuore per la risposta che mi hai fornito, grazie ai tuoi input sto buttando giù la mia tabella, ho qualche problema ad affiancare i campi, potresti darci un'occhiata ?

1396774512-clip-10kb.jpg

**carlomarangoni** · 06-04-2014, 14:57

Allora le soluzioni sono due:

Usare una tabella vera e propria (ma non è proprio la sua funzione)
Usare i div e float

É ovvio che non avendo tutti gli elementi e da un'immagine mi diventa difficile darti consigli su come correggere il tuo codice

**condor_uk** · 06-04-2014, 14:59

Originariamente inviata da carlomarangoni

Allora le soluzioni sono due:

Usare una tabella vera e propria (ma non è proprio la sua funzione)
Usare i div e float

É ovvio che non avendo tutti gli elementi e da un'immagine mi diventa difficile darti consigli su come correggere il tuo codice

Ciao,
mi sono incastrato qui ...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Commessa Officina</title>
<style type="text/css">
#container {
	width: 360px;
}


#salva {
	margin-left: 50px;
	margin-bottom: 10px;
	float: right;
}
</style>
</head>


<body>
<div id="container"> <!-- apro il div container -->
<FORM method="POST" action="mio_sito">
<fieldset>
  <legend>Anagrafica Cliente</legend>
  <div id="anagrafica">
    <table width="350" border="1" cellpadding="3" cellspacing="1" bordercolor="#FFCC00" style="background-color:#FFFFCC">
      <tr>
        <td width="62">Id</td>
        <td width="144"><input name="id" id="id" size="10" readonly="readonly"></td>
        </tr>
      <tr>
        <td>Cliente</td>
        <td><input name="cliente" id="cliente"></td>
        </tr>
      <tr>
        <td>Indirizzo</td>
        <td><input name="indirizzo" id="indirizzo"></td>
        </tr>
      <tr>
        <td>Partita Iva</td>
        <td><input name="piva" id="piva" maxlength="12"></td>
        </tr>
      <tr>
        <td>Telefono</td>
        <td><input name="tel" id="tel"></td>
        </tr>
    </table>
</fieldset>


<fieldset>
  <legend>Anagrafica Vettura</legend>
    <table width="350" border="1" cellpadding="3" cellspacing="1" bordercolor="#FFCC00" style="background-color:#FFFFCC">
      <td>Veicolo</td>
        <td><input name="veicolo" id="veicolo"></td>
        </tr>
      <tr>
        <td>Targa</td>
        <td><input name="targa" id="targa"></td>
        </tr>
      <tr>
        <td>Telaio</td>
        <td><input name="telaio" id="telaio"></td>
        </tr>
      <tr>
        <td>Km</td>
        <td><input name="km" id="km"></td>
        </tr>
    </table>
</fieldset>
<div id="salva">
<input type="submit" value="Salva" />
</div>
</FORM>
</div> <!-- chiudo il div container -->
</body>
</html>

**carlomarangoni** · 06-04-2014, 15:15

Come li vuoi disposti così?

ID | Cliente
Indirizzo | Telefono
Partita iva

Vuoi altri campi?
Vuoi usare una tabella o i div?

**condor_uk** · 06-04-2014, 15:39

Originariamente inviata da carlomarangoni

Come li vuoi disposti così?

ID | Cliente
Indirizzo | Telefono
Partita iva

Vuoi altri campi?
Vuoi usare una tabella o i div?

Mi piacerebbe usare i div, considera che questa form
dovrà contenere un altro fieldset "Riparazioni" che avrà
altri campi con intestazioni di colonna che saranno

Intervento|importo|iva|totale

Mi avevano detto che con i div non si poteva fare,
in sostanza è un modulo tipo fattura con i vari interventi,
il singolo prezzo senza IVA, l'imponibile IVA, il totale ivato
e a fine pagina un campo "Totale"

circa 10 righe

**carlomarangoni** · 06-04-2014, 16:20

Si! Con i div si fa ed è il più consigliabile. Vedi codice del mio primo post.
Io non riesco a darti un codice senza uno schema preciso

**condor_uk** · 06-04-2014, 20:06

Originariamente inviata da carlomarangoni

Si! Con i div si fa ed è il più consigliabile. Vedi codice del mio primo post.
Io non riesco a darti un codice senza uno schema preciso

a grandi linee questa la struttura

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Commessa Officina</title>
<style type="text/css">
#container {
	width: 700px;
}


#salva {
	margin-left: 50px;
	margin-bottom: 10px;
	float: right;
}
</style>
</head>


<body>
<div id="container"> <!-- apro il div container -->
<FORM method="POST" action="miosito">
<fieldset>
  <legend>Anagrafica Cliente</legend>
  <div id="anagrafica">
    <table width="350" border="1" cellpadding="3" cellspacing="1" bordercolor="#FFCC00" style="background-color:#FFFFCC">
      <tr>
        <td width="62">Id</td>
        <td width="144"><input name="id" id="id" size="10" readonly="readonly"></td>
        </tr>
      <tr>
        <td>Cliente</td>
        <td><input name="cliente" id="cliente"></td>
        </tr>
      <tr>
        <td>Indirizzo</td>
        <td><input name="indirizzo" id="indirizzo"></td>
        </tr>
      <tr>
        <td>Partita Iva</td>
        <td><input name="piva" id="piva" maxlength="12"></td>
        </tr>
      <tr>
        <td>Telefono</td>
        <td><input name="tel" id="tel"></td>
        </tr>
    </table>
</fieldset>


<fieldset>
  <legend>Anagrafica Vettura</legend>
    <table width="350" border="1" cellpadding="3" cellspacing="1" bordercolor="#FFCC00" style="background-color:#FFFFCC">
      <td>Veicolo</td>
        <td><input name="veicolo" id="veicolo"></td>
        </tr>
      <tr>
        <td>Targa</td>
        <td><input name="targa" id="targa"></td>
        </tr>
      <tr>
        <td>Telaio</td>
        <td><input name="telaio" id="telaio"></td>
        </tr>
      <tr>
        <td>Km</td>
        <td><input name="km" id="km"></td>
        </tr>
    </table>
</fieldset>
<fieldset>
<legend>Interventi</legend>
<table width="400" border="1" cellpadding="3" cellspacing="1" bordercolor="#FFCC00" style="background-color:#FFFFCC">
        <td>Intervento</td>
      	<td>Importo</td>
        <td>Iva</td>
        <td>Totale</td>
        </tr>
      <tr>
        </tr>
      <tr>
        <td><input name="int_1" id="int_1"></td>
        <td><input name="imp_1" id="imp_1"></td>
        <td><input name="iva_1" id="iva_1"></td>
        <td><input name="tot_1" id="tot_1"></td>
        </tr>
      <tr>
        <td><input name="int_2" id="int_2"></td>
        <td><input name="imp_2" id="imp_2"></td>
        <td><input name="iva_2" id="iva_2"></td>
        <td><input name="tot_2" id="tot_2"></td>
        </tr>
        
        <tr>
        <td><input name="int_3" id="int_3"></td>
        <td><input name="imp_3" id="imp_3"></td>
        <td><input name="iva_3" id="iva_3"></td>
        <td><input name="tot_3" id="tot_3"></td>
        </tr>
        
        <tr>
        <td><input name="int_4" id="int_4"></td>
        <td><input name="imp_4" id="imp_4"></td>
        <td><input name="iva_4" id="iva_4"></td>
        <td><input name="tot_4" id="tot_4"></td>
        </tr>
        
        <tr>
        <td><input name="int_5" id="int_5"></td>
        <td><input name="imp_5" id="imp_5"></td>
        <td><input name="iva_5" id="iva_5"></td>
        <td><input name="tot_5" id="tot_5"></td>
        </tr> 
        
        <tr>
        <td><input name="int_6" id="int_6"></td>
        <td><input name="imp_6" id="imp_6"></td>
        <td><input name="iva_6" id="iva_6"></td>
        <td><input name="tot_6" id="tot_6"></td>
        </tr>
        
        <tr>
        <td><input name="int_7" id="int_7"></td>
        <td><input name="imp_7" id="imp_7"></td>
        <td><input name="iva_7" id="iva_7"></td>
        <td><input name="tot_7" id="tot_7"></td>
        </tr>    
        
        <tr>
        <td><input name="int_8" id="int_8"></td>
        <td><input name="imp_8" id="imp_8"></td>
        <td><input name="iva_8" id="iva_8"></td>
        <td><input name="tot_8" id="tot_8"></td>
        </tr>
        
        <tr>
        <td><input name="int_9" id="int_9"></td>
        <td><input name="imp_9" id="imp_9"></td>
        <td><input name="iva_9" id="iva_9"></td>
        <td><input name="tot_9" id="tot_9"></td>
        </tr> 
        
        <tr>
        <td><input name="int_10" id="int_10"></td>
        <td><input name="imp_10" id="imp_10"></td>
        <td><input name="iva_10" id="iva_10"></td>
        <td><input name="tot_10" id="tot_10"></td>
        </tr>
                 
        </table>
</fieldset>
<div id="salva">
<input type="submit" value="Salva" />
</div>
</FORM>
</div> <!-- chiudo il div container -->
</body>
</html>

naturalmente mi piacerebbe impaginarla per bene, esempio colonna riparazione più larga delle altre...

Discussione: Form con tabelle

Strumenti discussione

Ricerca discussione

Visualizza

Form con tabelle

Permessi di invio