HTML5

Elementi fondamentali di una pagina

(Per esigenza di rappresentazione son state sostituite le aprentesi angolari con le tonde!)

(DOCTYPE) dichiarazione che definisce che il documento rispecchia lo standard HTML5
(html) elemento radice (root) di una pagina HTML
(meta) contains meta information about the document
(title) contiene il titolo di un documento
(body) contiene il contenuto visibile di una pagina
(h1) definisce un titolo di livello 1 (intestazione larga)
(p) definisce un paragrafo
(pre) definisce il testo preformattato. Il testo è mostratoin una larghezza prefissata e confont (generalmente Courier), consente che il il contenuto mantenga gli spazi e i ritorni accapo.

Pagina di esempio

<!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ciao Mondo!</title>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
    <script type="text/javascript" src="/resources/js/jquery-1.3.2.min.js"/>
    <script type="text/javascript">
        function Pulsante_onclick()
        {
            var items = document.getElementsByTagName("*");
            for (var i = 0; i < items.length; i++) {
            //    items[i].
            }
        }
    </script>
    <style type="text/css">
    </style>
    <link href="/resources/css/google-jquery-ui.css" type="text/css" rel="stylesheet" />
    <link href="StileDellaPagina.css" rel="stylesheet">
</head>
<body style="background-color: #000000; margin:0; padding: 0;" marginwidth="0" marginheight="0">
    <h1>Ciao Mondo!</h1>
    <p>Questa è la nostra prima pagina HTML!</p>
    Esempio:<br/>
    <div style="width: 100%; text-align: center;">
        Sezione in un DIV
    </div>
    Elenco ordinato
    <ol>
        <li>
            Uno
        </li>
        <li>
            Due
        </li>
        <li>
            Tre
        </li>
    </ol>
    <form enctype="text/plain">
       <input type="button" onclick="Pulsante_onclick()" title="Run test" id="BtnRun" name="BtnRun" value=""/>
        <pre>
           Testo preformattato.     si conservano gli spazi ed i
                                    ritorni accapo
       </pre>
    </form>
</body>
</html>

Elementi del form

Form

[1]
L'elemento <form></form> serve per creare un modulo input per l'inserimento dati. In una stessa pagina non possono esserci Form annidati ma separati tra loro.
Necessita di alcuni attributi per funzionare: action, method ed enctype.

Attributo	Significato
action	L'attributo action è l'azione da compiere nel momento dell'invio, di solito un URL che specifica la locazione del file o dello script al quale vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati debbano essere inviati tramite il client di posta di chi lo compila. Se manca l'attributo action viene assunto per default lo stesso URL in cui si trova il modulo.
method	L'attributo method specifica il metodo per accedere all'URL dichiarato in action, due le possibilità: post o get. Il metodo get viene preferito per quei moduli che non necessitano di elaborazioni esterne. Per tutti gli altri casi si adopera post
enctype	L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.

<form method="get" action="/cgi-bin/Formail.pl" enctype="text/plain" >
<!-- other elements -->
</form>

Input

w3.org
Per una TextBox con più di una riga usare la textarea.
Notare il TAG placeholder che consente di inserire una descrizione del contenuto della TextBox

<form>
  First name:<br/>
  <input type="text" name="firstname" placeholder="Digita qualcosa" /><br/>
 
  <!-- Esempio con LABEL -->  
  <label for="TxtInput1_Id">1 Campo da inputare: </label>
    <input type="text" name="TxtInput1" id="TxtInput1_Id" /><br/>
 
  <!-- Si può anche scrivere come segue -->
  <label for="TxtInput1_Id">1 Campo da inputare:
    <input type="text" name="TxtInput1" id="TxtInput1_Id" />
  </label>
  <br/>
 
  <!-- Campo NASCOSTO -->
  <input type="hidden" name="campoNascosto" />
</form>

Select

<form>
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
</form>

Textarea

E' una TextBox in cui si possono mettere più di una riga di testo:

<textarea name="message" rows="10" cols="30">
Il cobra gioca sul balcone...
</textarea>

Button

<form>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>

datalist

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

Input Type

[2]

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  User password:<br>
  <input type="password" name="psw">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
  <br><br>
  <input type="submit" value="Submit">&nbsp;
  <input type="reset">
</form>

Attributes

[3]

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

Elementi contenitori

label

Testo da associare accanto ad un campo di Input. Con il suo attributo for si lega al rispettivo id dell' Input Type.

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Pre

Consente di conservare la formattazione tra i confini del TAG

        <pre>
           Testo preformattato.     si conservano gli spazi ed i
                                    ritorni accapo
       </pre>

Liste

w3schoolsUnordered "ul" e Ordered list "ol":

Coffee
Tea
Milk

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Uno
Due
Tre

<ol>
   <li>Uno
   </li>
   <li>Due
   </li>
   <li>Tre
   </li>
 </ol>

Eventi

Teoria W3C

Tabella esempi eventi

TAG - Oggetto	Evento	Descrizione / Esempio
<body>	onload	<body onload="return BodyOnLoad();">
row 2, cell 1	row 2, cell 2	row 2, cell 3

Mappa e Link

HTML | XML

CSS | JavaScript | JQuery | Linguaggi di MarkUp

Parole chiave:

Navigation

Help

Tools

WIDGETS

Widgets

Recent changes

Wanted articles

Who is online?

Article tools

HTML:Teoria

From Aino Wiki

Contents