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
|
---
title: Веб-форми
slug: Learn/HTML/Forms
translation_of: Learn/Forms
---
<div>{{LearnSidebar}}</div>
<p class="summary">Цей модуль містить низку статей, що допоможуть Вам освоїти форми в HTML. HTML форми дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал. В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.</p>
<h2 id="Передумови">Передумови</h2>
<p>Перед початком цього модуля Вам необхідно щонайменше пройти <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>
<div class="note">
<p><strong>Нотатка</strong>: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Основні_інструкції">Основні інструкції</h2>
<p>В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.</p>
<p><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша перша HTML форма</a></p>
<p>Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS і відправлення даних на сервер.</p>
<p><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Як структурувати HTML форму</a></p>
<p>Спираючись на основи, тепер ми більш детально поглянемо на елементи, які використовуються для забезпечення структури і значення різних частин форми.</p>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Рідні віджети форми</a></dt>
<dt></dt>
<dt>Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.</dt>
<dd></dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Надсилання даних форми</a></dt>
<dd>В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? <span id="result_box" lang="uk"><span>Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.</span></span></dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Підтвердження даних форми</a></dt>
<dd>Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.</dd>
</dl>
<h2 id="Розширені_інструкції">Розширені інструкції</h2>
<p>Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.</p>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Як створювати користувацькі віджети форм</a></dt>
<dd>Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Надсилання форми використовуючи 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>
<dt><a href="/en-US/docs/Learn/HTML/Forms/HTML5_updates">HTML5 form updates</a></dt>
<dd>This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.</dd>
</dl>
<h2 id="Form_styling_guides">Form styling guides</h2>
<p>These guides to styling forms with CSS really belong in the <a href="/en-US/docs/Learn/CSS">CSS</a> Learning Area topic, but we are keeping them here for now until we find the time to move them.</p>
<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/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="Assessments">Assessments</h2>
<p>TBD</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
</ul>
|
