Guida pratica ai form html5
4.1 (119 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,780 students enrolled

Guida pratica ai form html5

Creare e formattare form html5 da zero
4.1 (119 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,780 students enrolled
Created by Hidran Arias
Last updated 11/2018
Italian
Price: Free
This course includes
  • 2.5 hours on-demand video
  • 1 article
  • 11 downloadable resources
  • 7 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Creare form html5 standard
  • Usare tutti gli elementi che formano parte di un form html5

  • Usare gli attributi degli elementi come required, placeholder, disabled

  • Usare i nuovi tag html5 correttamente
  • Esempi di come processare i dati del form lato server
Course content
Expand all 24 lectures 02:25:38
+ Introduzione ai form html
5 lectures 27:19

Vediamo come aggiungere un form a una pagina web per raccogliere dati dall'utente.

Cominciamo a studiare gli elementi del form html più semplice come il tag <input> <label> e il pulsante <submit>

Form html. Introduzione: elemento input, label e submit
05:28
Vediamo come creare la struttura base di un form html
Creare un form html
1 question

Studiamo l'attributo method del form html. Con il metodo GET i dati sono inviati in chiaro via URL al server mentre che con il metodo POST i dati non si vedono nella URL ma nel corpo della richieta http di tipo POST al server

Form html. Metodo GET e POST per inviare dati al server
04:57
Form html. Introduzione: elemento input, label e submit
03:39

Vediamo come aggiungere il tag <button> per inviare i dati di un form, oppure usare l'input di tipo submit.

Con INPUT di type reset possiamo reimpostare i dati del form

Come inviare i dati del form: submit, reset e button
03:39
Vediamo come aggiungere un pulsante per inviare e reimpostare i dati di un form
Aggiungere un pulsante submit, button e reset
1 question

Con il tag <fieldset> Possiamo raggruppare campi del form che siano simili. L'elemento <legend> ci serve per aggiungere una descrizione al fieldset

Fieldset e Legend
09:36
+ Il tag input e i suoi attributi
4 lectures 25:53

In questa lezione studieremo gli attributi principali del tag input: name, id, class, disabled, type, placeholder

Tag input e suoi attributi
08:01
Rivediamo gli attributi più importanti dell'input di tipo text
Aggiungere attributi al tag input di tipo text
1 question

Con il tag input di html di tipo hidden, possiamo passare dati nascosti al server. Dati che l'utente non immette direttamente ma che possono essere importanti come un token di sicurezza oppure l'id del record che si sta modificando.

<input type="hidden" name="token" value="zxcxx$£$£$£$£"$£$££dDFDFDf">

Input di tipo password è come quello di tipo text ma i caratteri scritti sono mascherati con degli asterischi

<input type="password" name="passwd">

Input di tipo password e hidden
07:17

Input di tipo radio ci permette di fare una scelta tra vari valori. Dobbiamo dare lo stesso nome ai diversi input di tipo radio in modo che siano auto esclubile:

<input type="radio" value="M" name="sex">

<input type="radio" value="F" name="sex">


Input di tipo radio
04:52
Vediamo come aggiungere due elementi di tipo radio autoescludenti
Aggiungere due elementi input di tipo radio
1 question

Input ti tipo checkbox ci permette selezionare più di un valore di una certa categoria:

<label>Linguaggi programmazione conosciuti</label>

<input type="checkbox" name="programs[]" value="PHP">

<input type="checkbox" name="programs[]" value="JSP">

<input type="checkbox" name="programs[]" value="JAVA">

<input type="checkbox" name="programs[]" value="PYTHON">

Input di tipo checkbox
05:43
Aggiungere tre caselle di selezione: checkbox
Aggiungere tre caselle di selezione: checkbox
1 question
+ Combo singole e multiple select
3 lectures 11:47

In questa lezione studieremo il tag select. Vedremo come aggiungere gli option, l'attributo value

Studieremo come formattare le combo usando i fogli di stile

Il tag select
05:19
Vediamo come usare il tag di tipo select
Aggiungere una combo
1 question

Se aggiungiamo l'attributo multiple a una lista potremo selezionare più di un elemento:

<select name="programs[]" multiple>

<option value="php">PHP</option>

<option value="jsp">JSP</option>

<option value="java">JAVA</option>

<option value="C++">C++</option>

</select>

Tag select con opzioni multiple
03:56

In questa lezione vedremo come raggruppare le opzioni di una combo select usando il tag <optgroup>

Combo: Il tag <optgroup>
02:32
+ Textarea
1 lecture 08:39

Con l'elemento <textarea> diamo la possibilità di aggiungere più testo in varie righe:

Con l'attributo cols indichiamo il numero di colonne e con l'attributo rows il numero di righe

<textarea cols="60" rows="12"></textarea>

Textarea
08:39
Vediamo come usare il tag textarea
Aggiungere un'area di Testo a un form
1 question
+ I nuovi elementi html5
4 lectures 30:04

Con l'elemento <datalist> possiamo indicare o suggerire i valori che un campo input può avere.

Dobbiamo aggiungere l'attributo list al tag input indicando l'ID del datalist cui fa riferimento

<input type="text" name="states" list="stateList">

<datalist id="stateList">

<option value="FL" label="FLORIDA">

<option value="NY" label="New York">

</datalist>

Elemento datalist e attributo list
07:04

Vediamo come suggerire, soprattutto per i tablet e telefonini, alla tastiera il tipo di tastiera da mostrare a seconda l'attributo type dell'elemento input:

<input type="url">

<input type="tel">

<input type="number" min="1" max="69">

<input type="range" name="age" min="18" max="120">

Input di tipo email, tel, url, range e number
11:45

Vediamo come possiamo aggiungere un calendario come tipo input usando l'attributo date. Vedremo anche che possiamo utilizzare l'attributo dell'elemento input datetime e datetime-local, time, week, month, per indicare diversi tipi di valore di tempo

Elementi di tipo data e tempo
05:42

Vediamo come aggiungere un color picker usando l'attributo color. Selezionando un colore il campo input si popola con il valore esadecimale del colore selezionato

Elemento di tipo color
05:33
+ Bonus Lectures: Lezioni bonus
3 lectures 23:57

Stdiamo il formato JSON: JavaScript Object Notation

Il formato JSON
06:42

Vediamo come inviare dati in formato JSON ad uno script php

Inviare dati al server via AJAX
13:20
Ricevere JSON con AJAX dal server e parsificarlo con oggetto JSON
03:55
+ Bonus Lecture . Altre lezioni e sconti ai miei corsi
3 lectures 12:14

Vedremo come installare NODEJS per processare i form html

Installare NODEJS
04:24

Vedremo come installare il web server xamp con php e mysql

Installare xamp
07:10
Bonus Lecture . Altre lezioni e sconti ai miei corsi
00:40
Requirements
  • Breve esperienza di html
  • Computer
  • browser
  • Editor di testo
Description

In questo corso imparerete a creare un form html5 da zero.

Imparerete ad usare i diversi elementi che formano parte di un form come i campi

di tipo INPUT, SELECT,TEXTAREA, come formattarli con i fogli di stile. Vedremo come usare correttamente i loro attributi come REQUIRED, DISABLED, PLACEHOLDER.

Imparerete ad usare i nuovi elementi html5 come gli input di tipo range, color, date, url, email, phone.

Imparerete a raggruppare i campi di un form con i FIELDSET.

Imparete ad inviare i dati ad un server Apache o NodeJ usando sia il metodo POST che il metodo GET.

Le lezioni avranno degli esercizi pratici in modo da non dimenticare quello che avete imparato

Who this course is for:
  • Chi conossce un po' di html ma non ha mai aggiunto form html
  • Chi non conosce i nuovi tag html5
  • Web Developers
  • Web Designers