Guida pratica ai form html5

Creare e formattare form html5 da zero
4.8 (7 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.
392 students enrolled
Free
Start Learning Now
  • Lectures 24
  • Exercises 7 coding exercises
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages Italian
  • Includes Coding Exercises New!
    Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 Italian

Course 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

What are the requirements?

  • Breve esperienza di html
  • Computer
  • browser
  • Editor di testo

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Inizia qui
Introduzione
05:54
Section 2: Introduzione ai form html
05:28

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>

1 question
Vediamo come creare la struttura base di un form html
04:57

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. Introduzione: elemento input, label e submit
03:39
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

1 question
Vediamo come aggiungere un pulsante per inviare e reimpostare i dati di un form
09:36

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

Section 3: Il tag input e i suoi attributi
08:01

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

1 question
Rivediamo gli attributi più importanti dell'input di tipo text
07:17

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">

04:52

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">


1 question
Vediamo come aggiungere due elementi di tipo radio autoescludenti
05:43

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">

1 question
Aggiungere tre caselle di selezione: checkbox
Section 4: Combo singole e multiple select
05:19

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

1 question
Vediamo come usare il tag di tipo select
03:56

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>

02:32

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

Section 5: Textarea
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>

1 question
Vediamo come usare il tag textarea
Section 6: I nuovi elementi html5
07: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>

11:45

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">

05:42

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

05:33

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

Section 7: Bonus Lectures: Lezioni bonus
06:42

Stdiamo il formato JSON: JavaScript Object Notation

13:20

Vediamo come inviare dati in formato JSON ad uno script php

Ricevere JSON con AJAX dal server e parsificarlo con oggetto JSON
03:55
Section 8: Bonus Lecture . Altre lezioni e sconti ai miei corsi
04:24

Vedremo come installare NODEJS per processare i form html

07:10

Vedremo come installare il web server xamp con php e mysql

Bonus Lecture . Altre lezioni e sconti ai miei corsi
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hidran Arias, 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 .

Ready to start learning?
Start Learning Now