Guida pratica ai form html5
4.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,117 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Guida pratica ai form html5 to your Wishlist.

Add to Wishlist

Guida pratica ai form html5

Creare e formattare form html5 da zero
4.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,117 students enrolled
Created by Hidran Arias
Last updated 5/2017
Italian
Price: Free
Includes:
  • 2.5 hours on-demand video
  • 1 Article
  • 11 Supplemental Resources
  • 7 Coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Chi conossce un po' di html ma non ha mai aggiunto form html
  • Chi non conosce i nuovi tag html5
  • Web Developers
  • Web Designers
Compare to Other Web Development Courses
Curriculum For This Course
24 Lectures
02:26:01
+
Inizia qui
1 Lecture 05:54
Introduzione
05:54
+
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:41

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
01:07
About the Instructor
Hidran Arias
4.4 Average rating
1,380 Reviews
9,435 Students
16 Courses
Software Engineer

I'm a cuban living in the beautiful city of Turin, Italy. I have a university degree in computer sciences in the field of automation engineering. I am a software engineer since 2002 and since then I have worked for different italian companies developing web applications with the latest technogies, most of them open sources, such as PHP, MYSQL, ORACLE, CSS, HTML, NODEJS, MONGODB and javascript libraries such as EXTJS, SENCHATOUCH, JQUERY, ANGULARJS.

When I am not programming, I am learning new languages,currently German and Arabic. Currently I speak SPANISH, my mother tongue, ITALIAN,almost my second mother tongue, ENGLISH, FRENCH and PORTUGUESE.

Playing GUITAR is one of my hobbies and passions and I dedicate it as much time as for languages and computer.

People say I am an easy talker, always ready to help people and I love teaching what I know and mainly new technologies. I try to keep always up to date not only by teaching but also by learning and taking courses such as the ones found here in UDEMY .