{"id":10297,"date":"2026-09-23T03:56:18","date_gmt":"2026-09-23T03:56:18","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=10297"},"modified":"2026-09-25T15:36:19","modified_gmt":"2026-09-25T15:36:19","slug":"forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/","title":{"rendered":"\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043d\u0430 HTML \u0438 CSS: \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438 \u0441\u0442\u0438\u043b\u0438"},"content":{"rendered":"

\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438<\/strong> — \u044d\u0442\u043e \u0431\u043b\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0442\u0435\u0433\u0435 <form><\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u044f (\u0438\u043c\u044f, email, \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435) \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443, \u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0432 \u043f\u0430\u0440\u044b \u00ab\u0438\u043c\u044f \u043f\u043e\u043b\u044f = \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00bb \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \u0438\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 action<\/code>. HTML \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u044f \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, CSS — \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434. \u041f\u0440\u0438\u043d\u044f\u0442\u044c, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0441\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440: HTML \u0438 CSS \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c<\/a><\/li>\n
  2. \u041f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b \u043e\u0442\u0437\u044b\u0432\u0430<\/a><\/li>\n
  3. \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c<\/a><\/li>\n
  4. GET \u0438\u043b\u0438 POST<\/a><\/li>\n
  5. \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f HTML5: \u0447\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0438 \u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442<\/a><\/li>\n
  6. \u0421\u0442\u0438\u043b\u0438 \u043d\u0430 CSS<\/a><\/li>\n
  7. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c: \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0447\u0435\u043a-\u043b\u0438\u0441\u0442<\/a><\/li>\n
  8. \u0413\u0440\u0430\u043d\u0438\u0446\u0430 HTML \u0438 CSS: \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440<\/a><\/li>\n
  9. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  10. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  11. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  12. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 — \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u043e\u0442\u0437\u044b\u0432\u0430, \u0440\u0430\u0437\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0441\u0442\u0438\u043b\u0438 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n

    \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c<\/h2>\n\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    \u041f\u043e\u043b\u0435<\/td>\n\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u043e\u0440\u043c\u044b<\/td>\n<input><\/code>, <textarea><\/code>, <select><\/code><\/td>\n<\/tr>\n
    name<\/code><\/td>\n\u043a\u043b\u044e\u0447, \u043f\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0439\u0434\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/td>\nname=\"email\"<\/code><\/td>\n<\/tr>\n
    label<\/code><\/td>\n\u0432\u0438\u0434\u0438\u043c\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u044c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043b\u0435\u043c<\/td>\n<label for=\"email\"><\/code><\/td>\n<\/tr>\n
    action<\/code><\/td>\nURL \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430<\/td>\nhttps:\/\/example.com\/feedback<\/code><\/td>\n<\/tr>\n
    method<\/code><\/td>\n\u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438<\/td>\nget<\/code> \u0438\u043b\u0438 post<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435: id<\/code> \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0441 \u043f\u043e\u043b\u0435\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0430 name<\/code> — \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u043e\u043b\u0435 \u0431\u0435\u0437 name<\/code> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442.<\/p>\n

    \u041f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b \u043e\u0442\u0437\u044b\u0432\u0430<\/h2>\n

    \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0444\u0430\u0439\u043b. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u043a\u0430\u043a index.html<\/code> \u0440\u044f\u0434\u043e\u043c \u0441 style.css<\/code> (\u043e\u043d \u043d\u0438\u0436\u0435) \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n

    <!DOCTYPE html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><\/span>\n  <<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><\/span>\n  <<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1\"<\/span>><\/span>\n  <<\/span>title<\/span>><\/span>\u041e\u0442\u0437\u044b\u0432 \u043e \u043a\u0443\u0440\u0441\u0435<\/<\/span>title<\/span>><\/span>\n  <<\/span>link<\/span> rel<\/span>=<\/span>\"stylesheet\"<\/span> href<\/span>=<\/span>\"style.css\"<\/span>><\/span>\n<\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>form<\/span> class<\/span>=<\/span>\"feedback\"<\/span> action<\/span>=<\/span>\"https:\/\/example.com\/feedback\"<\/span> method<\/span>=<\/span>\"post\"<\/span>><\/span>\n    <<\/span>h1<\/span>><\/span>\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043e\u0442\u0437\u044b\u0432<\/<\/span>h1<\/span>><\/span>\n\n    <<\/span>label<\/span> for<\/span>=<\/span>\"name\"<\/span>><\/span>\u0418\u043c\u044f<\/<\/span>label<\/span>><\/span>\n    <<\/span>input<\/span> id<\/span>=<\/span>\"name\"<\/span> name<\/span>=<\/span>\"name\"<\/span> type<\/span>=<\/span>\"text\"<\/span> autocomplete<\/span>=<\/span>\"name\"<\/span>\n           required<\/span> minlength<\/span>=<\/span>\"2\"<\/span> maxlength<\/span>=<\/span>\"60\"<\/span>><\/span>\n\n    <<\/span>label<\/span> for<\/span>=<\/span>\"email\"<\/span>><\/span>Email<\/<\/span>label<\/span>><\/span>\n    <<\/span>input<\/span> id<\/span>=<\/span>\"email\"<\/span> name<\/span>=<\/span>\"email\"<\/span> type<\/span>=<\/span>\"email\"<\/span> autocomplete<\/span>=<\/span>\"email\"<\/span>\n           required<\/span> aria-describedby<\/span>=<\/span>\"email-hint\"<\/span> placeholder<\/span>=<\/span>\"ivan@example.com\"<\/span>><\/span>\n    <<\/span>p<\/span> id<\/span>=<\/span>\"email-hint\"<\/span> class<\/span>=<\/span>\"hint\"<\/span>><\/span>\u041d\u0430 \u044d\u0442\u043e\u0442 \u0430\u0434\u0440\u0435\u0441 \u043f\u0440\u0438\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442<\/<\/span>p<\/span>><\/span>\n\n    <<\/span>fieldset<\/span>><\/span>\n      <<\/span>legend<\/span>><\/span>\u041e\u0446\u0435\u043d\u043a\u0430<\/<\/span>legend<\/span>><\/span>\n      <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"radio\"<\/span> name<\/span>=<\/span>\"rating\"<\/span> value<\/span>=<\/span>\"5\"<\/span> required<\/span>><\/span> 5<\/<\/span>label<\/span>><\/span>\n      <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"radio\"<\/span> name<\/span>=<\/span>\"rating\"<\/span> value<\/span>=<\/span>\"4\"<\/span>><\/span> 4<\/<\/span>label<\/span>><\/span>\n      <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"radio\"<\/span> name<\/span>=<\/span>\"rating\"<\/span> value<\/span>=<\/span>\"3\"<\/span>><\/span> 3<\/<\/span>label<\/span>><\/span>\n      <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"radio\"<\/span> name<\/span>=<\/span>\"rating\"<\/span> value<\/span>=<\/span>\"2\"<\/span>><\/span> 2<\/<\/span>label<\/span>><\/span>\n      <<\/span>label<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"radio\"<\/span> name<\/span>=<\/span>\"rating\"<\/span> value<\/span>=<\/span>\"1\"<\/span>><\/span> 1<\/<\/span>label<\/span>><\/span>\n    <\/<\/span>fieldset<\/span>><\/span>\n\n    <<\/span>label<\/span> for<\/span>=<\/span>\"message\"<\/span>><\/span>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435<\/<\/span>label<\/span>><\/span>\n    <<\/span>textarea<\/span> id<\/span>=<\/span>\"message\"<\/span> name<\/span>=<\/span>\"message\"<\/span> rows<\/span>=<\/span>\"5\"<\/span>\n              required<\/span> minlength<\/span>=<\/span>\"10\"<\/span> maxlength<\/span>=<\/span>\"2000\"<\/span>><\/<\/span>textarea<\/span>><\/span>\n\n    <<\/span>button<\/span> type<\/span>=<\/span>\"submit\"<\/span>><\/span>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/<\/span>button<\/span>><\/span>\n  <\/<\/span>form<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
    \u0427\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435: \u0444\u043e\u0440\u043c\u0430 \u0441 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439. \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb \u0441 \u043f\u0443\u0441\u0442\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438, \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 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 https:\/\/example.com\/feedback<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u044d\u0442\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u042d\u0442\u043e \u0430\u0434\u0440\u0435\u0441-\u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f.<\/p>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c<\/h2>\n
    <form><\/code>.<\/strong> \u0410\u0442\u0440\u0438\u0431\u0443\u0442 action<\/code> \u0437\u0430\u0434\u0430\u0435\u0442, \u043a\u0443\u0434\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, method<\/code> — \u043a\u0430\u043a. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043e\u043d\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f: \u0431\u0435\u0437 action<\/code> \u0444\u043e\u0440\u043c\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u0430\u0434\u0440\u0435\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0435\u0437 method<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d GET. \u0414\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 method=\"post\"<\/code> \u044f\u0432\u043d\u043e.<\/p>\n
    <label><\/code>.<\/strong> \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043b\u0435\u043c \u0447\u0435\u0440\u0435\u0437 for<\/code> \u0438 id<\/code> (\u043a\u0430\u043a \u0443 \u0438\u043c\u0435\u043d\u0438 \u0438 email) \u0438\u043b\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 (\u043a\u0430\u043a \u0443 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a). \u041a\u043b\u0438\u043a \u043f\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0441\u0442\u0430\u0432\u0438\u0442 \u0444\u043e\u043a\u0443\u0441 \u0432 \u043f\u043e\u043b\u0435, \u0430 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440 \u0437\u0430\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u043b\u0435\u043c. \u0421\u0435\u0440\u044b\u0439 \u0442\u0435\u043a\u0441\u0442-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442: \u043e\u043d \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u0438 \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043b\u0435\u0434\u043d\u044b\u0439.<\/p>\n
    <fieldset><\/code> \u0438 <legend><\/code>.<\/strong> \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f. \u0414\u043b\u044f \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e: legend<\/code> \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u00ab5, 4, 3\u00bb.<\/p>\n
    \u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438.<\/strong> \u041e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 name=\"rating\"<\/code> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0438\u0445 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0423\u0445\u043e\u0434\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 value<\/code>. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 required<\/code> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043e\u0434\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0433\u0440\u0443\u043f\u043f\u044b.<\/p>\n
    <button type=\"submit\"><\/code>.<\/strong> \u041a\u043d\u043e\u043f\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u043e\u0440\u043c\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0442\u0430\u043a \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f submit<\/code>, \u043d\u043e \u0442\u0438\u043f \u043b\u0443\u0447\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u044f\u0432\u043d\u043e: \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 type=\"button\"<\/code> \u0444\u043e\u0440\u043c\u0443 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442.<\/p>\n
    \u0422\u0438\u043f\u044b input \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438<\/h3>\n\n\n\n\n\n\n\n\n\n
    type<\/th>\n\u0414\u043b\u044f \u0447\u0435\u0433\u043e<\/th>\n\u0427\u0442\u043e \u0434\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    text<\/code><\/td>\n\u0438\u043c\u044f, \u0442\u0435\u043c\u0430<\/td>\n\u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430<\/td>\n<\/tr>\n
    email<\/code><\/td>\n\u043f\u043e\u0447\u0442\u0430<\/td>\n\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0441 @<\/code> \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435<\/td>\n<\/tr>\n
    tel<\/code><\/td>\n\u0442\u0435\u043b\u0435\u0444\u043e\u043d<\/td>\n\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430, \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442<\/td>\n<\/tr>\n
    url<\/code><\/td>\n\u0441\u0430\u0439\u0442<\/td>\n\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u0447\u0442\u043e \u044d\u0442\u043e URL<\/td>\n<\/tr>\n
    checkbox<\/code><\/td>\n\u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435<\/td>\n\u0444\u043b\u0430\u0436\u043e\u043a, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043e\u0442\u043c\u0435\u0447\u0435\u043d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0424\u043e\u0440\u043c\u0430\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c pattern<\/code> \u0438\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n
    GET \u0438\u043b\u0438 POST<\/h2>\n\n\n\n\n\n\n\n\n
    <\/th>\nGET<\/th>\nPOST<\/th>\n<\/tr>\n<\/thead>\n
    \u0413\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/td>\n\u0432 URL \u043f\u043e\u0441\u043b\u0435 ?<\/code><\/td>\n\u0432 \u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/td>\n<\/tr>\n
    \u0412\u0438\u0434\u043d\u043e \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438, \u043b\u043e\u0433\u0430\u0445, \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0430\u0445<\/td>\n\u0434\u0430<\/td>\n\u043d\u0435\u0442<\/td>\n<\/tr>\n
    \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043c\u0430<\/td>\n\u0434\u043b\u0438\u043d\u0430 URL, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/td>\n\u043b\u0438\u043c\u0438\u0442 \u0437\u0430\u0434\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440<\/td>\n<\/tr>\n
    \u0414\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438<\/td>\n\u043d\u0435\u0442<\/td>\n\u0434\u0430<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    POST \u043d\u0435 \u0448\u0438\u0444\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435: \u043e\u043d \u043b\u0438\u0448\u044c \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 \u0438\u0437 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438. \u041e\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e HTTPS \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0432 action<\/code>.<\/p>\n
    \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f HTML5: \u0447\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0438 \u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442<\/h2>\n
    \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b required<\/code>, minlength<\/code>, maxlength<\/code>, pattern<\/code>, min<\/code>, max<\/code> \u0438 \u0442\u0438\u043f \u043f\u043e\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443: \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 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0447\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u043d\u0435 \u0437\u0430\u0449\u0438\u0442\u0430.<\/p>\n
    \u0413\u0440\u0430\u043d\u0438\u0446\u0430: \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0436\u0438\u0432\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0415\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 novalidate<\/code>, \u0435\u0435 \u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 curl<\/code> \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 HTTP-\u043a\u043b\u0438\u0435\u043d\u0442, \u0430 type=\"email\"<\/code> \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0439 \u0432\u0438\u0434 \u0430\u0434\u0440\u0435\u0441\u0430, \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u044f\u0449\u0438\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0431\u044f\u0437\u0430\u043d \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435: \u043d\u0430\u043b\u0438\u0447\u0438\u0435, \u0434\u043b\u0438\u043d\u0443, \u0444\u043e\u0440\u043c\u0430\u0442, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e rating<\/code> — \u0447\u0438\u0441\u043b\u043e \u043e\u0442 1 \u0434\u043e 5).<\/p>\n
    \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n
    <!-- \u043d\u0435\u0432\u0435\u0440\u043d\u043e: \u0443 \u043f\u043e\u043b\u044f \u043d\u0435\u0442 name --><\/span>\n<<\/span>input<\/span> id<\/span>=<\/span>\"email\"<\/span> type<\/span>=<\/span>\"email\"<\/span> required<\/span>><\/span><\/code><\/pre>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e, \u043d\u043e email \u0432 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c name=\"email\"<\/code>.<\/p>\n
    \u0421\u0442\u0438\u043b\u0438 \u043d\u0430 CSS<\/h2>\n
    .<\/span>feedback<\/span> {<\/span>\n  <\/span>max-width<\/span>: <\/span>480<\/span>px<\/span>;<\/span>\n  <\/span>margin<\/span>: <\/span>40<\/span>px<\/span> <\/span>auto<\/span>;<\/span>\n  <\/span>padding<\/span>: <\/span>24<\/span>px<\/span>;<\/span>\n  <\/span>display<\/span>: <\/span>grid<\/span>;<\/span>\n  <\/span>gap<\/span>: <\/span>8<\/span>px<\/span>;<\/span>\n  <\/span>font-family<\/span>: <\/span>system-ui<\/span>, <\/span>sans-serif<\/span>;<\/span>\n}<\/span>\n\n.<\/span>feedback<\/span> <\/span>input<\/span>,<\/span>\n.<\/span>feedback<\/span> <\/span>textarea<\/span> {<\/span>\n  <\/span>padding<\/span>: <\/span>10<\/span>px<\/span>;<\/span>\n  <\/span>font<\/span>: <\/span>inherit<\/span>;<\/span>\n  <\/span>border<\/span>: <\/span>1<\/span>px<\/span> <\/span>solid<\/span> <\/span>#8a8a8a<\/span>;<\/span>\n  <\/span>border-radius<\/span>: <\/span>6<\/span>px<\/span>;<\/span>\n}<\/span>\n\n.<\/span>feedback<\/span> <\/span>fieldset<\/span> {<\/span>\n  <\/span>display<\/span>: <\/span>flex<\/span>;<\/span>\n  <\/span>gap<\/span>: <\/span>12<\/span>px<\/span>;<\/span>\n  <\/span>border<\/span>: <\/span>1<\/span>px<\/span> <\/span>solid<\/span> <\/span>#8a8a8a<\/span>;<\/span>\n  <\/span>border-radius<\/span>: <\/span>6<\/span>px<\/span>;<\/span>\n}<\/span>\n\n.<\/span>feedback<\/span> :<\/span>focus-visible<\/span> {<\/span>\n  <\/span>outline<\/span>: <\/span>3<\/span>px<\/span> <\/span>solid<\/span> <\/span>#2563eb<\/span>;<\/span>\n  <\/span>outline-offset<\/span>: <\/span>2<\/span>px<\/span>;<\/span>\n}<\/span>\n\n.<\/span>feedback<\/span> :<\/span>user-invalid<\/span> {<\/span>\n  <\/span>border-color<\/span>: <\/span>#c0262d<\/span>;<\/span>\n}<\/span>\n\n.<\/span>feedback<\/span> <\/span>button<\/span> {<\/span>\n  <\/span>justify-self<\/span>: <\/span>start<\/span>;<\/span>\n  <\/span>padding<\/span>: <\/span>10<\/span>px<\/span> <\/span>20<\/span>px<\/span>;<\/span>\n  <\/span>font<\/span>: <\/span>inherit<\/span>;<\/span>\n  <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span>\n}<\/span><\/code><\/pre>\n
    \u0427\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f: \u0444\u043e\u0440\u043c\u0430 \u0432\u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043e\u043b\u043e\u043d\u043a\u043e\u0439 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0434\u043e 480 px, \u043f\u043e\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0440\u0430\u043c\u043a\u0438 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0444\u043e\u043a\u0443\u0441\u0435 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0438\u043d\u044f\u044f \u043e\u0431\u0432\u043e\u0434\u043a\u0430. \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u043f\u043e\u043b\u044f, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b \u043d\u0435\u0432\u0435\u0440\u043d\u043e. \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 :invalid<\/code> \u043a\u0440\u0430\u0441\u0438\u043b \u0431\u044b \u043f\u0443\u0441\u0442\u044b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c :user-invalid<\/code>. \u0412 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0433\u0434\u0435 \u0435\u0433\u043e \u043d\u0435\u0442, \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0444\u043e\u0440\u043c\u0430 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0439.<\/p>\n
    \u041d\u0435 \u0443\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043e\u0431\u0432\u043e\u0434\u043a\u0443 \u0444\u043e\u043a\u0443\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 outline: none<\/code> \u0431\u0435\u0437 \u0437\u0430\u043c\u0435\u043d\u044b: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c, \u0433\u0434\u0435 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n
    \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c: \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0447\u0435\u043a-\u043b\u0438\u0441\u0442<\/h2>\n