Lezione 4 (IFTS 2018)

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>

Elenco completo dei tag e digli attributi HTML

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 &nbsp;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.&eacute;</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>&copy; 2018 Ifts Tectnici Multimediali per Cultura&nbsp;e&nbsp;per&nbsp;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>

 

Torna all'inizio