{"id":5344,"date":"2024-11-23T04:50:09","date_gmt":"2024-11-23T04:50:09","guid":{"rendered":"https:\/\/isophal.com\/?p=5344"},"modified":"2024-11-23T04:55:19","modified_gmt":"2024-11-23T04:55:19","slug":"html-login-form-with-css-styles","status":"publish","type":"post","link":"https:\/\/isophal.com\/news\/2024\/11\/23\/5344.html\/","title":{"rendered":"HTML Login Form with CSS styles"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u1780\u17b6\u179a\u1794\u1784\u17d2\u1780\u17be\u178f Structure \u179a\u1794\u179f\u17cb Form<\/h2>\n\n\n\n<p>\u178a\u17be\u1798\u17d2\u1794\u17b8\u1792\u17d2\u179c\u17be\u17b1\u17d2\u1799 form \u1798\u17b6\u1793\u179f\u17d2\u179a\u17c1\u1785 \u1793\u17b7\u1784\u1798\u17b6\u1793\u179a\u1785\u1793\u17b6\u179f\u17d2\u17a2\u17b6\u178f \u1785\u17b6\u17c6\u1794\u17b6\u1785\u17cb\u178f\u17d2\u179a\u17bc\u179c\u179a\u17c0\u1794\u1785\u17c6\u179f\u1798\u17b6\u179f\u1797\u17b6\u1782\u178a\u17bc\u1785\u178f\u1791\u17c5\u17d6<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1785\u17b6\u1794\u17cb\u1795\u17d2\u178f\u17be\u1798\u178a\u17c4\u1799 <form> Tag<\/form>\n<ul class=\"wp-block-list\">\n<li>\u1780\u17c6\u178e\u178f\u17cb Attribute action \u1793\u17b7\u1784 method \u178a\u17be\u1798\u17d2\u1794\u17b8\u1794\u1789\u17d2\u1787\u17b6\u1780\u17cb\u1796\u17b8\u1791\u17b8\u178f\u17b6\u17c6\u1784\u1793\u17b7\u1784\u179c\u17b7\u1792\u17b8\u179f\u17b6\u179f\u17d2\u179a\u17d2\u178f\u178a\u17c2\u179b form \u1793\u17b9\u1784\u1794\u1789\u17d2\u1787\u17bc\u1793\u1791\u17b7\u1793\u17d2\u1793\u1793\u17d0\u1799\u1791\u17c5\u17d4<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"\/submit-form\" method=\"POST\">\n    &lt;!-- Content of the form goes here -->\n&lt;\/form><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Form \u178f\u17be\u1787\u17b6\u17a2\u17d2\u179c\u17b8<\/h2>\n\n\n\n<p>HTML Form \u1782\u17ba\u1787\u17b6\u17a7\u1794\u1780\u179a\u178e\u17cd\u1798\u17bd\u1799\u178a\u17c2\u179b\u1794\u17d2\u179a\u17be\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u1794\u17d2\u179a\u1798\u17bc\u179b\u1791\u17b7\u1793\u17d2\u1793\u1793\u17d0\u1799\u1796\u17b8\u17a2\u17d2\u1793\u1780\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u17d4 \u179c\u17b6\u178f\u17d2\u179a\u17bc\u179c\u1794\u17b6\u1793\u1794\u17d2\u179a\u17be\u1787\u17b6\u1789\u17b9\u1780\u1789\u17b6\u1794\u17cb\u1793\u17c5\u179b\u17be\u1782\u17c1\u17a0\u1791\u17c6\u1796\u17d0\u179a \u178a\u17be\u1798\u17d2\u1794\u17b8\u17b1\u17d2\u1799\u17a2\u17d2\u1793\u1780\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u17a2\u17b6\u1785\u1794\u1789\u17d2\u1785\u17bc\u179b\u1796\u17d0\u178f\u17cc\u1798\u17b6\u1793\u1793\u17b6\u1793\u17b6 \u178a\u17bc\u1785\u1787\u17b6\u1788\u17d2\u1798\u17c4\u17c7 \u17a2\u17b6\u179f\u1799\u178a\u17d2\u178b\u17b6\u1793\u17a2\u17ca\u17b8\u1798\u17c2\u179b \u1796\u17b6\u1780\u17d2\u1799\u179f\u1798\u17d2\u1784\u17b6\u178f\u17cb \u1794\u1789\u17d2\u1785\u17bb\u17c7\u1794\u1789\u17d2\u1785\u17bc\u179b\u1785\u17c6\u178e\u17bc\u179b\u1785\u17b7\u178f\u17d2\u178f \u1793\u17b7\u1784\u1796\u17d0\u178f\u17cc\u1798\u17b6\u1793\u1795\u17d2\u179f\u17c1\u1784\u17d7\u1791\u17c0\u178f\u17d4 \u1791\u17b7\u1793\u17d2\u1793\u1793\u17d0\u1799\u178a\u17c2\u179b\u1794\u17d2\u179a\u1798\u17bc\u179b\u1794\u17b6\u1793\u178f\u17d2\u179a\u17bc\u179c\u1794\u1789\u17d2\u1787\u17bc\u1793\u1791\u17c5\u1780\u17b6\u1793\u17cb\u1798\u17c9\u17b6\u179f\u17ca\u17b8\u1793\u1798\u17c1 (server) \u178a\u17be\u1798\u17d2\u1794\u17b8\u178a\u17c6\u178e\u17be\u179a\u1780\u17b6\u179a\u1794\u1793\u17d2\u1790\u17c2\u1798\u1791\u17c0\u178f \u17ac\u179a\u1780\u17d2\u179f\u17b6\u1791\u17bb\u1780\u1780\u17d2\u1793\u17bb\u1784\u1798\u17bc\u179b\u178a\u17d2\u178b\u17b6\u1793\u1791\u17b7\u1793\u17d2\u1793\u1793\u17d0\u1799 (database)\u17d4<\/p>\n\n\n\n<p><strong>\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb HTML Form:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1780\u17b6\u179a\u1785\u17bb\u17c7\u1788\u17d2\u1798\u17c4\u17c7\u17d6 \u1794\u17d2\u179a\u17be form \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u1780\u17b6\u179a\u1785\u17bb\u17c7\u1788\u17d2\u1798\u17c4\u17c7\u17a2\u17ca\u17b8\u1798\u17c9\u17c2\u179b \u17ac\u1782\u178e\u1793\u17b8\u17d4<\/li>\n\n\n\n<li>\u1780\u17b6\u179a\u1785\u17bc\u179b\u1782\u178e\u1793\u17b8\u17d6 \u17a2\u1793\u17bb\u1789\u17d2\u1789\u17b6\u178f\u17b1\u17d2\u1799\u17a2\u17d2\u1793\u1780\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u1794\u1789\u17d2\u1785\u17bc\u179b\u1788\u17d2\u1798\u17c4\u17c7\u1785\u17bc\u179b (username) \u1793\u17b7\u1784\u1796\u17b6\u1780\u17d2\u1799\u179f\u1798\u17d2\u1784\u17b6\u178f\u17cb (password)\u17d4<\/li>\n\n\n\n<li>\u1780\u17b6\u179a\u1794\u1789\u17d2\u1785\u17bc\u179b\u1798\u178f\u17b7\u1799\u17c4\u1794\u179b\u17cb\u17d6 \u17b1\u17d2\u1799\u17a2\u17d2\u1793\u1780\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u1785\u17bc\u179b\u1798\u178f\u17b7\u1799\u17c4\u1794\u179b\u17cb\u17ac\u1786\u17d2\u179b\u17be\u1799\u178f\u1794\u1791\u17c5\u1793\u17b9\u1784\u17a2\u178f\u17d2\u1790\u1794\u1791 \u17ac\u1795\u179b\u17b7\u178f\u1795\u179b\u17d4<\/li>\n\n\n\n<li>\u1780\u17b6\u179a\u179f\u17d2\u179c\u17c2\u1784\u179a\u1780\u17d6 Form \u178f\u17d2\u179a\u17bc\u179c\u1794\u17b6\u1793\u1794\u17d2\u179a\u17be\u1787\u17b6\u1791\u17bc\u1791\u17c5\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u1794\u17d2\u179a\u17a2\u1794\u17cb\u179f\u17d2\u179c\u17c2\u1784\u179a\u1780 (search bar)\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 1.1<\/strong>\u17d6 \u1780\u17b6\u179a\u178e\u17c2\u1793\u17b6\u17c6\u17a2\u17c6\u1796\u17b8 HTML Forms<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1785\u17c6\u178e\u17bb\u1785\u179f\u17c6\u1781\u17b6\u1793\u17cb\u17d7\u17d6 HTML form \u178f\u17be\u1787\u17b6\u17a2\u17d2\u179c\u17b8 \u17a0\u17be\u1799\u178f\u17be\u179c\u17b6\u17a2\u17b6\u1785\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u1792\u17d2\u179c\u17be\u17a2\u17d2\u179c\u17b8\u1794\u17b6\u1793\u1781\u17d2\u179b\u17c7\u17d4<\/li>\n\n\n\n<li>\u1796\u1793\u17d2\u1799\u179b\u17cb\u1796\u17b8 <code>&lt;form><\/code> tag \u1793\u17b7\u1784 attribute \u1782\u1793\u17d2\u179b\u17b9\u17c7 (action, method, enctype)\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 1.2<\/strong>\u17d6 \u1794\u17d2\u179a\u1797\u17c1\u1791\u1793\u17c3 input fields<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u179f\u17d2\u179c\u17c2\u1784\u1799\u179b\u17cb\u1796\u17b8\u1794\u17d2\u179a\u1797\u17c1\u1791\u1793\u17c3 <code>&lt;input><\/code> tags \u178a\u17bc\u1785\u1787\u17b6 <code>text<\/code>, <code>password<\/code>, <code>email<\/code>, <code>number<\/code>, <code>radio<\/code>, <code>checkbox<\/code>, <code>submit<\/code>, \u1793\u17b7\u1784 <code>reset<\/code>\u17d4<\/li>\n\n\n\n<li>\u1794\u1784\u17d2\u17a0\u17b6\u1789\u17a7\u1791\u17b6\u17a0\u179a\u178e\u17cd\u1793\u17c3\u1780\u17b6\u179a\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb input fields \u1791\u17b6\u17c6\u1784\u1793\u17c1\u17c7\u1780\u17d2\u1793\u17bb\u1784\u1791\u1798\u17d2\u179a\u1784\u17cb (form)\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 1.3<\/strong>\u17d6 Label \u1793\u17b7\u1784\u1780\u17b6\u179a\u1794\u1784\u17d2\u1780\u17be\u178f Structure \u179a\u1794\u179f\u17cb Form<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1799\u179b\u17cb\u17a2\u17c6\u1796\u17b8 <code>&lt;label><\/code> \u1793\u17b7\u1784\u1780\u17b6\u179a\u178a\u17b6\u1780\u17cb\u1796\u17b6\u1780\u17d2\u1799\u1794\u1789\u17d2\u1787\u17b6\u1780\u17cb\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb fields \u1795\u17d2\u179f\u17c1\u1784\u17d7\u17d4<\/li>\n\n\n\n<li>\u1794\u1784\u17d2\u17a0\u17b6\u1789\u1796\u17b8\u1794\u1785\u17d2\u1785\u17c1\u1780\u1791\u17c1\u179f\u1792\u17d2\u179c\u17be\u17b1\u17d2\u1799 form \u1784\u17b6\u1799\u1794\u17d2\u179a\u17be\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u17a2\u17d2\u1793\u1780\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 1.4<\/strong>\u17d6 Select Boxes \u1793\u17b7\u1784 Text Areas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u178e\u17c2\u1793\u17b6\u17c6\u17a2\u17c6\u1796\u17b8 <code>&lt;select><\/code>, <code>&lt;option><\/code>, \u1793\u17b7\u1784 <code>&lt;textarea><\/code> \u1793\u17b7\u1784\u1794\u1784\u17d2\u17a0\u17b6\u1789\u1796\u17b8\u179c\u17b7\u1792\u17b8\u1794\u1784\u17d2\u1780\u17be\u178f\u1794\u1789\u17d2\u1785\u17b8\u179a\u17b6\u1799\u1793\u17b6\u1798 \u1793\u17b7\u1784\u1794\u17d2\u179a\u17a2\u1794\u17cb\u178f\u17c2\u1798\u17d2\u178f\u1784\u17d4<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u1795\u17d2\u1793\u17c2\u1780\u1791\u17b8 2: CSS Styling \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb HTML Forms<\/h3>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 2.1<\/strong>\u17d6 \u1780\u17b6\u179a\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb CSS \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb Styling Basic Form Elements<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1780\u17b6\u179a\u178f\u1797\u17d2\u1787\u17b6\u1794\u17cb CSS file \u17ac <code>&lt;style><\/code> section \u1780\u17d2\u1793\u17bb\u1784 HTML document\u17d4<\/li>\n\n\n\n<li>\u179f\u17d2\u179c\u17c2\u1784\u1799\u179b\u17cb\u1796\u17b8\u179c\u17b7\u1792\u17b8\u1787\u17d2\u179a\u17be\u179f\u179a\u17be\u179f elements \u178a\u17bc\u1785\u1787\u17b6 input, label, \u1793\u17b7\u1784 button \u178a\u17be\u1798\u17d2\u1794\u17b8\u179a\u1785\u1793\u17b6\u179c\u17b6\u178a\u17c4\u1799\u1794\u17d2\u179a\u17be CSS properties (color, font, padding, margin)\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 2.2<\/strong>\u17d6 \u1780\u17b6\u179a\u179a\u1785\u1793\u17b6\u1794\u17c2\u1794 Layout \u1793\u17b7\u1784 Alignment<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1794\u1785\u17d2\u1785\u17c1\u1780\u1791\u17c1\u179f Flexbox \u1793\u17b7\u1784 Grid \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u179f\u17d2\u1791\u17b6\u1799\u179b\u17cd\u1787\u17b6\u179f\u17d2\u179a\u1791\u17b6\u1794\u17cb\u17b1\u17d2\u1799\u1792\u17d2\u179c\u17be\u17b1\u17d2\u1799 form elements \u1798\u17b6\u1793\u179a\u1785\u1793\u17b6\u1798\u17c9\u17bc\u178f\u1780\u17b6\u1793\u17cb\u178f\u17c2\u1784\u17b6\u1799\u1794\u17d2\u179a\u17be\u17d4<\/li>\n\n\n\n<li>\u1794\u1784\u17d2\u17a0\u17b6\u1789\u1796\u17b8\u179c\u17b7\u1792\u17b8\u178a\u17b6\u1780\u17cb\u179f\u17d2\u179a\u1791\u17b6\u1794\u17cb\u1795\u17d2\u1791\u17c3\u1798\u17bb\u1781\u17b1\u17d2\u1799\u179f\u17d2\u179a\u179f\u17cb\u179f\u17d2\u17a2\u17b6\u178f\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb form \u1787\u17b6\u1798\u17bd\u1799 CSS Grid \u1793\u17b7\u1784 Flexbox\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 2.3<\/strong>\u17d6 Form Validation Styling<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1780\u17b6\u179a\u1785\u17bc\u179b\u1785\u17b7\u178f\u17d2\u178f\u1793\u17b7\u1784\u179a\u1785\u1793\u17b6\u1798\u17c9\u17bc\u178f\u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb fields \u178a\u17c2\u179b\u178f\u17d2\u179a\u17bc\u179c\u1794\u17b6\u1793\u1794\u1789\u17d2\u1785\u17bc\u179b\u1791\u17b7\u1793\u17d2\u1793\u1793\u17d0\u1799\u1798\u17b7\u1793\u178f\u17d2\u179a\u17b9\u1798\u178f\u17d2\u179a\u17bc\u179c (error states) \u178a\u17bc\u1785\u1787\u17b6 border color, background color, \u1793\u17b7\u1784 error messages\u17d4<\/li>\n\n\n\n<li>\u17a7\u1791\u17b6\u17a0\u179a\u178e\u17cd\u1793\u17c3 CSS Pseudo-classes (<code>:focus<\/code>, <code>:hover<\/code>, <code>:invalid<\/code>, <code>:valid<\/code>) \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb\u179a\u1785\u1793\u17b6\u1798\u17c9\u17bc\u178f error messages\u17d4<\/li>\n<\/ul>\n\n\n\n<p><strong>\u1798\u17c1\u179a\u17c0\u1793\u1791\u17b8 2.4<\/strong>\u17d6 Responsive Design \u179f\u1798\u17d2\u179a\u17b6\u1794\u17cb HTML Forms<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1780\u17b6\u179a\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb Media Queries \u178a\u17be\u1798\u17d2\u1794\u17b8\u1792\u17b6\u1793\u17b6\u1790\u17b6 form \u17a2\u17b6\u1785\u1792\u17d2\u179c\u17be\u1780\u17b6\u179a\u1794\u1784\u17d2\u17a0\u17b6\u1789\u1794\u17b6\u1793\u179b\u17d2\u17a2\u1791\u17b6\u17c6\u1784\u179b\u17be Desktop \u1793\u17b7\u1784 Mobile\u17d4<\/li>\n\n\n\n<li>\u1794\u1785\u17d2\u1785\u17c1\u1780\u1791\u17c1\u179f\u1794\u1793\u17d2\u1790\u17c2\u1798\u1787\u17b6\u1780\u17b6\u179a\u1784\u17b6\u1799\u179f\u17d2\u179a\u17bd\u179b\u1794\u17d2\u179a\u17be\u1794\u17d2\u179a\u17b6\u179f\u17cb input fields \u1793\u17c5\u179b\u17be\u1791\u17bc\u179a\u179f\u17d0\u1796\u17d2\u1791\u178a\u17c3\u17d4<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u1780\u17b6\u179a\u1794\u1784\u17d2\u1780\u17be\u178f Structure \u179a\u1794\u179f\u17cb Form \u178a\u17be\u1798\u17d2\u1794\u17b8\u1792\u17d2\u179c\u17be\u17b1\u17d2\u1799 form \u1798\u17b6\u1793\u179f\u17d2\u179a\u17c1\u1785&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,75],"tags":[207,73],"class_list":["post-5344","post","type-post","status-publish","format-standard","hentry","category-html","category-web-design","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/5344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/comments?post=5344"}],"version-history":[{"count":1,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/5344\/revisions"}],"predecessor-version":[{"id":5345,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/5344\/revisions\/5345"}],"wp:attachment":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media?parent=5344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/categories?post=5344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/tags?post=5344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}