Sintesi della lezione
IL FORM
Il tag <form> viene utilizzato per creare un modulo HTML per l'input dell'utente.
- L'elemento <form> può contenere uno o più dei seguenti elementi del modulo:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<button>
<form action="demo_form.asp" method="get">
<label>Nome</label>
<input type="text" name="nome"><br />
<label>Cognome</label>
<input type="text" name="cognome"><br />
<input type="submit" value="Invia">
</form>
INPUT
Il tag <input>
specifica un campo di input in cui l'utente può inserire i dati.
- Gli elementi
<input>
vengono utilizzati all'interno di un elemento <form>
- La funzione di imput cambia a secondo del valore definito dall'attributo type:
- button,
- checkbox,
- color,
- date,
- datetime,
- datetime-local,
- email,
- file,
- hidden,
- image,
- month,
- number,
- password,
- radio,
- range,
- reset,
- search,
- submit,
- tel,
- text,
- time,
- url,
- week
<form action="demo_form.asp" method="get">
<label>Nome</label>
<input type="text" name="nome"><br />
<label>Cognome</label>
<input type="text" name="cognome"><br />
<input type="submit" value="Invia">
</form>
TEXTAREA
Il tag <textarea> definisce un controllo di input di testo multilinea.
- Un'area di testo può contenere un numero illimitato di caratteri.
- Per default il testo viene reso in un font a larghezza fissa (di solito Courier).
<textarea rows="5" maxlength="500">
Testo contenuto nella casella editabile
</textarea>
BUTTON
Il tag <button>
definisce un pulsante cliccabile.
- Contrariamente che per l'elemento input all'interno di un elemento
<button>
Posso inserire qualsiasi tipo di contenuto.
- Browser diversi utilizzano diversi tipi di default per l'elemento
<button>
<button>
supporta l'attributo type che può assumere i valori: button, submit e reset, gli stessi usati quando l'elemento <input> viene usato come pulsante e con lo stesso significato
<button type="button">Cliccami!</button>
SELECT
L'elemento <select>
viene utilizzato per creare un elenco a discesa.
- I tag
<option>
all'interno dell'elemento <select>
definiscono le opzioni disponibili nella lista. <select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Pagine create durante la lezione
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina Personale di Bruno Migliaretti</title>
</head>
<body>
<h1>Bruno Migliaretti</h1>
<p>Docente del corso.</p>
<p>Pippo e pluto sono amici.</p>
<p><a href="tipografia.html">Il mio esercizio</a> ecc.</p>
<p><a href="https://www.google.com" target="_blank">Cerca su Google</a></p>
<p><a href="interna/">Pagina interna</a></p>
</body>
</html>
tipografia.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tipografia</title>
</head>
<body>
<nav>
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#paragrafi">Paragrafi</a></li>
</ul>
</nav>
<section id="titoli">
<h1>Titolo 1 </h1>
<h2>Titolo 2 </h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</section>
<section id="paragrafi">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam tenetur aliquam asperiores beatae, eos ex enim, nesciunt esse libero quo ullam ab dicta fugit sed. Dicta tempora quas possimus dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id adipisci tempora, perferendis assumenda consectetur, soluta explicabo consequatur magni corrupti minima deserunt enim fugit necessitatibus vero temporibus ipsam repellat voluptatem tenetur.é</p>
</section>
<ul>
<li>Primo elemento</li>
<li>Secondo</li>
<li> Sottolista
<ul>
<li>Sottolista</li>
<li>Sotto sotto</li>
</ul>
</li>
<li>Quarto</li>
</ul>
<ol>
<li>Primo</li>
<li>Secondo</li>
</ol>
<div>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipisicing elit. Accusantium molestiae eius facilis temporibus similique. Incidunt impedit error in cumque. Saepe dicta obcaecati fugiat quasi, quod, provident inventore. Ea, reiciendis, veritatis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Maiores facilis </em>hic maxime vitae magni, nisi repellendus non animi nesciunt, perspiciatis, cupiditate eius! Reprehenderit explicabo, doloremque doloribus rerum, illum quis alias!</div>
<p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates, reiciendis. Voluptatum dolores iure natus sed inventore omnis placeat autem eligendi eveniet, fugit, amet, tempore blanditiis assumenda esse quo quos!</p>
<p>code: <code>Questo è codice</code><br>
sample: <samp>Questo e un test</samp><br>
var: <var>Variabile</var><br>
keyboard:<kbd>Comninazione di tasti</kbd> </p>
<p>© 2018 Ifts Tectnici Multimediali per Cultura e per l'Arte</p>
<h1>Form</h1>
<form>
<label>Nome</label>
<input type="text" value="" placeholder="Inserisci il tuo nome" maxlength="10" required><br>
<label>Password</label>
<input type="password" maxlength="6"><br>
<label for="sesso">Seleziona</label><input type="checkbox" value="maschio" id="sesso"><br>
<label for="maschio">Maschio</label>
<input type="radio" id="maschio" name="scelta
sesso">
<label for="femmina">Femmina</label>
<input id="femmina" type="radio" name="sceltasesso">
</form>
</body>
</html>
/interna/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina interna</title>
</head>
<body>
<h1>Pagina interna</h1>
<p><a href="../tipografia.html">Tipografia</a></p>
</body>
</html>