1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: HTML forms
slug: Learn/HTML/Forms
tags:
- Beginner
- Featured
- Forms
- Guide
- HTML
- Landing
- Learn
- NeedsTranslation
- TopicStub
- Web
translation_of: Learn/Forms
---
<div>{{LearnSidebar}}</div>
<p class="summary">Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.</p>
<h2 id="Prerequisiti">Prerequisiti</h2>
<p>Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">introduzione all'HTML</a> A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Native form controls</a>.</p>
<p>Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.</p>
<p>Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.</p>
<div class="note">
<p><strong>Nota bene</strong>: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a></p>
</div>
<h2 id="Guida_introduttiva">Guida introduttiva</h2>
<dl>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Il tuo primo form HTML</a></dt>
<dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
<dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
</dl>
<h2 id="What_form_widgets_are_available">What form widgets are available?</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt>
<dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd>
</dl>
<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
<dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt>
<dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
</dl>
<h2 id="Advanced_guides">Advanced guides</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt>
<dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt>
<dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
<dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
</dl>
<h2 id="Form_styling_guides">Form styling guides</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
<dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
<dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
<dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
</dl>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
<li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li>
</ul>
|
