Lez 15 i Forms II parte
Vediamo gli attributi che possiamo utilizzare con ogni campo.
- <input type= text”>
- size: larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.
- Maxlength: massima quantità di dati che possiamo immettere
- name: nome interno al campo, che il programma che preleverà i dati
- value: valore di default.
- align: l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.
Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.
Per la textarea, invece abbiamo gli attributi:
- <textarea> Questa è l'area di testo </texarea >
- cols e rows, ovvero il numero massimo di righe e di colonne del campo.
- Name= aggiungere un nome interno al field
- wrap = questo attributo può essere, wrap = “off “(il testo è visto come una lunga serie senza gli a capo), wrap = “virtual” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2wrap=physical “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).
- La checkbox, permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.
- Name= nome del campo, utili per il programma che riceverà le informazioni.
Value= indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.Align= il solito allineamento.- Se aggiungiamo l'attributo checked="checked", vuol dire che stiamo scegliendo questa opzione come standard.
Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.
I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.
Il tag è :
<select>
<option value= “primascelta”> primo </option>
<option value = “secondascelta”> secondo </option>
</select>
Gli attributi di select sono:
- name = nome del menù a discesa. Viene scritto select .
- Size = quante scelte sono visibili nello stesso momento, di default è una.
- Multiple = è presente la scelta multipla.
Gli attributi di option
- value =cosa verrà inviato al programma ricevente.
- Selected = la voce selezionata di default.
I bottoni di invio < input type = “submit”>, hanno come attributi
- name = il nome del bottone
- value = il nome visualizzato sul bottone
- align = allineamento
- tabindex = ordine in cui i campi verranno attivati.
Il tasto reset <input type = “reset”> ha come attributi:
- name = il nome del bottone
- value = il nome visualizzato
- align = l'allineamento
- tabindex = ordine in cui i campi verranno attivati.
Gli attributi dell' <input type =”image”> sono:
- name = il nome dell'immagine
- src = l'indirizzo dell'immagine
- align = l'allineamento
- border = il bordo intorno all'immagine
- height = l'altezza dell'immagine
- width = la larghezza dell'immagine
- vspace = lo spazio bianco sopra e sotto l'immagine
- hspace = lo spazio a destra e sinistra dell'immagine
- tabindex = ordine in cui i campi verranno attivati
Facciamo un esempio:
<html>
<title> Il mio form </title>
<body>
<form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" >
<fieldset>
<p align = "center">
<legend > dati utente :</legend>
<input type = "text" name = "nome" value = "Il tuo Nome">
<input type = "text" name = "cognome" value = "Il tuo Cognome">
</p>
<p align ="center">
<label > Scrivici: <br/>
<textarea cols ="60" rows="10" wrpa ="physycal">
Scrivi qui il tuo messaggio
</textarea>
</p>
</fieldset>
<p align = "center">
<label> Password: <input type ="password"></label><br/>
<label> Linguaggio di programmazione preferito: <br />
<select>
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Altro </option>
</select>
</label><br/>
<label> Linguaggi conosciuti: <br />
<select multiple ="multiple" size ="5">
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Html</option>
<option> Css </option>
</select>
<p>
<fieldset>
<p align = "center">
<label> Accetti termini e condizioni?
<input type= "radio" name = "option1" checked = "checked"> Si
<input type = "radio" name= "option2" > No
</label>
</filedset><br />
<input type ="submit" name ="invia" value="Invia" align ="center">
</p>
</form>
</body>
</html>
Il risultato sarà:
Nessun commento:
Posta un commento