Dubbi sui form

[pezzo]

Ragazzi, vi faccio una domanda banale, che però mi assilla ancora ogni volta che devo creare un form...

Generalmente per mandare a casa i vari campi e le loro descrizioni uso
... ma mi è sempre rimasto il dubbio che questo comportamento sia scorretto perché è un'informazione sulla struttura nel codice html!

Qual'è il modo più giusto di creare un form con l'ausilio dei css? (forse cambiare la proprierà display?)

Qualcuno mi posta un esempio? Grazie mille

[Mich_]

Per i form esiste il <fieldset>, che crea suddivisioni all'interno del form.

Invece per associare una label ad un campo, esiste l'apposito tag <label>.

Per alcuni esempi e dettagli vedi i manuali (X)HTML, ad esempio http://www.w3schools.com/tags/default.asp

[pezzo]

Ecco un esempio dalle specifiche HTML 4.01.

<FORM action="http://uncertosito.com/prog/aggiungiutente" method="post">
    


    <LABEL for="nome">Nome: </LABEL>
              <INPUT type="text" id="nome">

    <LABEL for="cognome">Cognome: </LABEL>
              <INPUT type="text" id="cognome">

    <LABEL for="email">e-mail: </LABEL>
              <INPUT type="text" id="email">

    <INPUT type="radio" name="sesso" value="Maschile"> Maschile

    <INPUT type="radio" name="sesso" value="Femminile"> Femminile

    <INPUT type="submit" value="Invia"> <INPUT type="reset">
    </P>
 </FORM>

ma è uguale a come ho sempre fatto... allora mi sembra di capire che l'uso dei
è consentito!

[Mich_]

Occorre chiarire cosa esattamente vuoi.

Prima parlavi di eliminare il
perche` puo` essere considerato un elemento di formattazione.
Ora invece vai a pescare un esempio realizzato in linguaggio "vecchio" (HTML 4 transitional).
Se vuoi fare una cosa "moderna", devi utilizzare una DTD per lo meno XHTML 1.0 Strict (in questo momento direi che XHTML 1.1 e` troppo avveniristica: ha problemi con IE6).

Che poi per mandare a capo, ti basta limitare la larghezza del blocco che contiene gli input (con relative label).

[pierofix]

A parer mio può essere simpatico anche provare a sfruttare i marcatori strutturali che siamo soliti utilizzare per il resto del documento. Ad esempio, abbiamo una serie di input radio o input checkbox: perchè non creare una bella lista (usando ul e li)?

Come al solito la struttura va realizzata sul caso specifico: vuoi proporci una situazione (anche fittizia), così da tentare di mettere giù un po' di codice?

[andrea_kobe]

Ciao.
Anche io ho un problema con i form. Ho sempre utilizzato le tabelle per l'impaginazione ma ora vorrei iniziare a fare le cose per bene.

Vengo al problema: mi piacerebbe ottenere una formattazione di questo tipo:

label_campo1 : qui l'input label_campo2: qui l'input
label_campo3 : qui l'input label_campo4: qui l'input.

In pratica si tratta di un form con tot righe e 4 colonne. Mi potete dare qualche consiglio? Grazie.

[Mich_]

Originariamente inviato da andrea_kobe
Vengo al problema: mi piacerebbe ottenere una formattazione di questo tipo:

label_campo1 : qui l'input       label_campo2: qui l'input
label_campo3 : qui l'input       label_campo4: qui l'input

In pratica si tratta di un form con tot righe e 4 colonne. Mi potete dare qualche consiglio? Grazie.

Ho ripreso il tuo codice inserendo i tag [ code ] per visualizzarlo correttamente.

Quel layout puoi vederlo come una lista suddivisa in due colonne: ciascun elemento contiene la label e il campo.
Quindi puoi usare una lista <ul>; ciascun[*] avra` larghezza 49% (o giu` di li`).
Dentro ciascun[*] ci sara` un <label for...> e un <input>, opportunamente formattati in larghezza.

Chiaramente dovrai azzerare i margin e padding dei[*] e definire list-style-type: none; sia ai[*] che all'<ul>.

[andrea_kobe]

Originariamente inviato da Mich_
Ho ripreso il tuo codice inserendo i tag [ code ] per visualizzarlo correttamente.

Quel layout puoi vederlo come una lista suddivisa in due colonne: ciascun elemento contiene la label e il campo.
Quindi puoi usare una lista <ul>; ciascun[*] avra` larghezza 49% (o giu` di li`).
Dentro ciascun[*] ci sara` un <label for...> e un <input>, opportunamente formattati in larghezza.

Chiaramente dovrai azzerare i margin e padding dei[*] e definire list-style-type: none; sia ai[*] che all'<ul>.

Ciao Mich_,grazie per la risposta. Seguendo i tuoi consigli (o almeno tentando di farlo ) sono arrivato a questo punto

<style type="text/css">
ul,li{
list-style-type:none;
}
</style>
</head>
<body>
<ul>
	[*]
		<label for="nome">Nome:</label><input type="text" name="nome" />
		<label for="cognome">Cognome:</label><input type="text" name="cognome" />
	[/list]
<ul>[*]
	<label for="comune">Comune:</label><input type="text" name="comune" />
	<label for="datanascita">Data Nascita:</label>
				<input name="giornoNascita" type="text" size="2" maxlength="2" />
    			/ 
    			<input name="meseNascita" type="text" size="2" maxlength="2" />
    			/ 
    			<input name="annoNascita" type="text" size="4" maxlength="4" />
[/list]
</body>

ho ottenuto le mie due colonne però non ho capito come devo assegnare la larghezza del 49%
e la questione del margin e del padding per avere un form incolonnato a dovere.
Devo mettere tutto il form all'interno di un div immagino.

Un'altra domanda. In questo mio esempietto se faccio

input{
width: 150 px;
}

ovviamente ottengo anche i 3 input per giorno,mese e anno della stessa larghezza. C'è un modo per dare a tutti gli input la dimensione di 150 tranne che ai quei 3?
Devo definire due classi per i due tipi di input?
Grazie per l'attenzione.

[Mich_]

Non e` qui il luogo per fare una trattazione di base dei CSS: vedi qualche tutorial o manuale. In particolare devi studiarti i selettori (di tag, di class e di id)

nel primo post intendevo qualcosa del tipo:

ul,li {
  list-style-type:none;
}
li {
  margin: 0; 
  padding: 0;
  width: 40%;
  float: left;
  clear: left;
}
li label {
  width: 15 em; /* o valore che ti piace */
  display: block;
  float: left;
}
li input {
  display: block;
  width: ...; /* vedi csa ti va bene */
}
li input.data {
  width: 3em;
}

Naturalmente dovrai assegnare
class="data"
a tutti gli input che si riferiscono alla data, visto che vuoi spezzare la data in tre pezzi (io comunque non lo farei, spezzando poi i vari pezzi con una RegExp opportuna da usare sia nel JS lato client (per il controllo) che nel programma sul server (per il controllo ulteriore e l'archiviazione)

[andrea_kobe]

Perdonami Mich_ ma non riesco a farlo funzionare.
Mi mostra i campi di testo uno sotto l'altro e le label sono sparite, si vede solo nascita parzialmente nascosto.

Mi stavo documentando da qui
http://webdesign.html.it/articoli/le...nare-i-form/5/

e vedo che li è stato usato
float:left;width:90px e
{margin-left: 100px;
(immagino siano quei due i parametri importanti)
ma non so come adattarlo al mio caso visto che ho due colonne e la distanza dal margine sinistro cambia sia per la seconda label che per il secondo input text a destra.
Scusate ancora la mia 'scarsità'.

<style type="text/css">
ul,li {
list-style-type:none;
}
li {
margin: 0;
padding: 0;
width: 40%;
float: left;
clear: left;
}
li label {
width: 15 em; /* o valore che ti piace */
display: block;
float: left;
}
li input {
display: block;
width: 120px; /* vedi csa ti va bene */
}
li input.data {
width: 3em;
}
</style>
</head>
<body>
<ul>
[*]
<label for="nome">Nome:</label><input type="text" name="nome" />
<label for="cognome">Cognome:</label><input type="text" name="cognome" />
[/list]
<ul>[*]
<label for="comune">Comune:</label><input type="text" name="comune" />
<label for="datanascita">Data Nascita:</label>
<input name="giornoNascita" class="data" type="text" size="2" maxlength="2" />
/
<input name="meseNascita" class="data" type="text" size="2" maxlength="2" />
/
<input name="annoNascita" class="data" type="text" size="4" maxlength="4" />
[/list]
</body>