{"id":2612,"date":"2026-07-17T18:04:18","date_gmt":"2026-07-17T15:04:18","guid":{"rendered":"https:\/\/school.edu-sigma.ru\/blog\/?p=2612"},"modified":"2026-07-17T18:04:18","modified_gmt":"2026-07-17T15:04:18","slug":"formy-html","status":"publish","type":"post","link":"https:\/\/school.edu-sigma.ru\/blog\/formy-html\/","title":{"rendered":"\u0424\u043e\u0440\u043c\u044b HTML: \u0442\u0435\u0433
, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430"},"content":{"rendered":"

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c HTML, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 CSS, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430. \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c placeholder \u2014 \u043e\u0431 \u044d\u0442\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b.<\/p>\n

\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML-\u0444\u043e\u0440\u043c\u0430 \u0438 \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0442\u0435\u0433 <form><\/h2>\n

\u0422\u0435\u0433 <form> \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0432\u043e\u0434\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0430\u043c \u0442\u0435\u0433 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u044d\u0442\u043e \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0443\u0434\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435.<\/p>\n

\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f HTML-\u0444\u043e\u0440\u043c\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n

<form action=»\/submit.php» method=»post»><\/p>\n

<input type=»text» name=»username» placeholder=»\u0412\u0430\u0448\u0435 \u0438\u043c\u044f»><\/p>\n

<button type=»submit»>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/button><\/p>\n

<\/form><\/p>\n

\u0414\u0430\u0436\u0435 \u0442\u0430\u043a\u0430\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430: \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e \u043f\u0443\u0442\u0438 \/submit.php.<\/p>\n

\u0425\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043d\u0443\u043b\u044f \u2014 \u0432\u043a\u043b\u044e\u0447\u0430\u044f HTML-\u0444\u043e\u0440\u043c\u044b, JavaScript \u0438 Flask? \u041d\u0430 \u043a\u0443\u0440\u0441\u0435 \u00ab\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0423\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u00bb \u0448\u043a\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b: TO-DO List \u043d\u0430 HTML\/CSS\/JS, \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0444\u043e\u0440\u043c \u043d\u0430 Flask \u0438 Telegram-\u0431\u043e\u0442\u0430 \u043d\u0430 Python. \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0435 \u2014 36 \u0447\u0430\u0441\u043e\u0432 \u043e\u043d\u043b\u0430\u0439\u043d, \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u043e \u0448\u043a\u043e\u043b\u043e\u0439. \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0443\u0440\u0441\u0430<\/a>.<\/p>\n

\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <form> \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b action, method, enctype<\/h3>\n

\u0422\u0435\u0433 <form> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u043c\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
\u0410\u0442\u0440\u0438\u0431\u0443\u0442
\n<\/strong><\/th>\n		\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435
\n<\/strong><\/th>\n		\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e
\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n
action<\/td>\nURL \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/td>\n<\/tr>\n
method<\/td>\nHTTP-\u043c\u0435\u0442\u043e\u0434: GET \u0438\u043b\u0438 POST<\/td>\nGET<\/td>\n<\/tr>\n
enctype<\/td>\n\u0424\u043e\u0440\u043c\u0430\u0442 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\napplication\/x-www-form-urlencoded<\/td>\n<\/tr>\n
autocomplete<\/td>\n\u0410\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c<\/td>\non<\/td>\n<\/tr>\n
novalidate<\/td>\n\u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 HTML5-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e<\/td>\n\u2014<\/td>\n<\/tr>\n
target<\/td>\n\u041a\u0443\u0434\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u0442\u0432\u0435\u0442 (_self, _blank)<\/td>\n_self<\/td>\n<\/tr>\n
name<\/td>\n\u0418\u043c\u044f \u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f JavaScript<\/td>\n\u2014<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0442\u0435\u0433\u0430 <\/em><form><\/em>. \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f HTML5, W3C.<\/em><\/p>\n

enctype \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 multipart\/form-data \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u2014 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f application\/x-www-form-urlencoded, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n

novalidate \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e HTML5-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c JavaScript \u2014 \u043d\u0443\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c.<\/p>\n

\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b \u0441 \u044f\u0432\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438:<\/p>\n

<form action=»\/register.php» method=»post»<\/p>\n

enctype=»multipart\/form-data»<\/p>\n

autocomplete=»on» novalidate><\/p>\n

<!— \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b —><\/p>\n

<\/form><\/p>\n

GET \u0438 POST \u2014 \u043a\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0431\u0440\u0430\u0442\u044c<\/h3>\n

\u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b. GET \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a URL, POST \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0432 \u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440
\n<\/strong><\/th>\n		GET
\n<\/strong><\/th>\n		POST
\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n
\u0412\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n\u0412 URL: ?name=value<\/td>\n\u0412 \u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/td>\n<\/tr>\n
\u041b\u0438\u043c\u0438\u0442 \u043e\u0431\u044a\u0451\u043c\u0430<\/td>\n~2 000 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432<\/td>\n\u0411\u0435\u0437 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439<\/td>\n<\/tr>\n
\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n\u0414\u0430<\/td>\n\u041d\u0435\u0442<\/td>\n<\/tr>\n
\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c<\/td>\n\u041d\u0438\u0437\u043a\u0430\u044f (\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 URL)<\/td>\n\u0412\u044b\u0448\u0435<\/td>\n<\/tr>\n
\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432<\/td>\n\u041d\u0435\u0442<\/td>\n\u0414\u0430<\/td>\n<\/tr>\n
\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b<\/td>\n\u041f\u043e\u0438\u0441\u043a, \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f<\/td>\n\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f, \u0437\u0430\u043a\u0430\u0437\u044b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

GET: \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u043d\u044b \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043b\u043e\u0433\u0430\u0445. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GET \u0434\u043b\u044f \u043f\u0430\u0440\u043e\u043b\u0435\u0439 \u2014 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: \u043f\u0430\u0440\u043e\u043b\u044c \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432 URL.<\/p>\n

POST: \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0444\u0430\u0439\u043b\u044b. \u0414\u043b\u044f \u043f\u0430\u0440\u043e\u043b\u0435\u0439, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u2014 POST \u043f\u043b\u044e\u0441 HTTPS \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b.<\/p>\n

\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 action=»mailto:» \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u2014 \u043d\u0435\u043d\u0430\u0434\u0451\u0436\u043d\u043e \u0438 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e. \u0414\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043f\u0438\u0441\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443: PHP mail() \u0438\u043b\u0438 SMTP-\u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n

\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML-\u0444\u043e\u0440\u043c\u044b: \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <form><\/h2>\n

\u0412\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 <form> \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442 \u0432\u043e\u0441\u0435\u043c\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: <input> (\u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430), <textarea> (\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442), <select> (\u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a), <button> (\u043a\u043d\u043e\u043f\u043a\u0438), <label> (\u043f\u043e\u0434\u043f\u0438\u0441\u0438), <fieldset> (\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430), <legend> (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0433\u0440\u0443\u043f\u043f\u044b) \u0438 <datalist> (\u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a). \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 name \u2014 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0432 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435.<\/p>\n

\u0422\u0435\u0433 <input>: 20 \u0442\u0438\u043f\u043e\u0432 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430<\/h3>\n

<input> \u2014 \u0441\u0430\u043c\u043e\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0438 \u0441\u0430\u043c\u044b\u0439 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c HTML. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 type \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0438 \u0442\u0438\u043f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u0422\u0438\u043f
\n<\/strong><\/th>\n		\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435
\n<\/strong><\/th>\n		\u0421\u043f\u0435\u0446\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b
\n<\/strong><\/th>\n		\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430
\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n
text<\/td>\n\u041e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442<\/td>\nmaxlength, pattern<\/td>\n\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f<\/td>\n<\/tr>\n
email<\/td>\n\u0410\u0434\u0440\u0435\u0441 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b<\/td>\nmultiple<\/td>\n\u0421 @ \u0438 .com<\/td>\n<\/tr>\n
password<\/td>\n\u041f\u0430\u0440\u043e\u043b\u044c (\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u044b)<\/td>\nminlength<\/td>\n\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f<\/td>\n<\/tr>\n
number<\/td>\n\u0427\u0438\u0441\u043b\u043e<\/td>\nmin, max, step<\/td>\n\u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f<\/td>\n<\/tr>\n
tel<\/td>\n\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430<\/td>\npattern<\/td>\n\u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u0441 +<\/td>\n<\/tr>\n
url<\/td>\n\u0410\u0434\u0440\u0435\u0441 \u0441\u0430\u0439\u0442\u0430<\/td>\npattern<\/td>\n\u0421 \/ \u0438 .com<\/td>\n<\/tr>\n
search<\/td>\n\u0421\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430<\/td>\n\u2014<\/td>\n\u0421 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043f\u043e\u0438\u0441\u043a\u0430<\/td>\n<\/tr>\n
date<\/td>\n\u0414\u0430\u0442\u0430<\/td>\nmin, max<\/td>\n\u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c<\/td>\n<\/tr>\n
time<\/td>\n\u0412\u0440\u0435\u043c\u044f<\/td>\nmin, max, step<\/td>\n\u041a\u043e\u043b\u0451\u0441\u0438\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/td>\n<\/tr>\n
datetime-local<\/td>\n\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435<\/td>\nmin, max<\/td>\n\u0414\u0430\u0442\u0430 + \u0432\u0440\u0435\u043c\u044f<\/td>\n<\/tr>\n
checkbox<\/td>\n\u0424\u043b\u0430\u0436\u043e\u043a (\u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e)<\/td>\nchecked<\/td>\n\u2014<\/td>\n<\/tr>\n
radio<\/td>\n\u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0430 (\u043e\u0434\u0438\u043d \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b)<\/td>\nchecked<\/td>\n\u2014<\/td>\n<\/tr>\n
range<\/td>\n\u041f\u043e\u043b\u0437\u0443\u043d\u043e\u043a<\/td>\nmin, max, step<\/td>\n\u2014<\/td>\n<\/tr>\n
color<\/td>\n\u041f\u0430\u043b\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u0430<\/td>\n\u2014<\/td>\n\u2014<\/td>\n<\/tr>\n
file<\/td>\n\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u0430<\/td>\naccept, multiple<\/td>\n\u2014<\/td>\n<\/tr>\n
hidden<\/td>\n\u0421\u043a\u0440\u044b\u0442\u043e\u0435 \u043f\u043e\u043b\u0435<\/td>\n\u2014<\/td>\n\u2014<\/td>\n<\/tr>\n
submit<\/td>\n\u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b<\/td>\nvalue<\/td>\n\u2014<\/td>\n<\/tr>\n
reset<\/td>\n\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439<\/td>\nvalue<\/td>\n\u2014<\/td>\n<\/tr>\n
image<\/td>\n\u041a\u043d\u043e\u043f\u043a\u0430-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/td>\nsrc, alt, width<\/td>\n\u2014<\/td>\n<\/tr>\n
button<\/td>\n\u041a\u043d\u043e\u043f\u043a\u0430 \u0431\u0435\u0437 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/td>\n\u2014<\/td>\n\u2014<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 name \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 checked \u0437\u0430\u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0434\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.<\/p>\n

<input type=»hidden»> \u043d\u0435\u0432\u0438\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u043d\u043e \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f CSRF-\u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443 <input> \u043d\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 name \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e.<\/p>\n

\u0422\u0435\u0433\u0438 <textarea>, <select>, <datalist> \u0438 <button><\/h3>\n

<textarea><\/strong> \u2014 \u043f\u0430\u0440\u043d\u044b\u0439 \u0442\u0435\u0433 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 rows \u0437\u0430\u0434\u0430\u0451\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a), cols \u2014 \u0448\u0438\u0440\u0438\u043d\u0443. maxlength \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u0443, wrap \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430\u043c\u0438. \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u0433\u0430\u043c\u0438, \u0430 \u043d\u0435 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 value. \u0420\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u044b\u0448\u044c\u044e \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u044d\u0442\u0438\u043c \u0447\u0435\u0440\u0435\u0437 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e resize.<\/p>\n

<select><\/strong> \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 multiple \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 (\u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 [] \u043a \u0438\u043c\u0435\u043d\u0438: name=»skills[]»). <optgroup> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043e\u043f\u0446\u0438\u0438 \u0432 \u0433\u0440\u0443\u043f\u043f\u044b \u0441 \u043e\u0431\u0449\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 selected \u043d\u0430 <option> \u0437\u0430\u0434\u0430\u0451\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n

<datalist><\/strong> \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 <select>: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0442\u0435\u043a\u0441\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e, \u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438. \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043b\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 list:<\/p>\n

<input list=»langs» name=»language» placeholder=»\u042f\u0437\u044b\u043a»><\/p>\n

<datalist id=»langs»><\/p>\n

<option value=»Python»><\/p>\n

<option value=»JavaScript»><\/p>\n

<option value=»HTML»><\/p>\n

<\/datalist><\/p>\n

<button><\/strong> \u0438\u043c\u0435\u0435\u0442 \u0442\u0440\u0438 \u0442\u0438\u043f\u0430: submit \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043e\u0440\u043c\u0443 (\u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), reset \u2014 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u043e\u043b\u044f, button \u2014 \u0431\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/p>\n

\u0422\u0435\u0433\u0438 <label>, <fieldset> \u0438 <legend><\/h3>\n

\"\u0421\u0445\u0435\u043c\u0430<\/p>\n

<label><\/strong> \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0441 \u043f\u043e\u043b\u0435\u043c \u0432\u0432\u043e\u0434\u0430. \u0414\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438:<\/p>\n

    \n
  • \u042f\u0432\u043d\u0430\u044f<\/strong> (\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f): \u0430\u0442\u0440\u0438\u0431\u0443\u0442 for \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 id \u043f\u043e\u043b\u044f<\/li>\n
  • \u041d\u0435\u044f\u0432\u043d\u0430\u044f<\/strong>: \u043f\u043e\u043b\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u044c <label><\/li>\n<\/ul>\n

    \u042f\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u2014 \u043d\u0430\u0434\u0451\u0436\u043d\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438 (AT). UX-\u044d\u0444\u0444\u0435\u043a\u0442: \u043a\u043b\u0438\u043a \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 label \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0444\u043e\u043a\u0443\u0441 \u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043e\u043f\u044b\u0442 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n

    <!— \u042f\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 —><\/p>\n

    <label for=»email»>Email<\/label><\/p>\n

    <input type=»email» id=»email» name=»email»><\/p>\n

    <!— \u041d\u0435\u044f\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 —><\/p>\n

    <label>Email <input type=»email» name=»email»><\/label><\/p>\n

    <fieldset><\/strong> \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0439 \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0445 \u0440\u0430\u043c\u043a\u043e\u0439. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 disabled \u043d\u0430 <fieldset> \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u2014 \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c.<\/p>\n

    <legend><\/strong> \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0433\u0440\u0443\u043f\u043f\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <fieldset>. \u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u044b, \u0434\u0430\u0432\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u041d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f <legend> \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u0441\u043b\u043e\u0436\u043d\u0430 \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0441\u043a\u0440\u044b\u0442\u044c legend \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441 visually-hidden \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0447\u0435\u0440\u0435\u0437 <h3> \u0440\u044f\u0434\u043e\u043c.<\/p>\n

    \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u043b\u0435\u0439: placeholder, required, pattern \u0438 \u0434\u0440\u0443\u0433\u0438\u0435<\/h2>\n

    \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 HTML-\u0444\u043e\u0440\u043c\u044b \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <\/strong>placeholder<\/strong>.<\/strong> \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: <input placeholder=»\u0412\u0432\u0435\u0434\u0438\u0442\u0435 email»>. \u0422\u0435\u043a\u0441\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0432\u043e\u0434\u0430 \u0438 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c. \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u0440\u0435\u0437 CSS: ::placeholder { color: #aaa; }. \u0412\u0430\u0436\u043d\u043e: placeholder \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 <label> \u2014 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442, \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u0447\u0438\u0442\u0430\u044e\u0442 \u0435\u0433\u043e \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n

    \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u043b\u0435\u0439:<\/p>\n

    required<\/strong> \u2014 \u043f\u043e\u043b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043a \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e; \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n

    pattern<\/strong> \u2014 RegEx (\u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435) \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 title \u0437\u0430\u0434\u0430\u0451\u0442 \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043f\u0440\u0438 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438:<\/p>\n

    <input type=»text» name=»phone»<\/p>\n

    pattern=»[0-9]{10}» title=»\u0412\u0432\u0435\u0434\u0438\u0442\u0435 10 \u0446\u0438\u0444\u0440»><\/p>\n

    min<\/strong> \/ <\/strong>max<\/strong> \u2014 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 number, date, time, range.<\/p>\n

    minlength<\/strong> \/ <\/strong>maxlength<\/strong> \u2014 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n

    autocomplete<\/strong> \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c; \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: on, off \u0438\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 (email, username, current-password).<\/p>\n

    autofocus<\/strong> \u2014 \u043f\u043e\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443.<\/p>\n

    disabled<\/strong> \u2014 \u043f\u043e\u043b\u0435 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e, \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f. readonly<\/strong> \u2014 \u043f\u043e\u043b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 disabled.<\/p>\n

    \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f HTML-\u0444\u043e\u0440\u043c: \u0442\u0440\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n

    \u041d\u0430\u0434\u0451\u0436\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432 \u0442\u0440\u0438 \u0441\u043b\u043e\u044f: HTML5 (\u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0435\u0437 JavaScript), JavaScript (\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f) \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 (\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c). \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u043d\u0443\u0436\u043d\u044b \u0432\u0441\u0435 \u0442\u0440\u0438.<\/p>\n

    \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f HTML5-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f: required, pattern, min\/max<\/h3>\n

    \u041d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 JavaScript. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u043e\u043b\u044f \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u044f\u0437\u044b\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n

    \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438:<\/p>\n

      \n
    • required \u2014 \u043f\u043e\u043b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c<\/li>\n
    • type=»email» \u0438 type=»url» \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/li>\n
    • type=»number» + min\/max \u2014 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/li>\n
    • pattern \u2014 RegEx-\u0448\u0430\u0431\u043b\u043e\u043d; title \u2014 \u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438<\/li>\n
    • minlength \/ maxlength \u2014 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438<\/li>\n<\/ul>\n

      novalidate \u043d\u0430 \u0442\u0435\u0433\u0435 <form> \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 UI \u043e\u0448\u0438\u0431\u043e\u043a \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/p>\n

      \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435: HTML5-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043e\u0431\u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u2014 \u0447\u0435\u0440\u0435\u0437 DevTools, Postman \u0438\u043b\u0438 \u043f\u0440\u044f\u043c\u043e\u0439 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435.<\/p>\n

      JavaScript-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438 Constraint Validation API<\/h3>\n

      JavaScript \u0434\u0430\u0451\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430\u043c\u0438 \u043e\u0448\u0438\u0431\u043e\u043a. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c novalidate \u043d\u0430 \u0444\u043e\u0440\u043c\u0443, \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 submit \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u043e\u043b\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e:<\/p>\n

      form.addEventListener(‘submit’, e => {<\/p>\n

      e.preventDefault();<\/p>\n

      if (!form.checkValidity()) {<\/p>\n

      \/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/p>\n

      }<\/p>\n

      });<\/p>\n

      Constraint Validation API (\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438) \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442:<\/p>\n

        \n
      • input.validity.valid \u2014 true, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438<\/li>\n
      • form.checkValidity() \u2014 true, \u0435\u0441\u043b\u0438 \u0432\u0441\u044f \u0444\u043e\u0440\u043c\u0430 \u0432\u0430\u043b\u0438\u0434\u043d\u0430<\/li>\n
      • input.setCustomValidity(‘\u0442\u0435\u043a\u0441\u0442’) \u2014 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430; \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0451<\/li>\n<\/ul>\n

        \u041e\u0431\u044a\u0435\u043a\u0442 validity \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u043b\u0430\u0433\u0438: valueMissing, patternMismatch, rangeOverflow, tooLong \u2014 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f. \u041f\u0440\u0438 \u043f\u043e\u043a\u0430\u0437\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a \u043f\u043e\u043b\u044e aria-invalid=»true» \u0438 aria-describedby \u2014 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n

        \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f: \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e<\/h3>\n

        \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043e\u0431\u0445\u043e\u0434\u044f\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e: \u0447\u0435\u0440\u0435\u0437 DevTools, Postman \u0438\u043b\u0438 curl. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0431\u044f\u0437\u0430\u043d \u043f\u0435\u0440\u0435\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0441\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u2014 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u00abNever trust user input\u00bb (\u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u0432\u0435\u0440\u044f\u0439 \u0432\u0432\u043e\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f).<\/p>\n

        PHP:<\/p>\n

        $email = filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL);<\/p>\n

        $name = htmlspecialchars(strip_tags($_POST[‘name’]));<\/p>\n

        Python:<\/p>\n

        import html<\/p>\n

        name = html.escape(request.form.get(‘name’, »))<\/p>\n

        \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435: \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f = \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c; \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f = \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043d\u0443\u0436\u043d\u044b \u043e\u0431\u0430.<\/p>\n

        \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c HTML-\u0444\u043e\u0440\u043c: label, fieldset \u0438 ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h2>\n

        \"HTML-\u0444\u043e\u0440\u043c\u0430<\/p>\n

        \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0444\u043e\u0440\u043c \u043d\u0443\u0436\u043d\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 (JAWS, NVDA, VoiceOver) \u2014 \u043e\u043d\u0430 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043e\u043f\u044b\u0442 \u0432\u0441\u0435\u0445, \u043a\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u0438\u043b\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c.<\/p>\n

        \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438:<\/strong><\/p>\n

        <label> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 for\/id \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0438\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0432\u0432\u043e\u0434\u0438\u0442\u044c.<\/p>\n

        <fieldset> + <legend> \u2014 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 (AT) \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u044e\u0442 \u0442\u0435\u043a\u0441\u0442 legend \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u044b, \u0434\u0430\u0432\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u00ab\u041b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435: \u0418\u043c\u044f\u00bb.<\/p>\n

        ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 WAI-ARIA, W3C):<\/strong><\/p>\n

          \n
        • aria-required=»true» \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 required \u0434\u043b\u044f AT; \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u0447\u0438\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/li>\n
        • aria-describedby=»hint-id» \u2014 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u043e\u0439 \u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435<\/li>\n
        • aria-invalid=»true» \u2014 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 AT, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e<\/li>\n
        • aria-label=»\u041f\u043e\u0438\u0441\u043a» \u2014 \u0437\u0430\u043c\u0435\u043d\u0430 \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e label, \u043a\u043e\u0433\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043c\u0435\u0442\u043a\u0430 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e<\/li>\n
        • aria-live=»polite» \u2014 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f (\u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0441\u0442\u0430\u0442\u0443\u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438)<\/li>\n<\/ul>\n

          \u041f\u0440\u0438\u043d\u0446\u0438\u043f WCAG 2.1: ARIA \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 HTML, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0435\u0433\u043e. aria-required \u043d\u0435 \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 <label>.<\/p>\n

          \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b: tabindex \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0444\u043e\u043a\u0443\u0441\u0430. \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 HTML-\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0447\u0430\u0449\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u0435\u043d \u2014 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c tabindex \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. \u041a\u0440\u0438\u0442\u0438\u0447\u043d\u043e: \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0443\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u044c :focus \u0438\u0437 CSS \u0431\u0435\u0437 \u0437\u0430\u043c\u0435\u043d\u044b \u2014 \u043e\u043d \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 WCAG 2.1.<\/p>\n

          \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f HTML-\u0444\u043e\u0440\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h2>\n

          \"\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n

          \u0411\u0430\u0437\u043e\u0432\u044b\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430:<\/p>\n

          input, textarea, select {<\/p>\n

          width: 100%;<\/p>\n

          padding: 10px 14px;<\/p>\n

          border: 1px solid #ccc;<\/p>\n

          border-radius: 6px;<\/p>\n

          font-size: 16px;<\/p>\n

          font-family: inherit;<\/p>\n

          box-sizing: border-box;<\/p>\n

          }<\/p>\n

          \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/strong><\/p>\n

            \n
          • :focus \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d; \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0439 outline \u0438\u043b\u0438 box-shadow \u0432\u043c\u0435\u0441\u0442\u043e outline: none<\/li>\n
          • :hover \u2014 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438<\/li>\n
          • :disabled \u2014 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044f<\/li>\n
          • :checked \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 checkbox \u0438\u043b\u0438 radio<\/li>\n<\/ul>\n

            \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438:<\/strong><\/p>\n

              \n
            • :valid \u2014 \u043f\u043e\u043b\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e<\/li>\n
            • :invalid \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443<\/li>\n
            • :required \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435<\/li>\n
            • :optional \u2014 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435<\/li>\n<\/ul>\n

              input:valid { border-color: #28a745; }<\/p>\n

              input:invalid:not(:focus):not(:placeholder-shown) {<\/p>\n

              border-color: #dc3545;<\/p>\n

              }<\/p>\n

              ::placeholder<\/strong> \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442 \u0442\u0435\u043a\u0441\u0442-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443:<\/p>\n

              ::placeholder { color: #aaa; font-style: italic; }<\/p>\n

              \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c:<\/strong> \u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u0435\u043d\u0435\u0435 600 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 font-size: 16px \u2014 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0437\u0443\u043c \u043d\u0430 iOS \u0438 \u043b\u043e\u043c\u0430\u0435\u0442 \u0432\u0451\u0440\u0441\u0442\u043a\u0443.<\/p>\n

              Flexbox<\/strong> (\u0433\u0438\u0431\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440) \u0434\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438 \u043f\u043e\u043b\u0435\u0439:<\/p>\n

              form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }<\/p>\n

              \u041d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f <select>, <checkbox> \u0438 <radio> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442 \u0438\u0445 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0441\u043a\u0440\u044b\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 appearance: none \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0432\u0435\u0440\u0445.<\/p>\n

              \u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b HTML-\u0444\u043e\u0440\u043c \u0441 \u043a\u043e\u0434\u043e\u043c<\/h2>\n

              \u0422\u0440\u0438 \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438, \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u0444\u043e\u0440\u043c\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 HTML-\u043a\u043e\u0434 \u0441 \u0440\u0430\u0437\u0431\u043e\u0440\u043e\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439.<\/p>\n

              \u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438: name, email, message<\/h3>\n

              <form method=»post» action=»\/contact.php» novalidate><\/p>\n

              <fieldset><\/p>\n

              <legend>\u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430\u043c<\/legend><\/p>\n

              <label for=»cf-name»>\u0418\u043c\u044f<\/label><\/p>\n

              <input type=»text» id=»cf-name» name=»name»<\/p>\n

              required placeholder=»\u0418\u0432\u0430\u043d \u0418\u0432\u0430\u043d\u043e\u0432»><\/p>\n

              <label for=»cf-email»>Email<\/label><\/p>\n

              <input type=»email» id=»cf-email» name=»email»<\/p>\n

              required placeholder=»ivan@example.com»><\/p>\n

              <label for=»cf-msg»>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435<\/label><\/p>\n

              <textarea id=»cf-msg» name=»message» rows=»5″<\/p>\n

              required placeholder=»\u0412\u0430\u0448 \u0432\u043e\u043f\u0440\u043e\u0441…»><\/textarea><\/p>\n

              <button type=»submit»>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/button><\/p>\n

              <\/fieldset><\/p>\n

              <\/form><\/p>\n

              <fieldset> \u0441 <legend> \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u044f \u0438 \u0434\u0430\u0451\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u0430\u043c. \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u044f\u0432\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u043a <label> \u0447\u0435\u0440\u0435\u0437 for \u0438 id. required \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u043e\u0440\u043c\u044b.<\/p>\n

              \u0414\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b HTML \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 PHP mail() \u0438\u043b\u0438 SMTP-\u0441\u0435\u0440\u0432\u0438\u0441 \u2014 \u043d\u0435 action=»mailto:». \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0447\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e.<\/p>\n

              \u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0441\u043f\u0430\u043c\u0430: \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 Google reCAPTCHA \u0438\u043b\u0438 Honeypot-\u043f\u043e\u043b\u0435 (\u043f\u043e\u043b\u0435-\u043b\u043e\u0432\u0443\u0448\u043a\u0443) \u2014 \u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043f\u043e\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u043e\u0442\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442, \u0430 \u043b\u044e\u0434\u0438 \u043d\u0435 \u0432\u0438\u0434\u044f\u0442:<\/p>\n

              <input type=»text» name=»trap» style=»display:none» tabindex=»-1″><\/p>\n

              \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435: \u0435\u0441\u043b\u0438 trap \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0435 \u2014 \u0437\u0430\u043f\u0440\u043e\u0441 \u043e\u0442 \u0431\u043e\u0442\u0430. \u0412\u0441\u0435\u0433\u0434\u0430 \u0441\u0430\u043d\u0438\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 htmlspecialchars() \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0432\u043e\u0434\u043e\u043c.<\/p>\n

              \u0424\u043e\u0440\u043c\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0441 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439 \u0438 CSS<\/h3>\n

              <form method=»post» action=»\/register.php» novalidate><\/p>\n

              <input type=»hidden» name=»csrf_token» value=»<?= $token ?>»><\/p>\n

              <fieldset><\/p>\n

              <legend>\u041b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/legend><\/p>\n

              <label for=»r-name»>\u0418\u043c\u044f<\/label><\/p>\n

              <input type=»text» id=»r-name» name=»name» required><\/p>\n

              <label for=»r-email»>Email<\/label><\/p>\n

              <input type=»email» id=»r-email» name=»email» required><\/p>\n

              <\/fieldset><\/p>\n

              <fieldset><\/p>\n

              <legend>\u0410\u043a\u043a\u0430\u0443\u043d\u0442<\/legend><\/p>\n

              <label for=»r-user»>\u041b\u043e\u0433\u0438\u043d<\/label><\/p>\n

              <input type=»text» id=»r-user» name=»username»<\/p>\n

              pattern=»[a-zA-Z0-9_]+» required<\/p>\n

              title=»\u0422\u043e\u043b\u044c\u043a\u043e \u0431\u0443\u043a\u0432\u044b, \u0446\u0438\u0444\u0440\u044b \u0438 _»><\/p>\n

              <label for=»r-pass»>\u041f\u0430\u0440\u043e\u043b\u044c<\/label><\/p>\n

              <input type=»password» id=»r-pass» name=»password»<\/p>\n

              minlength=»8″ required><\/p>\n

              <label for=»r-pass2″>\u041f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c<\/label><\/p>\n

              <input type=»password» id=»r-pass2″ name=»confirm»><\/p>\n

              <\/fieldset><\/p>\n

              <button type=»submit»>\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/button><\/p>\n

              <\/form><\/p>\n

              \u0414\u0432\u0430 <fieldset> \u2014 \u00ab\u041b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\u00bb \u0438 \u00ab\u0410\u043a\u043a\u0430\u0443\u043d\u0442\u00bb \u2014 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u044f\u0442 \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. <input type=»hidden»> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 CSRF-\u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u043c\u0435\u0436\u0441\u0430\u0439\u0442\u043e\u0432\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n

              JavaScript \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u043e\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 setCustomValidity():<\/p>\n

              const pass = document.getElementById(‘r-pass’);<\/p>\n

              const pass2 = document.getElementById(‘r-pass2’);<\/p>\n

              pass2.addEventListener(‘input’, () => {<\/p>\n

              pass2.setCustomValidity(<\/p>\n

              pass.value !== pass2.value ? ‘\u041f\u0430\u0440\u043e\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442’ : »<\/p>\n

              );<\/p>\n

              });<\/p>\n

              CSS-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u0430\u044e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c: input:valid { border-color: green; }, input:invalid { border-color: red; }. \u0424\u043e\u0440\u043c\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e HTTPS.<\/p>\n

              \u0424\u043e\u0440\u043c\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432: enctype \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 accept<\/h3>\n

              <form method=»post» action=»\/upload.php»<\/p>\n

              enctype=»multipart\/form-data»><\/p>\n

              <label for=»doc»>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/label><\/p>\n

              <input type=»file» id=»doc» name=»doc»<\/p>\n

              accept=».pdf,.docx» multiple><\/p>\n

              <button type=»submit»>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c<\/button><\/p>\n

              <\/form><\/p>\n

              \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e: enctype=»multipart\/form-data» \u043d\u0430 \u0442\u0435\u0433\u0435 <form>. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u0430 \u043d\u0435 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u2014 \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f.<\/p>\n

              accept=».pdf,.docx» \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 MIME-\u0442\u0438\u043f\u044b (\u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0444\u0430\u0439\u043b\u043e\u0432); multiple \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0444\u0430\u0439\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0447\u0435\u0440\u0435\u0437 $_FILES[‘doc’] \u0432 PHP.<\/p>\n

              \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: \u0437\u0430\u0431\u044b\u0442\u044c enctype \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0435 \u0444\u043e\u0440\u043c\u044b \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u043f\u043e\u043b\u0435 $_FILES \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c, \u0430 \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430 \u043f\u0440\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0435.<\/p>\n

              \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c HTML-\u0444\u043e\u0440\u043c: XSS, CSRF \u0438 \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0431\u043e\u0442\u043e\u0432<\/h2>\n

              \"\u041a\u0430\u0440\u0442\u0430<\/p>\n

              HTML-\u0444\u043e\u0440\u043c\u044b \u2014 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u0432\u0435\u0431-\u0430\u0442\u0430\u043a. \u0427\u0435\u0442\u044b\u0440\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0443\u0433\u0440\u043e\u0437\u044b \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0437\u0430\u0449\u0438\u0442\u044b:<\/p>\n

              XSS (\u043c\u0435\u0436\u0441\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u0438\u043d\u0433):<\/strong> \u0437\u043b\u043e\u0443\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u0438\u043a \u0432\u0432\u043e\u0434\u0438\u0442 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u044b\u0439 JavaScript-\u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u0417\u0430\u0449\u0438\u0442\u0430: \u0441\u0430\u043d\u0438\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u2014 htmlspecialchars() \u0432 PHP, html.escape() \u0432 Python. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Content Security Policy (\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, CSP) \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n

              CSRF (\u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0430 \u043c\u0435\u0436\u0441\u0430\u0439\u0442\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432):<\/strong> \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0432\u044b\u043d\u0443\u0436\u0434\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0443. \u0417\u0430\u0449\u0438\u0442\u0430: \u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0442\u043e\u043a\u0435\u043d\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435:<\/p>\n

              <input type=»hidden» name=»csrf_token» value=»\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439_\u0442\u043e\u043a\u0435\u043d»><\/p>\n

              SQL-\u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044f:<\/strong> \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u044b\u0439 SQL-\u043a\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0417\u0430\u0449\u0438\u0442\u0430: \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (prepared statements) \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043a\u043b\u0435\u0439\u043a\u0438 \u0441\u0442\u0440\u043e\u043a; filter_var() \u0432 PHP.<\/p>\n

              \u0411\u043e\u0442\u044b \u0438 \u0441\u043f\u0430\u043c:<\/strong> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b. \u0417\u0430\u0449\u0438\u0442\u0430: reCAPTCHA \u043e\u0442 Google, Honeypot-\u043f\u043e\u043b\u0435-\u043b\u043e\u0432\u0443\u0448\u043a\u0430, Rate Limiting (\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e IP \u0437\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438).<\/p>\n

              HTTPS<\/strong> \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0441 \u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u2014 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u0441\u0435\u0442\u0438 \u043d\u0430 \u043f\u0443\u0442\u0438 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n

              \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0441 JavaScript \u0438 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/h2>\n

              \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u044b<\/strong> \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u0447\u0435\u0440\u0435\u0437 JavaScript \u0438 DOM (Document Object Model, \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430).<\/p>\n

              \u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b:<\/p>\n

                \n
              • \u041f\u043e\u043a\u0430\u0437\/\u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e\u043b\u0435\u0439: element.style.display = ‘block’ \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e change \u0443 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u043e\u043b\u044f<\/li>\n
              • \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 <select>: \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f JavaScript \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0447\u0435\u0440\u0435\u0437 appendChild() \u0438 removeChild()<\/li>\n
              • \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439: form.insertAdjacentHTML(‘beforeend’, ‘<input name=»item[]»>’)<\/li>\n
              • \u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438: event.preventDefault() \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 submit \u0434\u0430\u0451\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<\/ul>\n

                \u0428\u0435\u0441\u0442\u044c \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 HTML:<\/strong><\/p>\n

                  \n
                1. \u041d\u0435\u0442 <\/strong>name<\/strong> \u0443 <\/strong><input><\/strong> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e<\/li>\n
                2. GET \u0432\u043c\u0435\u0441\u0442\u043e POST \u0434\u043b\u044f \u043f\u0430\u0440\u043e\u043b\u0435\u0439<\/strong> \u2014 \u043f\u0430\u0440\u043e\u043b\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/li>\n
                3. \u041d\u0435\u0442 <\/strong><label><\/strong> \u2014 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0438\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f; \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443<\/li>\n
                4. \u041d\u0435\u0442 <\/strong>enctype=»multipart\/form-data»<\/strong> \u2014 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/li>\n
                5. \u0422\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/strong> \u2014 \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0431\u043e\u0439\u0434\u0451\u0442 \u0435\u0451 \u0437\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u044b<\/li>\n
                6. \u0423\u0431\u0440\u0430\u0442\u044c <\/strong>:focus<\/strong> \u0438\u0437 CSS<\/strong> \u2014 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f WCAG 2.1<\/li>\n<\/ol>\n

                  \u0427\u0430\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/h2>\n

                  \u041a\u0430\u043a\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0437\u0430\u0434\u0430\u0451\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 HTML-\u0444\u043e\u0440\u043c\u044b?<\/h3>\n

                  \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c placeholder. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: <input placeholder=»\u0412\u0432\u0435\u0434\u0438\u0442\u0435 email»>. \u0422\u0435\u043a\u0441\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0432\u043e\u0434\u0430 \u0438 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c. \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u0440\u0435\u0437 CSS ::placeholder. \u0412\u0430\u0436\u043d\u043e: placeholder \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 <label> \u2014 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0431\u0430\u0440\u044c\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u0438 \u043b\u044e\u0434\u0435\u0439 \u0441 \u043a\u043e\u0433\u043d\u0438\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n

                  \u0427\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b GET \u0438 POST \u0432 HTML-\u0444\u043e\u0440\u043c\u0435?<\/h3>\n

                  GET \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a URL (?name=value): \u0432\u0438\u0434\u0435\u043d \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043b\u0438\u043c\u0438\u0442 \u043e\u043a\u043e\u043b\u043e 2 000 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. POST \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430: \u043d\u0435 \u0432\u0438\u0434\u0435\u043d \u0432 URL, \u0431\u0435\u0437 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043e\u0431\u044a\u0451\u043c\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b. \u041f\u0440\u0430\u0432\u0438\u043b\u043e: GET \u2014 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432; POST \u2014 \u0434\u043b\u044f \u043f\u0430\u0440\u043e\u043b\u0435\u0439, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0438 \u043b\u044e\u0431\u044b\u0445 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n

                  \u041f\u043e\u0447\u0435\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440?<\/h3>\n

                  \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 name \u0443 \u043f\u043e\u043b\u044f. \u0411\u0435\u0437 name \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 <input>, <textarea>, <select>. \u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d enctype=»multipart\/form-data» \u043d\u0430 \u0442\u0435\u0433\u0435 <form>.<\/p>\n

                  \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0432 HTML?<\/h3>\n

                  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430: <form method=»post» action=»\/contact.php»> \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0438\u043c\u0435\u043d\u0438 (<input type=»text» name=»name» required>), \u0430\u0434\u0440\u0435\u0441\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b (<input type=»email» name=»email» required>), \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (<textarea name=»message»>) \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 submit. \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0432 <label>. \u0414\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u0441\u043f\u0430\u043c\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 reCAPTCHA. \u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 PHP mail() \u0438\u043b\u0438 SMTP-\u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n

                  \u041a\u0430\u043a \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c?<\/h3>\n

                  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <fieldset> \u2014 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u043f\u043e\u043b\u0435\u0439 \u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u043c\u043a\u043e\u0439. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 <legend> \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0433\u0440\u0443\u043f\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u043e\u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043f\u043e\u043b\u0435\u043c. disabled \u043d\u0430 <fieldset> \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0424\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0435\u043b\u0438\u0442\u0435 \u043d\u0430 \u00ab\u041b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\u00bb \u0438 \u00ab\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430\u00bb.<\/p>\n

                  \u041a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b \u0447\u0435\u0440\u0435\u0437 HTML-\u0444\u043e\u0440\u043c\u0443?<\/h3>\n

                  \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 enctype=»multipart\/form-data» \u043a \u0442\u0435\u0433\u0443 <form> \u0438 <input type=»file» name=»doc» accept=».pdf,.docx»>. \u0411\u0435\u0437 enctype \u0444\u0430\u0439\u043b \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u044f. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 accept \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0442\u0438\u043f\u044b; multiple \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0444\u0430\u0439\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0447\u0435\u0440\u0435\u0437 $_FILES[‘doc’] \u0432 PHP.<\/p>\n

                  \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u0432 HTML-\u0444\u043e\u0440\u043c\u0435?<\/h3>\n

                  \u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <input type=»radio» name=»group» value=»option1″>. \u0412\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 name \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 checked \u0437\u0430\u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0434\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041a\u0430\u0436\u0434\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0439\u0442\u0435 <label for=»id»> \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f.<\/p>\n

                  \u041a\u0430\u043a \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c HTML-\u0444\u043e\u0440\u043c\u0443 \u043e\u0442 XSS \u0438 CSRF?<\/h3>\n

                  \u041e\u0442 XSS: \u0441\u0430\u043d\u0438\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u2014 htmlspecialchars() \u0432 PHP, html.escape() \u0432 Python. \u041e\u0442 CSRF: \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 <input type=»hidden» name=»csrf_token» value=»…»> \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 HTTPS \u2014 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0437\u0430\u0449\u0438\u0442\u0430 \u2014 \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e; \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u2014 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c.<\/p>\n

                  \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0432 HTML?<\/h3>\n

                  \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0447\u0435\u0440\u0435\u0437 JavaScript: \u043f\u043e\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (element.style.display), \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 <select> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 appendChild(). \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043c\u043d\u043e\u0433\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0445, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0445 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432.<\/p>\n

                  \u041a\u0430\u043a \u0438\u0437\u0443\u0447\u0438\u0442\u044c HTML-\u0444\u043e\u0440\u043c\u044b \u0441 \u043d\u0443\u043b\u044f?<\/h3>\n

                  HTML-\u0444\u043e\u0440\u043c\u044b \u2014 \u0447\u0430\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0430 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u0442\u0435\u0433\u0430 <form> \u0438 \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0437\u0430\u0442\u0435\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043f\u044b <input>, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 CSS. \u041d\u0430 \u043a\u0443\u0440\u0441\u0435 \u00ab\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0423\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u00bb (\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435, 36 \u0447\u0430\u0441\u043e\u0432) HTML-\u0444\u043e\u0440\u043c\u044b \u0438\u0437\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u041c\u043e\u0434\u0443\u043b\u0435 2 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435: \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 TO-DO List \u0438 \u043f\u043e\u0437\u0434\u043d\u0435\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0435 Flask-\u0444\u043e\u0440\u043c\u044b \u0441 POST\/GET-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n