29

Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Embed Size (px)

Citation preview

Page 1: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi
Page 2: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

<Form>

Page 3: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Tag <Form>Sintassi<form attr1=“val1” attrn=“valn” >

Testo, tag di formattazione, <input></input><button></button><textarea></textarea><select></select>

</form>Nota:

- tag di chiusura- attributi

Page 4: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi <form>Attributi

action Specifica l’URI dell’agente incaricato di processare i dati della form

method Specifica che metodo HTTP deve essere usato per sottomettere i dati della form. (i metodi sono predefiniti)

enctype Specifica il tipo del contenuto della form. Alcuni contenuti: "text/html", “text/plain”, “image/gif", "video/mpeg", "text/css", "audio/basic" …

Page 5: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

<Form action=“”>

L’attributo action specifica l’URI dell’agente

incaricato di processare i dati della form.

URI puo’ essere:

1. Indirizzo http di un programma

2. Path locale di un programma

3. mailto indirizzo

Page 6: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Tag <Form>

<form attr1=“val1” attrn=“valn” >

Testo, tag di formattazione,

<input></input><button></button>

<textarea></textarea>

<select></select>

</form>

Page 7: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Tag <input>Sintassi

<input attr1= val1, …, attrn=valn>

</input>

Nota:

- attributi

Page 8: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi <input>Attributi

type Specifica il tipo di casella che si vuole utilizzare.

name Attribuisce un nome alla casella in questione.Da specificare obbligatoriamente in caso si voglia usare il testo in questione.

maxlength Dipende da type.

checked Dipende da type.

src Dipende da type.

value Dipende da type.Da specificare obbligatoriamente in caso si voglia usare il testo in questione.

size Dipende da type.

Page 9: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

<input type=“”> Possibili valori di type:

text per creare una casella di testo fatta da una sola riga

password come text solo che al posto delle lettere vengono visualizzate degli asterischi.

checkbox caselle di selezione multipla.

radio caselle di selezione esclusiva.

submit crea un pulsante per inviare informazioni ad un programma

Page 10: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

<input type=“”>reset crea un pulsante per riportare i valori della casella ai

dati iniziali

file crea una finestra di controllo sui file in locale.

hidden permette di passare dei parametri non visibili all’utente ai programmi della form

image crea un pulsante di tipo submit con uno sfondo grafico

button crea un pulsante semplice senza comportamenti predefiniti

Page 11: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“text”

<form >

Inserisci il tuo nome:

<input type="text">

<br><br>

<b>Inserisci il tuo nome:

</b>

<input type="text"> <br>

</form>

Page 12: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“password”<form >

Inserisci il tuo nome:

<input type=“password">

<br><br>

<i>Inserisci il tuo nome:

</i>

<input type=“password">

<br>

</form>

Page 13: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“checkbox”<form><input type="checkbox">

Scelta 1<br><input type="checkbox">

Scelta 2<br><input type="checkbox">

Scelta 3<br><input type="checkbox">

Scelta 4<br></form>

Page 14: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“radio”<form>

<input type="radio"> Scelta 1<br>

<input type="radio"> Scelta 2<br>

….

<input type="radio"> Scelta 5<br>

<form>

Page 15: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“submit”

<form>

<input type="submit">

<br>

</form>

Page 16: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“reset”

<form>

<input type="reset">

<br>

</form>

Page 17: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“file”

<form>

<input type="file">

<br>

</form>

Page 18: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: type=“button”

<form>

<input type=”button" >

<br>

</form>

Page 19: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Esempio: <FORM>

<FORM><P> First name: <INPUT type="text"><BR> Last name: <INPUT type="text"><BR> email: <INPUT type="text"><BR><INPUT type="radio"> Male<BR> <INPUT type="radio"> Female<BR> <INPUT type="submit"> <INPUT type="reset"> </P> </FORM>

Page 20: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi al variare di type

maxlengthQuando type ha valore "text" or "password“ questo attributo

specifica quanti caratteri l’utente può inserire.

checkedQuando type ha valore “radio" or “checkbox“ questo

attributo specifica quale voce è selezionata.

srcQuando type ha valore “image“ specifica il percorso

dell’immagine.

Page 21: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi al variare di type

valueSpecifica il valore iniziale del tipo di casella usata.

Generalmente opzionale per type con valore “radio” or

“checkbox” è obbligatorio.

sizePermette di specificare la larghezza della casella. Come

unità di misura vengono utilizzati i pixel tranne nel caso in

cui type ha valore “text” or “password”, allora in questi casi

si usa un numero intero che definisce il numero di caratteri.

Page 22: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributo: checked

<form>

<input type="checkbox"> Scelta 1<br>

<input type="checkbox"> Scelta 2<br>

<input type="checkbox"> Scelta 3<br>

<input type="checkbox"> Scelta 4<br>

</form>

Page 23: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributo: checked

<form>

<input type="checkbox"> Scelta 1<br>

<input type="checkbox" checked> Scelta 2<br>

<input type="checkbox" checked> Scelta 3<br>

<input type="checkbox" checked> Scelta 4<br>

</form>

Page 24: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributo: size<form>

Inserisci il tuo nome:<br>

<input type="text"><br>

Inserisci il tuo Cognome:

<br>

<input type="text“ size="50">

<br><br>

</form>

Page 25: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Tag <Form>

<form attr1=“val1” attrn=“valn” >

Testo, tag di formattazione,

<input></input>

<button></button>

<textarea></textarea><select></select>

</form>

Page 26: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Tag <textarea>Sintassi<textarea attr1= val1, …, attrn=valn>

……. </textarea>

SemanticaTextarea permette di avere una casella di testocomposta da più righe

Nota: - Tag di chiusura- attributi

Page 27: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi <textarea>Attributi

name Attribuisce un nome alla casella in questione.

rows Specifica il numero di linee da rendere visibili.

Se l’utente inserisce del testo che supera il numero di linee visibili, il browser automaticamente userà una barra di scorrimento per rendere visibile tutto il testo.

cols Specifica il numero di colonne da rendere visibili.

Se l’utente inserisce del testo che supera il numero di colonne visibili, il browser automaticamente userà una barra di scorrimento per rendere visibile tutto il testo.

Page 28: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi: rows, cols<form><p><textarea rows="10“ cols="40"> First line of initial text. Second line of initial text. </textarea> </p></form>

Page 29: Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi

Attributi: rows, cols<form><p><textarea rows="5"cols="20">First line of initial text.Second line of initial text.Third line of initial text. </ textarea> </p></form>