modifica ad uno script

[awd]

Questo è uno script per il focus sui campi di un form

window.onload=function(){
if(document.getElementsByTagName)
Focus();
}

function Focus(){
var inp=document.getElementsByTagName("input");
var inp2=document.getElementsByTagName("textarea");
for(i=0;i<inp.length;i++){
inp[i].onfocus=function(){this.style.backgroundColor="#E CE6F9"; this.style.borderColor="#333"};
inp[i].onblur=function(){this.style.backgroundColor="#FF F"; this.style.borderColor="#999"};
}
for(i=0;i<inp2.length;i++){
inp2[i].onfocus=function(){this.style.backgroundColor="#E CE6F9"; this.style.borderColor="#333"};
inp2[i].onblur=function(){this.style.backgroundColor="#FF F"; this.style.borderColor="#999"};
}
}

Il problema è che con "input" mi prende anche i pulsanti che invece non centrano. Campi e pulsanti sono però in Div differenti, come faccio a rendere la distinzione?
document.che ce metto?.getElementsByTagName("input");

il div che racchiude i campi è una classe

[Mich_]

document.getElementById('ID_DIV').getElementsByTag Name(...)

Occhio alla sintassi: la s da una parte c'e` e dall'altra no

[awd]

ciao mich, come va?

essendo il div una classe sarà così?
document.getElementByClass('CLASS_DIV').getElement sByTagName(...)
o me lo sono inventato io?

[Mich_]

Io 'sta roba non la ho mai vista.

Non so cosa intendi per classe, ma non so se JS ha accesso alle classi (del CSS).

Non puoi mettere un id al <div> che vuoi individuare?

[awd]

purtroppo no perché è una classe ripetuta, vedi:

<div class="campoForm"><label for="Nome">Nome * </label><input name="Nome" type="text" id="Nome" /></div>
<div class="campoForm"><label for="Cognome">Cognome * </label><input name="Cognome" type="text" id="Cognome"/></div>
...

Però forse si può trovare una scappatoia: gli input che mi servono sono all'interno di un fieldset mentre i pulsanti no, quindi concatenando i tag...

[awd]

mmm no, mi sa che è una cagata!

[Mich_]

Alt, fermi tutti. C'e` da rivedere la logica della pagina.

Tra le righe leggo che hai una sezione della pagina (quella che ti interessa modificare), che non e` individuata tramite un opportuno blocco.
Questo non e` un errore di sintassi, ma di semantica.
Per cui la pagina funziona lo stesso (dal punto di vista grafico non te ne accorgi), ma se la analizzi dal punto di vista strutturale ci sono dei buchi/errori.

Una volta sistemata la semantica, la cosa diventa semplice. Devi individuare tutti gli elementi di un certo tipo contenuti all'interno del tuo blocco?
document.getElementById('ID_BLOCCO').getElementsBy TagName(...)

Nota che ho usato il termine generico "blocco", che puo` essere un <form>, un <div> o qualsiasi altro elemento.

[awd]

temo di non aver capito...

[Mich_]

Sto dicendo che se la pagina e` organizzata con una logica che corrisponde alla logica dei contenuti, il problema non si pone.

Tu dici "voglio che tutti i tag di un certo tipo dentro una determinata area della pagina abbiano un certo layout".

Ora la "determinata area della pagina" DEVE corrispondere ad un blocco (un <div> o altro) che deve essere fisicamente presente nel codice.

A quel punto e` facile individuare tutti i tag di quel tipo dentro il blocco.

[awd]

tagliamo la testa al toro, posto tutto il form:

<form method="post" id="Messaggi" action="action">
<fieldset>
<legend>Destinatario</legend>
<div id="campoDest"><label for="Destinatario">Destinatario * </label>
<select name="Destinatario" id="Destinatario">
<option value="indirizzo1">xxxxxxxxxxx</option>
<option value="indirizzo2">xxxxxxxxxxx</option>
<option value="indirizzo3">xxxxxxxxxxx</option>
<option value="indirizzo4">xxxxxxxxxxx</option>
<option value="indirizzo5">xxxxxxxxxxx</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Messaggio</legend>
<div class="campoForm"><label for="Nome">Nome * </label><input name="Nome" type="text" id="Nome" /></div>
<div class="campoForm"><label for="Cognome">Cognome * </label><input name="Cognome" type="text" id="Cognome" /></div>
<div class="campoForm"><label for="Societa">Societ&agrave;/Associazione </label><input name="Societa" type="text" id="Societa" /></div>
<div class="campoForm"><label for="Email">Email *</label><input name="Email" type="text" id="Email" /></div>
<div class="campoForm"><label for="Telefono">Telefono</label><input name="Telefono" type="text" id="Telefono" /></div>
<div class="campoForm"><label for="Oggetto">Oggetto </label><input name="Oggetto" type="text" id="Oggetto" /></div>
<div class="campoForm"><label for="Messaggio">Messaggio * </label><textarea name="Messaggio" cols="30" rows="5" id="Messaggio"></textarea>
</div>
</fieldset>
<div id="buttonsForm">
<input name="Invia" type="button" id="Invia" onclick="Modulo()" onkeypress="Modulo()" value="Invia Modulo" />
<input name="Cancella" type="reset" id="Cancella" value="Cancella Modulo" />
</div>
</form>

il div campoForm dovrebbe fare quello che dici tu! in pratica me serve per avere ogni campo su una riga diversa e assegnare dei margini

div.campoForm {
	margin: 10px 0 5px;
}

Con lo script vorrei assegnare il focus (che via css con IE non funzia) ai campi input di testo e la textarea, ma non agli input button e reset!