{"id":89983,"date":"2025-07-31T23:55:08","date_gmt":"2025-07-31T16:55:08","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=89983"},"modified":"2025-08-01T00:05:31","modified_gmt":"2025-07-31T17:05:31","slug":"form-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/","title":{"rendered":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Tong_quan_ve_Form_trong_Bootstrap\" >T\u1ed5ng quan v\u1ec1 Form trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Cac_nhom_thanh_phan_chinh_trong_Form_Bootstrap\" >C\u00e1c nh\u00f3m th\u00e0nh ph\u1ea7n ch\u00ednh trong Form Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Cac_cach_tuy_chinh_layout_form_voi_Bootstrap\" >C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh layout form v\u1edbi Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Trang_thai_dac_biet_cua_Form\" >Tr\u1ea1ng th\u00e1i \u0111\u1eb7c bi\u1ec7t c\u1ee7a Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Bai_tap_luyen_tap_su_dung_Form_Bootstrap_de_%E2%80%93_trung_binh_%E2%80%93_kho\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Form Bootstrap (d\u1ec5 &#8211; trung b\u00ecnh &#8211; kh\u00f3)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Mot_so_luu_y_khi_dung_Form_trong_du_an_thuc_te\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi d\u00f9ng Form trong d\u1ef1 \u00e1n th\u1ef1c t\u1ebf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Cau_hoi_thuong_gap_ve_form_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 form Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#Tong_Ket\" >T\u1ed5ng K\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n giao di\u1ec7n web, form l\u00e0 n\u01a1i ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u1ea5t, t\u1eeb vi\u1ec7c \u0111i\u1ec1n th\u00f4ng tin c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, t\u00ecm ki\u1ebfm \u0111\u1ebfn g\u1eedi ph\u1ea3n h\u1ed3i. Bootstrap c\u00f3 cung c\u1ea5p s\u1eb5n c\u00e1c component l\u00fd t\u01b0\u1edfng gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng c\u00e1c form chuy\u00ean nghi\u1ec7p, d\u1ec5 d\u00f9ng v\u00e0 ph\u1ea3n h\u1ed3i t\u1ed1t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n chi ti\u1ebft v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Form Bootstrap l\u00e0 g\u00ec? V\u00ec sao n\u00ean d\u00f9ng Bootstrap \u0111\u1ec3 t\u1ea1o form?<\/li>\n\n\n\n<li>C\u00e1c th\u00e0nh ph\u1ea7n form ph\u1ed5 bi\u1ebfn: input, select, checkbox, radio, textarea&#8230;<\/li>\n\n\n\n<li>C\u00e1ch t\u1ea1o layout form hi\u1ec7n \u0111\u1ea1i v\u1edbi responsive grid, form ngang, form inline<\/li>\n\n\n\n<li>G\u1ee3i \u00fd b\u00e0i t\u1eadp th\u1ef1c h\u00e0nh t\u1ea1o form Bootstrap t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-quan-v\u1ec1-form-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Tong_quan_ve_Form_trong_Bootstrap\"><\/span><strong>T\u1ed5ng quan v\u1ec1 Form trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u01a1-l\u01b0\u1ee3c-v\u1ec1-form-trong-thi\u1ebft-k\u1ebf-web\"><strong>S\u01a1 l\u01b0\u1ee3c v\u1ec1 form trong thi\u1ebft k\u1ebf web<\/strong><\/h3>\n\n\n\n<p>Form (bi\u1ec3u m\u1eabu) l\u00e0 m\u1ed9t trong nh\u1eefng ph\u1ea7n t\u1eed quan tr\u1ecdng v\u00e0 xu\u1ea5t hi\u1ec7n th\u01b0\u1eddng xuy\u00ean nh\u1ea5t trong b\u1ea5t k\u1ef3 website ho\u1eb7c \u1ee9ng d\u1ee5ng web n\u00e0o. Ch\u1ee9c n\u0103ng ch\u00ednh c\u1ee7a form l\u00e0 gi\u00fap ng\u01b0\u1eddi d\u00f9ng nh\u1eadp v\u00e0 g\u1eedi d\u1eef li\u1ec7u v\u1ec1 ph\u00eda h\u1ec7 th\u1ed1ng.<\/p>\n\n\n\n<p>Trong HTML, form th\u01b0\u1eddng \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng b\u1eb1ng c\u00e1c ph\u1ea7n t\u1eed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;input&gt;: \u00f4 nh\u1eadp li\u1ec7u (text, password, email, number, v.v.)<\/li>\n\n\n\n<li>&lt;textarea&gt;: v\u00f9ng nh\u1eadp n\u1ed9i dung d\u00e0i<\/li>\n\n\n\n<li>&lt;select&gt;: danh s\u00e1ch ch\u1ecdn (dropdown)<\/li>\n\n\n\n<li>&lt;button&gt;: n\u00fat b\u1ea5m g\u1eedi form ho\u1eb7c th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 form HTML thu\u1ea7n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form action=\"\/login\" method=\"post\"&gt;\n       &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;&lt;br&gt;\n       &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;&lt;br&gt;&lt;br&gt;\n    \n       &lt;label for=\"password\"&gt;M\u1eadt kh\u1ea9u:&lt;\/label&gt;&lt;br&gt;\n       &lt;input type=\"password\" id=\"password\" name=\"password\"&gt;&lt;br&gt;&lt;br&gt;\n    \n       &lt;button type=\"submit\"&gt;\u0110\u0103ng nh\u1eadp&lt;\/button&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"472\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-106.png\" alt=\"\" class=\"wp-image-89985\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-106.png 602w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-106-300x235.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-106-200x157.png 200w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p>Tuy nhi\u00ean, m\u1ed9t trong nh\u1eefng v\u1ea5n \u0111\u1ec1 l\u1edbn khi s\u1eed d\u1ee5ng form HTML thu\u1ea7n l\u00e0: giao di\u1ec7n v\u00e0 h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh kh\u00e1c nhau gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t v\u00e0 h\u1ec7 \u0111i\u1ec1u h\u00e0nh. V\u00ed d\u1ee5:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ki\u1ec3u d\u00e1ng input c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa Chrome v\u00e0 Firefox<\/li>\n\n\n\n<li>Kho\u1ea3ng c\u00e1ch, font ch\u1eef, k\u00edch th\u01b0\u1edbc input kh\u00f4ng \u0111\u1ed3ng \u0111\u1ec1u<\/li>\n\n\n\n<li>Kh\u00f4ng t\u1ef1 \u0111\u1ed9ng responsive tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/li>\n<\/ul>\n\n\n\n<p>Do \u0111\u00f3, trong th\u1ef1c t\u1ebf, form r\u1ea5t c\u1ea7n \u0111\u01b0\u1ee3c chu\u1ea9n h\u00f3a v\u00e0 thi\u1ebft k\u1ebf l\u1ea1i giao di\u1ec7n \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh \u0111\u1ed3ng nh\u1ea5t, th\u00e2n thi\u1ec7n v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-bootstrap-la-gi\"><strong>Form Bootstrap l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Form Bootstrap l\u00e0 t\u1eadp h\u1ee3p c\u00e1c class CSS \u0111\u01b0\u1ee3c Bootstrap cung c\u1ea5p s\u1eb5n \u0111\u1ec3 gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng form m\u1ed9t c\u00e1ch nhanh ch\u00f3ng. Thay v\u00ec ph\u1ea3i vi\u1ebft l\u1ea1i t\u1eebng d\u00f2ng CSS cho input, label, select&#8230;, b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam c\u00e1c class nh\u01b0 <strong><code>.form-control<\/code><\/strong>, <strong><code>.form-label<\/code><\/strong>, <strong><code>.form-select<\/code><\/strong>, <strong><code>.form-check<\/code><\/strong>,&#8230; l\u00e0 \u0111\u00e3 c\u00f3 m\u1ed9t giao di\u1ec7n chuy\u00ean nghi\u1ec7p, d\u1ec5 s\u1eed d\u1ee5ng v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>Vi\u1ec7c s\u1eed d\u1ee5ng Form Bootstrap s\u1ebd gi\u00fap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>X\u00e2y d\u1ef1ng giao di\u1ec7n nhanh ch\u00f3ng<\/li>\n\n\n\n<li>\u0110\u1ed3ng nh\u1ea5t phong c\u00e1ch gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t<\/li>\n\n\n\n<li>C\u00f3 s\u1eb5n responsive, d\u1ec5 d\u00e0ng v\u1edbi c\u00e1c thi\u1ebft b\u1ecb kh\u00e1c nhau<\/li>\n\n\n\n<li>T\u00f9y bi\u1ebfn linh ho\u1ea1t theo nhu c\u1ea7u d\u1ef1 \u00e1n<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 form \u0111\u0103ng nh\u1eadp x\u00e2y d\u1ef1ng b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleInputEmail1\" class=\"form-label\"&gt;Email address&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\"&gt;\n         &lt;div id=\"emailHelp\" class=\"form-text\"&gt;We'll never share your email with anyone else.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleInputPassword1\" class=\"form-label\"&gt;Password&lt;\/label&gt;\n         &lt;input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3 form-check\"&gt;\n         &lt;input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"&gt;\n         &lt;label class=\"form-check-label\" for=\"exampleCheck1\"&gt;Check me out&lt;\/label&gt;\n       &lt;\/div&gt;\n       &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"447\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107.png\" alt=\"\" class=\"wp-image-89986\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107-300x167.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107-640x357.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107-200x112.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-107-768x429.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-nhom-thanh-ph\u1ea7n-chinh-trong-form-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_nhom_thanh_phan_chinh_trong_Form_Bootstrap\"><\/span><strong>C\u00e1c nh\u00f3m th\u00e0nh ph\u1ea7n ch\u00ednh trong Form Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-control-cac-o-nh\u1eadp-c\u01a1-b\u1ea3n-lt-input-gt-lt-textarea-gt\"><strong>Form control \u2013 C\u00e1c \u00f4 nh\u1eadp c\u01a1 b\u1ea3n (&lt;input&gt;, &lt;textarea&gt;)<\/strong><\/h3>\n\n\n\n<p>Trong Bootstrap, c\u00e1c \u00f4 nh\u1eadp li\u1ec7u d\u1ea1ng v\u0103n b\u1ea3n nh\u01b0 &lt;input&gt; v\u00e0 &lt;textarea&gt; \u0111\u01b0\u1ee3c c\u1ea3i ti\u1ebfn v\u1edbi class <strong>.form-control<\/strong>. Ch\u1ec9 v\u1edbi class n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o ra c\u00e1c tr\u01b0\u1eddng nh\u1eadp d\u1eef li\u1ec7u r\u00f5 r\u00e0ng, \u0111\u1eb9p m\u1eaft, \u0111\u1ed3ng nh\u1ea5t v\u1ec1 giao di\u1ec7n v\u00e0 ph\u1ea3n h\u1ed3i ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleEmail\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"exampleEmail\" placeholder=\"name@example.com\"&gt;\n       &lt;\/div&gt;\n      \n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"exampleTextarea\" class=\"form-label\"&gt;N\u1ed9i dung&lt;\/label&gt;\n         &lt;textarea class=\"form-control\" id=\"exampleTextarea\" rows=\"3\"&gt;&lt;\/textarea&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"358\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108.png\" alt=\"\" class=\"wp-image-89988\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108-300x134.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108-640x286.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108-200x89.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-108-768x343.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc input<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 3 k\u00edch th\u01b0\u1edbc input bao g\u1ed3m <strong>.form-control-lg<\/strong> (\u00f4 nh\u1eadp l\u1edbn), <strong>.form-control-sm<\/strong> (\u00f4 nh\u1eadp nh\u1ecf) v\u00e0 k\u00edch th\u01b0\u1edbc m\u1eb7c \u0111\u1ecbnh n\u1ebfu kh\u00f4ng th\u00eam class:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;input class=\"form-control form-control-lg mb-3\" type=\"text\" placeholder=\"L\u1edbn\"&gt;\n       &lt;input class=\"form-control mb-3\" type=\"text\" placeholder=\"M\u1eb7c \u0111\u1ecbnh\"&gt;\n       &lt;input class=\"form-control form-control-sm\" type=\"text\" placeholder=\"Nh\u1ecf\"&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"288\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109.png\" alt=\"\" class=\"wp-image-89989\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109-300x108.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109-640x231.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109-200x72.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-109-768x277.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ghi ch\u00fa h\u01b0\u1edbng d\u1eabn d\u01b0\u1edbi input (Form text)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u00eam n\u1ed9i dung h\u01b0\u1edbng d\u1eabn cho ng\u01b0\u1eddi d\u00f9ng b\u1eb1ng <strong>.form-text<\/strong> k\u1ebft h\u1ee3p v\u1edbi <strong>aria-describedby<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"inputPassword\" class=\"form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"password\" id=\"inputPassword\" class=\"form-control\" aria-describedby=\"passwordHelp\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"passwordHelp\" class=\"form-text\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M\u1eadt kh\u1ea9u ph\u1ea3i t\u1eeb 8\u201320 k\u00fd t\u1ef1, bao g\u1ed3m ch\u1eef v\u00e0 s\u1ed1.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"201\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110.png\" alt=\"\" class=\"wp-image-89991\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110-300x75.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110-640x161.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110-200x50.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-110-768x193.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><em>L\u01b0u \u00fd, vi\u1ec7c s\u1eed d\u1ee5ng <\/em><strong><em>aria-describedby<\/em><\/strong><em> l\u00e0 \u0111\u1ec3 c\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn cho ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh.<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Input ch\u1ecdn file (File input)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi input ch\u1ecdn file, Bootstrap c\u0169ng c\u00f3 \u0111\u1ecbnh d\u1ea1ng l\u1ea1i, ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ecdn k\u00edch c\u1ee1 v\u1edbi <strong>.form-control-sm<\/strong> ho\u1eb7c <strong>.form-control-lg<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input <em>class<\/em>=\"form-control\" <em>type<\/em>=\"file\" <em>id<\/em>=\"formFile\"&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"138\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137.png\" alt=\"\" class=\"wp-image-90026\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137-300x52.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137-640x111.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137-200x35.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-137-768x133.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Input ch\u1ecdn m\u00e0u (Color input)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Trong Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng type=\u201ccolor\u201d k\u1ebft h\u1ee3p v\u1edbi <strong>.form-control-color<\/strong> \u0111\u1ec3 hi\u1ec3n th\u1ecb h\u1ed9p ch\u1ecdn m\u00e0u v\u1edbi k\u00edch th\u01b0\u1edbc h\u1ee3p l\u00fd:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input <em>type<\/em>=\"color\" <em>class<\/em>=\"form-control form-control-color\" <em>value<\/em>=\"#563d7c\" <em>title<\/em>=\"Ch\u1ecdn m\u00e0u\"&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"704\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-111.png\" alt=\"\" class=\"wp-image-89992\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-111.png 578w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-111-246x300.png 246w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-111-525x640.png 525w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-111-164x200.png 164w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-select-danh-sach-ch\u1ecdn-dropdown\"><strong>Select \u2013 Danh s\u00e1ch ch\u1ecdn (dropdown)<\/strong><\/h3>\n\n\n\n<p>Trong HTML thu\u1ea7n, ph\u1ea7n t\u1eed <code>&lt;select><\/code> \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o c\u00e1c menu l\u1ef1a ch\u1ecdn. Tuy nhi\u00ean, giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh c\u1ee7a &lt;select> th\u01b0\u1eddng kh\u00f4ng \u0111\u1ed3ng nh\u1ea5t gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t v\u00e0 kh\u00e1 kh\u00f3 \u0111\u1ec3 t\u00f9y bi\u1ebfn. Bootstrap cung c\u1ea5p class <strong><code>.form-select<\/code> <\/strong>\u0111\u1ec3 style l\u1ea1i ph\u1ea7n t\u1eed <code>&lt;select><\/code> m\u1ed9t c\u00e1ch \u0111\u1eb9p m\u1eaft, hi\u1ec7n \u0111\u1ea1i v\u00e0 d\u1ec5 d\u00f9ng h\u01a1n, trong khi v\u1eabn gi\u1eef nguy\u00ean ch\u1ee9c n\u0103ng m\u1eb7c \u0111\u1ecbnh c\u1ee7a HTML.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <a href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;select class=\"form-select\" aria-label=\"Ch\u1ecdn qu\u1ed1c gia\"&gt;\n         &lt;option selected&gt;Ch\u1ecdn qu\u1ed1c gia&lt;\/option&gt;\n         &lt;option value=\"vn\"&gt;Vi\u1ec7t Nam&lt;\/option&gt;\n         &lt;option value=\"us\"&gt;Hoa K\u1ef3&lt;\/option&gt;\n         &lt;option value=\"jp\"&gt;Nh\u1eadt B\u1ea3n&lt;\/option&gt;\n       &lt;\/select&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"155\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112.png\" alt=\"\" class=\"wp-image-89994\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112-640x124.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112-200x39.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-112-768x149.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"293\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113.png\" alt=\"\" class=\"wp-image-89995\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113-300x110.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113-640x235.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113-200x73.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-113-768x281.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc select<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Gi\u1ed1ng nh\u01b0 <strong>.form-control<\/strong>, Bootstrap c\u0169ng h\u1ed7 tr\u1ee3 3 k\u00edch th\u01b0\u1edbc cho select bao g\u1ed3m: <strong>.form-control-lg<\/strong> (\u00f4 nh\u1eadp l\u1edbn), <strong>.form-control-sm<\/strong> (\u00f4 nh\u1eadp nh\u1ecf) v\u00e0 k\u00edch th\u01b0\u1edbc m\u1eb7c \u0111\u1ecbnh n\u1ebfu kh\u00f4ng th\u00eam class:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;select class=\"form-select form-select-lg mb-3\"&gt;\n         &lt;option selected&gt;L\u1ef1a ch\u1ecdn l\u1edbn&lt;\/option&gt;\n       &lt;\/select&gt;\n      \n       &lt;select class=\"form-select mb-3\"&gt;\n         &lt;option selected&gt;L\u1ef1a ch\u1ecdn m\u1eb7c \u0111\u1ecbnh&lt;\/option&gt;\n       &lt;\/select&gt;\n      \n       &lt;select class=\"form-select form-select-sm\"&gt;\n         &lt;option selected&gt;L\u1ef1a ch\u1ecdn nh\u1ecf&lt;\/option&gt;\n       &lt;\/select&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"298\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114.png\" alt=\"\" class=\"wp-image-89996\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114-300x112.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114-640x238.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114-200x74.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-114-768x286.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-checkbox-va-radio-button\"><strong>Checkbox v\u00e0 Radio button<\/strong><\/h3>\n\n\n\n<p>Checkbox v\u00e0 Radio l\u00e0 nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0ng r\u1ea5t quan tr\u1ecdng trong form, gi\u00fap ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n l\u1ef1a ch\u1ecdn. Bootstrap cung c\u1ea5p class <strong>.form-check<\/strong> \u0111\u1ec3 t\u1ea1o giao di\u1ec7n checkbox v\u00e0 radio \u0111\u1ed3ng nh\u1ea5t, d\u1ec5 d\u00f9ng v\u00e0 \u0111\u1eb9p m\u1eaft h\u01a1n.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Button Bootstrap l\u00e0 g\u00ec? C\u00e1ch s\u1eed d\u1ee5ng Button v\u00e0 Button Group<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Checkbox c\u01a1 b\u1ea3n<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o m\u1ed9t checkbox c\u00f3 nh\u00e3n \u0111i k\u00e8m, s\u1eed d\u1ee5ng c\u1ea5u tr\u00fac sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"form-check\"&gt;\n         &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\"&gt;\n         &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\n           T\u00f4i \u0111\u1ed3ng \u00fd v\u1edbi \u0111i\u1ec1u kho\u1ea3n\n         &lt;\/label&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"164\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-115.png\" alt=\"\" class=\"wp-image-89997\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-115.png 528w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-115-300x93.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-115-200x62.png 200w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.form-check<\/strong>: bao b\u1ecdc to\u00e0n b\u1ed9 checkbox v\u00e0 label<\/li>\n\n\n\n<li><strong>.form-check-input<\/strong>: \u00e1p d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng cho input checkbox<\/li>\n\n\n\n<li><strong>.form-check-label<\/strong>: \u0111\u1ecbnh d\u1ea1ng cho nh\u00e3n<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"164\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-116.png\" alt=\"\" class=\"wp-image-89999\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-116.png 528w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-116-300x93.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-116-200x62.png 200w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Radio button c\u01a1 b\u1ea3n<\/strong><\/li>\n<\/ul>\n\n\n\n<p>T\u01b0\u01a1ng t\u1ef1 nh\u01b0 checkbox, radio c\u0169ng d\u00f9ng c\u1ea5u tr\u00fac .form-check:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"form-check\"&gt;\n         &lt;input class=\"form-check-input\" type=\"radio\" name=\"gender\" id=\"radioMale\" value=\"male\" checked&gt;\n         &lt;label class=\"form-check-label\" for=\"radioMale\"&gt;\n           Nam\n         &lt;\/label&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"form-check\"&gt;\n         &lt;input class=\"form-check-input\" type=\"radio\" name=\"gender\" id=\"radioFemale\" value=\"female\"&gt;\n         &lt;label class=\"form-check-label\" for=\"radioFemale\"&gt;\n           N\u1eef\n         &lt;\/label&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"186\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-117.png\" alt=\"\" class=\"wp-image-90000\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-117.png 366w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-117-300x152.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-117-200x102.png 200w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/figure>\n\n\n\n<p><em>L\u01b0u \u00fd, C\u00e1c radio c\u00f9ng <\/em><strong><em>name<\/em><\/strong><em> s\u1ebd thu\u1ed9c c\u00f9ng m\u1ed9t nh\u00f3m l\u1ef1a ch\u1ecdn.<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hi\u1ec3n th\u1ecb ngang (inline)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb checkbox ho\u1eb7c radio tr\u00ean c\u00f9ng m\u1ed9t d\u00f2ng, h\u00e3y th\u00eam class <strong>.form-check-inline<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"form-check form-check-inline\"&gt;\n         &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox1\" value=\"option1\"&gt;\n         &lt;label class=\"form-check-label\" for=\"inlineCheckbox1\"&gt;A&lt;\/label&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"form-check form-check-inline\"&gt;\n         &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox2\" value=\"option2\"&gt;\n         &lt;label class=\"form-check-label\" for=\"inlineCheckbox2\"&gt;B&lt;\/label&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"150\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-118.png\" alt=\"\" class=\"wp-image-90001\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-118.png 328w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-118-300x137.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-118-200x91.png 200w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-range-thanh-tr\u01b0\u1ee3t-ch\u1ecdn-gia-tr\u1ecb\"><strong>Range \u2013 Thanh tr\u01b0\u1ee3t ch\u1ecdn gi\u00e1 tr\u1ecb<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i c\u00e1c tr\u01b0\u1eddng nh\u1eadp li\u1ec7u quen thu\u1ed9c nh\u01b0 text hay select, \u0111\u00f4i khi b\u1ea1n c\u1ea7n m\u1ed9t c\u00e1ch tr\u1ef1c quan h\u01a1n \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn gi\u00e1 tr\u1ecb s\u1ed1, v\u00ed d\u1ee5 nh\u01b0 \u0111i\u1ec1u ch\u1ec9nh \u00e2m l\u01b0\u1ee3ng, \u0111\u00e1nh gi\u00e1 m\u1ee9c \u0111\u1ed9, ho\u1eb7c ch\u1ecdn kho\u1ea3ng gi\u00e1.<\/p>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 ph\u1ea7n t\u1eed <strong>&lt;input type=&#8221;range&#8221;&gt;<\/strong> v\u1edbi class <strong>.form-range<\/strong> \u0111\u1ec3 gi\u00fap b\u1ea1n t\u1ea1o ra thanh tr\u01b0\u1ee3t (slider) c\u00f3 giao di\u1ec7n \u0111\u1ed3ng nh\u1ea5t gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t, d\u1ec5 t\u00f9y ch\u1ec9nh v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"customRange1\" class=\"form-label\"&gt;Ch\u1ecdn m\u1ee9c \u0111\u1ed9&lt;\/label&gt;\n\n&lt;input type=\"range\" class=\"form-range\" id=\"customRange1\"&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"144\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119.png\" alt=\"\" class=\"wp-image-90002\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119-300x54.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119-640x116.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119-200x36.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-119-768x139.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, range s\u1ebd c\u00f3 gi\u00e1 tr\u1ecb t\u1eeb <strong>0 \u0111\u1ebfn 100<\/strong>, v\u1edbi b\u01b0\u1edbc nh\u1ea3y l\u00e0 <strong>1 \u0111\u01a1n v\u1ecb<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh gi\u1edbi h\u1ea1n min, max<\/strong><\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh ph\u1ea1m vi c\u1ee7a thanh tr\u01b0\u1ee3t b\u1eb1ng thu\u1ed9c t\u00ednh min v\u00e0 max:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;label for=\"customRange2\" class=\"form-label\"&gt;Ch\u1ecdn t\u1eeb 0 \u0111\u1ebfn 5&lt;\/label&gt;\n       &lt;input type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" id=\"customRange2\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f9y ch\u1ec9nh b\u01b0\u1edbc nh\u1ea3y (step)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>N\u1ebfu b\u1ea1n c\u1ea7n cho ph\u00e9p ch\u1ecdn gi\u00e1 tr\u1ecb kh\u00f4ng ph\u1ea3i s\u1ed1 nguy\u00ean (v\u00ed d\u1ee5 b\u01b0\u1edbc nh\u1ea3y l\u00e0 0.5), h\u00e3y d\u00f9ng step:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;label for=\"customRange3\" class=\"form-label\"&gt;Ch\u1ecdn t\u1eebng 0.5&lt;\/label&gt;\n       &lt;input type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" step=\"0.5\" id=\"customRange3\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-input-group-k\u1ebft-h\u1ee3p-label-va-input\"><strong>Input Group \u2013 K\u1ebft h\u1ee3p label v\u00e0 input<\/strong><\/h3>\n\n\n\n<p>Trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p, b\u1ea1n c\u1ea7n hi\u1ec3n th\u1ecb bi\u1ec3u t\u01b0\u1ee3ng, ti\u1ec1n t\u1ed1, h\u1eadu t\u1ed1 ho\u1eb7c n\u00fat b\u1ea5m \u0111i k\u00e8m v\u1edbi tr\u01b0\u1eddng nh\u1eadp, v\u00ed d\u1ee5 nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ti\u1ec1n t\u1ec7 (\u20ab, $)<\/li>\n\n\n\n<li>Username v\u1edbi ti\u1ec1n t\u1ed1 @<\/li>\n\n\n\n<li>Email v\u1edbi h\u1eadu t\u1ed1 @example.com<\/li>\n\n\n\n<li>N\u00fat g\u1eedi b\u00ean trong \u00f4 t\u00ecm ki\u1ebfm<\/li>\n<\/ul>\n\n\n\n<p>Thay v\u00ec vi\u1ebft HTML ph\u1ee9c t\u1ea1p, Bootstrap cung c\u1ea5p class<strong> .input-group<\/strong> gi\u00fap b\u1ea1n t\u1ea1o c\u00e1c input group \u0111\u1eb9p, nh\u1ea5t qu\u00e1n v\u00e0 d\u1ec5 t\u00f9y ch\u1ec9nh ch\u1ec9 v\u1edbi v\u00e0i d\u00f2ng code.<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"input-group mb-3\"&gt;\n         &lt;span class=\"input-group-text\"&gt;@&lt;\/span&gt;\n         &lt;input type=\"text\" class=\"form-control\" placeholder=\"T\u00ean ng\u01b0\u1eddi d\u00f9ng\"&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.input-group<\/strong>: bao to\u00e0n b\u1ed9 nh\u00f3m input<\/li>\n\n\n\n<li><strong>.input-group-text<\/strong>: ch\u1ee9a n\u1ed9i dung hi\u1ec3n th\u1ecb k\u00e8m (text, k\u00fd hi\u1ec7u)<\/li>\n\n\n\n<li><strong>.form-control<\/strong>: l\u00e0 input ch\u00ednh<\/li>\n<\/ul>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"151\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120.png\" alt=\"\" class=\"wp-image-90004\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120-300x57.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120-640x121.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120-200x38.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-120-768x145.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>G\u00e1n ti\u1ec1n t\u1ed1 v\u00e0 h\u1eadu t\u1ed1 cho input group<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Ti\u1ec1n t\u1ed1 --&gt;\n&lt;div class=\"input-group mb-3\"&gt;\n &lt;span class=\"input-group-text\"&gt;\u20ab&lt;\/span&gt;\n &lt;input type=\"text\" class=\"form-control\" placeholder=\"Gi\u00e1 s\u1ea3n ph\u1ea9m\"&gt;\n&lt;\/div&gt;\n\n\n&lt;!-- H\u1eadu t\u1ed1 --&gt;\n&lt;div class=\"input-group mb-3\"&gt;\n &lt;input type=\"text\" class=\"form-control\" placeholder=\"Email\"&gt;\n &lt;span class=\"input-group-text\"&gt;@example.com&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"212\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121.png\" alt=\"\" class=\"wp-image-90005\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121-300x80.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121-640x170.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121-200x53.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-121-768x204.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Input group v\u1edbi button<\/strong><\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p input + button v\u00e0o c\u00f9ng m\u1ed9t d\u00f2ng g\u1ecdn g\u00e0ng m\u00e0 kh\u00f4ng c\u1ea7n t\u1ef1 x\u1eed l\u00fd CSS, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"input-group mb-3\"&gt;\n         &lt;input type=\"text\" class=\"form-control\" placeholder=\"T\u1eeb kh\u00f3a t\u00ecm ki\u1ebfm\"&gt;\n         &lt;button class=\"btn btn-outline-secondary\" type=\"button\"&gt;T\u00ecm&lt;\/button&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"172\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122.png\" alt=\"\" class=\"wp-image-90006\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122-300x64.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122-640x137.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122-200x43.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-122-768x165.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-floating-labels-nhan-n\u1ed5i-ben-trong-input\"><strong>Floating Labels \u2013 Nh\u00e3n n\u1ed5i b\u00ean trong input<\/strong><\/h3>\n\n\n\n<p>Floating label (nh\u00e3n n\u1ed5i) l\u00e0 m\u1ed9t xu h\u01b0\u1edbng thi\u1ebft k\u1ebf hi\u1ec7n \u0111\u1ea1i, n\u01a1i nh\u00e3n c\u1ee7a tr\u01b0\u1eddng nh\u1eadp li\u1ec7u ban \u0111\u1ea7u hi\u1ec3n th\u1ecb b\u00ean trong input nh\u01b0 placeholder, v\u00e0 sau \u0111\u00f3 n\u1ed5i l\u00ean tr\u00ean khi ng\u01b0\u1eddi d\u00f9ng b\u1eaft \u0111\u1ea7u nh\u1eadp. Ki\u1ec3u thi\u1ebft k\u1ebf n\u00e0y gi\u00fap giao di\u1ec7n g\u1ecdn g\u00e0ng, chuy\u00ean nghi\u1ec7p h\u01a1n , v\u00e0 th\u01b0\u1eddng th\u1ea5y trong c\u00e1c \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng ho\u1eb7c h\u1ec7 th\u1ed1ng hi\u1ec7n \u0111\u1ea1i. Bootstrap h\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng n\u00e0y th\u00f4ng qua class <strong>.form-floating<\/strong>.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"form-floating mb-3\"&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"floatingEmail\" placeholder=\"name@example.com\"&gt;\n         &lt;label for=\"floatingEmail\"&gt;\u0110\u1ecba ch\u1ec9 email&lt;\/label&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"194\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123.png\" alt=\"\" class=\"wp-image-90007\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123-300x73.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123-640x155.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123-200x48.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-123-768x186.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>placeholder v\u1eabn c\u1ea7n khai b\u00e1o \u0111\u1ec3 label hi\u1ec3n th\u1ecb \u0111\u00fang v\u1ecb tr\u00ed ban \u0111\u1ea7u (d\u00f9 s\u1ebd b\u1ecb \u1ea9n khi label n\u1ed5i l\u00ean).<\/li>\n\n\n\n<li>Ph\u1ea7n t\u1eed &lt;label&gt; ph\u1ea3i n\u1eb1m sau input trong HTML.<\/li>\n<\/ul>\n\n\n\n<p>M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p th\u01b0\u1eddng d\u00f9ng<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Form \u0111\u0103ng nh\u1eadp (email, m\u1eadt kh\u1ea9u)<\/li>\n\n\n\n<li>Form \u0111\u0103ng k\u00fd th\u00f4ng tin<\/li>\n\n\n\n<li>Giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i c\u1ea7n ti\u1ebft ki\u1ec7m kh\u00f4ng gian hi\u1ec3n th\u1ecb<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cach-tuy-ch\u1ec9nh-layout-form-v\u1edbi-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cach_tuy_chinh_layout_form_voi_Bootstrap\"><\/span><strong>C\u00e1c c\u00e1ch t\u00f9y ch\u1ec9nh layout form v\u1edbi Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vi\u1ec7c t\u1ed5 ch\u1ee9c layout cho form \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong vi\u1ec7c t\u1ea1o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n. Bootstrap h\u1ed7 tr\u1ee3 nhi\u1ec1u c\u00e1ch d\u00e0n form ph\u00f9 h\u1ee3p v\u1edbi t\u1eebng t\u00ecnh hu\u1ed1ng c\u1ee5 th\u1ec3 d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-grid-form-t\u1ea1o-form-da-c\u1ed9t-tren-desktop-d\u01a1n-c\u1ed9t-tren-mobile\"><strong>Responsive Grid Form \u2013 T\u1ea1o form \u0111a c\u1ed9t tr\u00ean desktop, \u0111\u01a1n c\u1ed9t tr\u00ean mobile<\/strong><\/h3>\n\n\n\n<p>Trong c\u00e1c bi\u1ec3u m\u1eabu c\u00f3 nhi\u1ec1u tr\u01b0\u1eddng th\u00f4ng tin, vi\u1ec7c b\u1ed1 tr\u00ed form theo d\u1ea1ng l\u01b0\u1edbi (grid) gi\u00fap giao di\u1ec7n g\u1ecdn g\u00e0ng h\u01a1n tr\u00ean desktop, \u0111\u1ed3ng th\u1eddi v\u1eabn t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb m\u1ed9t c\u1ed9t tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng. \u0110\u00e2y l\u00e0 c\u00e1ch b\u1ed1 tr\u00ed ph\u1ed5 bi\u1ebfn v\u00e0 hi\u1ec7n \u0111\u1ea1i trong c\u00e1c h\u1ec7 th\u1ed1ng qu\u1ea3n tr\u1ecb, form \u0111\u0103ng k\u00fd, \u0111\u1eb7t h\u00e0ng\u2026<\/p>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o layout form c\u00f3 nhi\u1ec1u c\u1ed9t responsive, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng Grid bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng<strong> .row<\/strong> \u0111\u1ec3 t\u1ea1o d\u00f2ng m\u1edbi<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng <strong>.col-* <\/strong>ho\u1eb7c <strong>.col-md-*<\/strong>, <strong>.col-lg-*<\/strong> \u0111\u1ec3 chia c\u00e1c tr\u01b0\u1eddng th\u00e0nh nhi\u1ec1u c\u1ed9t<\/li>\n\n\n\n<li>Th\u00eam<strong> .g-*<\/strong> (<strong>gutter<\/strong>) \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;div class=\"row g-3\"&gt;\n       &lt;div class=\"col-md-6\"&gt;\n         &lt;label for=\"firstName\" class=\"form-label\"&gt;H\u1ecd&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"firstName\" placeholder=\"Nguy\u1ec5n\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-6\"&gt;\n         &lt;label for=\"lastName\" class=\"form-label\"&gt;T\u00ean&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"lastName\" placeholder=\"V\u0103n A\"&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5 c\u1ee5 th\u1ec3 v\u1ec1 form c\u00f3 responsive:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"row g-3\"&gt;\n       &lt;div class=\"col-md-6\"&gt;\n         &lt;label for=\"inputEmail4\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"inputEmail4\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-6\"&gt;\n         &lt;label for=\"inputPassword4\" class=\"form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\n         &lt;input type=\"password\" class=\"form-control\" id=\"inputPassword4\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;label for=\"inputAddress\" class=\"form-label\"&gt;\u0110\u1ecba ch\u1ec9&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"inputAddress\" placeholder=\"123 \u0110\u01b0\u1eddng ch\u00ednh\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;label for=\"inputAddress2\" class=\"form-label\"&gt;\u0110\u1ecba ch\u1ec9 b\u1ed5 sung&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"inputAddress2\" placeholder=\"C\u0103n h\u1ed9, s\u1ed1 t\u1ea7ng, to\u00e0 nh\u00e0...\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-6\"&gt;\n         &lt;label for=\"inputCity\" class=\"form-label\"&gt;Th\u00e0nh ph\u1ed1&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"inputCity\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-4\"&gt;\n         &lt;label for=\"inputState\" class=\"form-label\"&gt;T\u1ec9nh\/Th\u00e0nh&lt;\/label&gt;\n         &lt;select id=\"inputState\" class=\"form-select\"&gt;\n           &lt;option selected&gt;Ch\u1ecdn...&lt;\/option&gt;\n           &lt;option&gt;H\u00e0 N\u1ed9i&lt;\/option&gt;\n           &lt;option&gt;TP. HCM&lt;\/option&gt;\n         &lt;\/select&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-2\"&gt;\n         &lt;label for=\"inputZip\" class=\"form-label\"&gt;M\u00e3 b\u01b0u \u0111i\u1ec7n&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"inputZip\"&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;div class=\"form-check\"&gt;\n           &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"gridCheck\"&gt;\n           &lt;label class=\"form-check-label\" for=\"gridCheck\"&gt;\n             Ghi nh\u1edb th\u00f4ng tin\n           &lt;\/label&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;G\u1eedi&lt;\/button&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"445\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124.png\" alt=\"\" class=\"wp-image-90008\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124-300x167.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124-640x356.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124-200x111.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124-768x427.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-124-1536x853.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi d\u00f9ng form grid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lu\u00f4n \u0111\u1eb7t c\u00e1c nh\u00f3m input trong<strong> .row <\/strong>\u0111\u1ec3 Bootstrap nh\u1eadn bi\u1ebft d\u00f2ng m\u1edbi<\/li>\n\n\n\n<li>D\u00f9ng <strong>.mb-3<\/strong> ho\u1eb7c <strong>.g-*<\/strong> \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c tr\u01b0\u1eddng gi\u00fap giao di\u1ec7n tho\u00e1ng h\u01a1n<\/li>\n\n\n\n<li>D\u00f9ng<strong> .col-12<\/strong> n\u1ebfu mu\u1ed1n input chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u ngang d\u00f2ng<\/li>\n\n\n\n<li>\u01afu ti\u00ean <strong>.col-md-*, .col-lg-* <\/strong>\u0111\u1ec3 t\u1ea1o layout responsive hi\u1ec7u qu\u1ea3 tr\u00ean t\u1eebng lo\u1ea1i thi\u1ebft b\u1ecb<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <\/em><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Responsive trong bootstrap<\/strong><\/em><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-inline-form-form-trong-m\u1ed9t-dong\"><strong>Inline Form \u2013 Form trong m\u1ed9t d\u00f2ng<\/strong><\/h3>\n\n\n\n<p>Inline form ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c t\u00ecnh hu\u1ed1ng c\u1ea7n ti\u1ebft ki\u1ec7m kh\u00f4ng gian nh\u01b0 thanh t\u00ecm ki\u1ebfm, login nhanh \u1edf header, ho\u1eb7c c\u00e1c form \u0111\u01a1n gi\u1ea3n. \u0110\u1ec3 t\u1ea1o inline form, b\u1ea1n s\u1eed d\u1ee5ng class <strong>.row<\/strong> k\u1ebft h\u1ee3p v\u1edbi <strong>.row-cols-*<\/strong>, v\u00e0 c\u00e1c ti\u1ec7n t\u00edch c\u1ee7a <a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grid System<\/a> \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c ngang linh ho\u1ea1t theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"row row-cols-lg-auto g-3 align-items-center\"&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;label class=\"visually-hidden\" for=\"inlineFormInputGroupUsername\"&gt;Username&lt;\/label&gt;\n         &lt;div class=\"input-group\"&gt;\n           &lt;div class=\"input-group-text\"&gt;@&lt;\/div&gt;\n           &lt;input type=\"text\" class=\"form-control\" id=\"inlineFormInputGroupUsername\" placeholder=\"Username\"&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n    \n       &lt;div class=\"col-12\"&gt;\n         &lt;label class=\"visually-hidden\" for=\"inlineFormSelectPref\"&gt;Preference&lt;\/label&gt;\n         &lt;select class=\"form-select\" id=\"inlineFormSelectPref\"&gt;\n           &lt;option selected&gt;Choose...&lt;\/option&gt;\n           &lt;option value=\"1\"&gt;One&lt;\/option&gt;\n           &lt;option value=\"2\"&gt;Two&lt;\/option&gt;\n           &lt;option value=\"3\"&gt;Three&lt;\/option&gt;\n         &lt;\/select&gt;\n       &lt;\/div&gt;\n    \n       &lt;div class=\"col-12\"&gt;\n         &lt;div class=\"form-check\"&gt;\n           &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineFormCheck\"&gt;\n           &lt;label class=\"form-check-label\" for=\"inlineFormCheck\"&gt;\n             Remember me\n           &lt;\/label&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n    \n       &lt;div class=\"col-12\"&gt;\n         &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.row<\/strong>: K\u00edch ho\u1ea1t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi c\u1ee7a Bootstrap.<\/li>\n\n\n\n<li><strong>.row-cols-lg-auto<\/strong>: Chia c\u00e1c c\u1ed9t theo n\u1ed9i dung (auto width) tr\u00ean m\u00e0n h\u00ecnh l\u1edbn tr\u1edf l\u00ean (lg), gi\u00fap form tr\u00f4ng g\u1ecdn g\u00e0ng theo chi\u1ec1u ngang.<\/li>\n\n\n\n<li><strong>.g-3<\/strong>: T\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c c\u1ed9t v\u00e0 d\u00f2ng (c\u1ea3 ngang v\u00e0 d\u1ecdc).<\/li>\n\n\n\n<li><strong>.align-items-center<\/strong>: C\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed theo chi\u1ec1u d\u1ecdc, gi\u00fap checkbox v\u00e0 n\u00fat submit c\u00f9ng n\u1eb1m tr\u00ean m\u1ed9t h\u00e0ng v\u1edbi input.<\/li>\n\n\n\n<li><strong>.col-12<\/strong>: C\u1ed9t chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u ngang khi \u1edf m\u00e0n h\u00ecnh nh\u1ecf.<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"128\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125.png\" alt=\"\" class=\"wp-image-90009\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125-300x48.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125-640x102.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125-200x32.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-125-768x123.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-horizontal-form-label-va-input-n\u1eb1m-ngang\"><strong>Horizontal Form \u2013 Label v\u00e0 input n\u1eb1m ngang<\/strong><\/h3>\n\n\n\n<p>Form ngang (horizontal form) l\u00e0 ki\u1ec3u b\u1ed1 c\u1ee5c trong \u0111\u00f3 label v\u00e0 input \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng m\u1ed9t d\u00f2ng, thay v\u00ec x\u1ebfp ch\u1ed3ng l\u00ean nhau nh\u01b0 layout d\u1ecdc. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn ph\u00f9 h\u1ee3p khi b\u1ea1n mu\u1ed1n t\u1ed1i \u01b0u kh\u00f4ng gian chi\u1ec1u d\u1ecdc v\u00e0 gi\u00fap ng\u01b0\u1eddi d\u00f9ng \u0111\u1ecdc th\u00f4ng tin nhanh h\u01a1n. C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n \u0111\u1ec3 t\u1ea1o form ngang:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u1ecdc m\u1ed7i nh\u00f3m label + input trong m\u1ed9t class <strong>.row<\/strong><\/li>\n\n\n\n<li>G\u00e1n chi\u1ec1u r\u1ed9ng c\u1ee5 th\u1ec3 cho label v\u00e0 input b\u1eb1ng <strong>.col-sm-*<\/strong><\/li>\n\n\n\n<li>Th\u00eam <strong>.col-form-label<\/strong> v\u00e0o label \u0111\u1ec3 c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"row mb-3\"&gt;\n         &lt;label for=\"inputEmail3\" class=\"col-sm-3 col-form-label\"&gt;Email&lt;\/label&gt;\n         &lt;div class=\"col-sm-9\"&gt;\n           &lt;input type=\"email\" class=\"form-control\" id=\"inputEmail3\"&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"row mb-3\"&gt;\n         &lt;label for=\"inputPassword3\" class=\"col-sm-3 col-form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\n         &lt;div class=\"col-sm-9\"&gt;\n           &lt;input type=\"password\" class=\"form-control\" id=\"inputPassword3\"&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n Label chi\u1ebfm di\u1ec7n t\u00edch 3 c\u1ed9t, input chi\u1ebfm 9 c\u1ed9t<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdaMU30-C4nO5DxS6MhEl5kpijQUXEcxc4trD23Sj_etekv0czo00D3jbILJVVRltXCsdqH4JdPI1H_fQ9ntGDCtno6XiUwX-xlX9OD6U3sVPF49VJlX_TiD4VzpEUKwmqlxabi?key=JKqb9x_fNhDbdBfeWm_urw\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tu\u1ef3 ch\u1ec9nh k\u00edch th\u01b0\u1edbc label trong form ngang<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Khi b\u1ea1n s\u1eed d\u1ee5ng .<strong>form-control-sm<\/strong> ho\u1eb7c <strong>.form-control-lg <\/strong>\u0111\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc form, n\u00ean \u00e1p d\u1ee5ng t\u01b0\u01a1ng \u1ee9ng class <strong>.col-form-label-sm<\/strong> ho\u1eb7c <strong>.col-form-label-lg<\/strong> cho &lt;label&gt; \u0111\u1ec3 c\u0103n ch\u1ec9nh \u0111\u00fang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"row mb-3\"&gt;\n         &lt;label for=\"emailSm\" class=\"col-sm-2 col-form-label col-form-label-sm\"&gt;Email&lt;\/label&gt;\n         &lt;div class=\"col-sm-10\"&gt;\n           &lt;input type=\"email\" class=\"form-control form-control-sm\" id=\"emailSm\" placeholder=\"Nh\u1eadp email nh\u1ecf\"&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n      \n       &lt;div class=\"row mb-3\"&gt;\n         &lt;label for=\"emailLg\" class=\"col-sm-2 col-form-label col-form-label-lg\"&gt;Email&lt;\/label&gt;\n         &lt;div class=\"col-sm-10\"&gt;\n           &lt;input type=\"email\" class=\"form-control form-control-lg\" id=\"emailLg\" placeholder=\"Email l\u1edbn\"&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"254\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126.png\" alt=\"\" class=\"wp-image-90010\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126-300x95.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126-640x203.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126-200x63.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-126-768x244.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tr\u1ea1ng-thai-d\u1eb7c-bi\u1ec7t-c\u1ee7a-form\"><span class=\"ez-toc-section\" id=\"Trang_thai_dac_biet_cua_Form\"><\/span><strong>Tr\u1ea1ng th\u00e1i \u0111\u1eb7c bi\u1ec7t c\u1ee7a Form<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong th\u1ef1c t\u1ebf kh\u00f4ng ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 nh\u1eadp d\u1eef li\u1ec7u, m\u00e0 n\u00f3 c\u00f2n c\u1ea7n ph\u1ea3n h\u1ed3i l\u1ea1i ng\u01b0\u1eddi d\u00f9ng b\u1eb1ng c\u00e1ch hi\u1ec3n th\u1ecb tr\u1ea1ng th\u00e1i nh\u01b0 v\u00f4 hi\u1ec7u ho\u00e1 (disabled) ho\u1eb7c ki\u1ec3m tra h\u1ee3p l\u1ec7 (validation). Bootstrap h\u1ed7 tr\u1ee3 s\u1eb5n c\u00e1c class \u0111\u1ec3 gi\u00fap b\u1ea1n x\u1eed l\u00fd hai tr\u1ea1ng th\u00e1i ph\u1ed5 bi\u1ebfn n\u00e0y m\u1ed9t c\u00e1ch nhanh ch\u00f3ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-disabled-form-vo-hi\u1ec7u-hoa-toan-b\u1ed9-ho\u1eb7c-t\u1eebng-ph\u1ea7n\"><strong>Disabled Form \u2013 V\u00f4 hi\u1ec7u h\u00f3a to\u00e0n b\u1ed9 ho\u1eb7c t\u1eebng ph\u1ea7n<\/strong><\/h3>\n\n\n\n<p>Khi c\u1ea7n ng\u0103n ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi form (v\u00ed d\u1ee5: \u0111ang t\u1ea3i d\u1eef li\u1ec7u, ch\u01b0a \u0111\u1ee7 \u0111i\u1ec1u ki\u1ec7n, ch\u1ec9 hi\u1ec3n th\u1ecb \u0111\u1ec3 xem&#8230;), b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng thu\u1ed9c t\u00ednh disabled \u0111\u1ec3 v\u00f4 hi\u1ec7u h\u00f3a:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>V\u00f4 hi\u1ec7u ho\u00e1 to\u00e0n b\u1ed9 form b\u1eb1ng fieldset: <\/strong>\u0110\u00e2y l\u00e0 c\u00e1ch nhanh nh\u1ea5t \u0111\u1ec3 v\u00f4 hi\u1ec7u h\u00f3a t\u1ea5t c\u1ea3 c\u00e1c tr\u01b0\u1eddng trong form c\u00f9ng l\u00fac. Khi th\u00eam thu\u1ed9c t\u00ednh <strong>.disabled<\/strong> v\u00e0o th\u1ebb <strong>&lt;fieldset&gt;<\/strong>, to\u00e0n b\u1ed9 c\u00e1c tr\u01b0\u1eddng b\u00ean trong s\u1ebd kh\u00f4ng th\u1ec3 t\u01b0\u01a1ng t\u00e1c.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;fieldset disabled&gt;\n         &lt;div class=\"mb-3\"&gt;\n           &lt;label for=\"disabledTextInput\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n           &lt;input type=\"text\" id=\"disabledTextInput\" class=\"form-control\" placeholder=\"email@example.com\"&gt;\n         &lt;\/div&gt;\n         &lt;div class=\"mb-3\"&gt;\n           &lt;label for=\"disabledSelect\" class=\"form-label\"&gt;L\u1ef1a ch\u1ecdn&lt;\/label&gt;\n           &lt;select id=\"disabledSelect\" class=\"form-select\"&gt;\n             &lt;option&gt;Kh\u00f4ng th\u1ec3 ch\u1ecdn&lt;\/option&gt;\n           &lt;\/select&gt;\n         &lt;\/div&gt;\n         &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;G\u1eedi&lt;\/button&gt;\n       &lt;\/fieldset&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"355\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127.png\" alt=\"\" class=\"wp-image-90011\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127-300x133.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127-640x284.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127-200x89.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-127-768x341.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>V\u00f4 hi\u1ec7u ho\u00e1 t\u1eebng input c\u1ee5 th\u1ec3: <\/strong>S\u1eed d\u1ee5ng khi b\u1ea1n ch\u1ec9 mu\u1ed1n ng\u0103n ng\u01b0\u1eddi d\u00f9ng nh\u1eadp v\u00e0o m\u1ed9t v\u00e0i tr\u01b0\u1eddng nh\u1ea5t \u0111\u1ecbnh, v\u00ed d\u1ee5: c\u00e1c tr\u01b0\u1eddng ch\u1ec9 hi\u1ec3n th\u1ecb \u0111\u1ec3 \u0111\u1ecdc ho\u1eb7c b\u1ecb kh\u00f3a theo \u0111i\u1ec1u ki\u1ec7n n\u00e0o \u0111\u00f3.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"readonlyInput\" class=\"form-label\"&gt;T\u00ean ng\u01b0\u1eddi d\u00f9ng&lt;\/label&gt;\n         &lt;input type=\"text\" id=\"readonlyInput\" class=\"form-control\" value=\"nguyen van A\" disabled&gt;\n       &lt;\/div&gt;\n    \n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"selectRole\" class=\"form-label\"&gt;Vai tr\u00f2&lt;\/label&gt;\n         &lt;select id=\"selectRole\" class=\"form-select\" disabled&gt;\n           &lt;option selected&gt;Admin&lt;\/option&gt;\n           &lt;option&gt;Editor&lt;\/option&gt;\n           &lt;option&gt;Viewer&lt;\/option&gt;\n         &lt;\/select&gt;\n       &lt;\/div&gt;\n    \n       &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;G\u1eedi&lt;\/button&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"340\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138.png\" alt=\"\" class=\"wp-image-90031\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138-300x127.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138-640x272.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138-200x85.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-138-768x326.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-validation-ki\u1ec3m-tra-d\u1eef-li\u1ec7u-d\u1ea7u-vao\"><strong>Validation \u2013 Ki\u1ec3m tra d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb tr\u1ea1ng th\u00e1i h\u1ee3p l\u1ec7 (is-valid) v\u00e0 kh\u00f4ng h\u1ee3p l\u1ec7 (is-invalid) b\u1eb1ng CSS. B\u1ea1n c\u00f3 th\u1ec3 th\u00eam class n\u00e0y th\u1ee7 c\u00f4ng ho\u1eb7c k\u1ebft h\u1ee3p v\u1edbi JavaScript \u0111\u1ec3 ki\u1ec3m tra tr\u01b0\u1edbc khi submit.<\/p>\n\n\n\n<p>C\u00e1ch ho\u1ea1t \u0111\u1ed9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bootstrap d\u1ef1a tr\u00ean CSS pseudo-class :valid v\u00e0 :invalid \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng<\/li>\n\n\n\n<li>B\u1ea1n c\u1ea7n th\u00eam class <strong>.was-validated <\/strong>v\u00e0o th\u1ebb &lt;form&gt; sau khi ki\u1ec3m tra<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh required \u0111\u1ec3 b\u1eaft bu\u1ed9c nh\u1eadp d\u1eef li\u1ec7u<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 form c\u00f3 validation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"needs-validation\" novalidate&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"username\" class=\"form-label\"&gt;T\u00ean ng\u01b0\u1eddi d\u00f9ng&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"username\" required&gt;\n         &lt;div class=\"valid-feedback\"&gt;H\u1ee3p l\u1ec7!&lt;\/div&gt;\n         &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp t\u00ean ng\u01b0\u1eddi d\u00f9ng.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"email\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"email\" required&gt;\n         &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp \u0111\u1ecba ch\u1ec9 email h\u1ee3p l\u1ec7.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"form-check mb-3\"&gt;\n         &lt;input type=\"checkbox\" class=\"form-check-input\" id=\"termsCheck\" required&gt;\n         &lt;label class=\"form-check-label\" for=\"termsCheck\"&gt;T\u00f4i \u0111\u1ed3ng \u00fd \u0111i\u1ec1u kho\u1ea3n&lt;\/label&gt;\n         &lt;div class=\"invalid-feedback\"&gt;B\u1ea1n ph\u1ea3i \u0111\u1ed3ng \u00fd tr\u01b0\u1edbc khi g\u1eedi.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;button class=\"btn btn-primary\" type=\"submit\"&gt;G\u1eedi&lt;\/button&gt;\n     &lt;\/form&gt;\n     &lt;script&gt;\n       (() =&gt; {\n         const forms = document.querySelectorAll('.needs-validation');\n      \n         forms.forEach((form) =&gt; {\n           form.addEventListener('submit', (event) =&gt; {\n             if (!form.checkValidity()) {\n               event.preventDefault();\n               event.stopPropagation();\n             }\n      \n             form.classList.add('was-validated');\n           });\n         });\n       })();\n     &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Form bao g\u1ed3m class <strong>needs-validation <\/strong>\u0111\u1ec3 k\u00edch ho\u1ea1t validate v\u00e0 s\u1eed d\u1ee5ng <strong>.invalid-feedback<\/strong>, <strong>.valid-feedback <\/strong>\u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o<\/li>\n\n\n\n<li>Khi form b\u1ecb submit, JavaScript ki\u1ec3m tra t\u00ednh h\u1ee3p l\u1ec7 c\u1ee7a t\u1eebng tr\u01b0\u1eddng. N\u1ebfu c\u00f3 tr\u01b0\u1eddng kh\u00f4ng h\u1ee3p l\u1ec7, form s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c g\u1eedi v\u00e0 Bootstrap s\u1ebd hi\u1ec3n th\u1ecb feedback t\u01b0\u01a1ng \u1ee9ng<\/li>\n<\/ul>\n\n\n\n<p>Hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u01b0\u1edbc khi submit form<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128.png\" alt=\"\" class=\"wp-image-90012\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128-300x163.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128-640x347.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128-200x108.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-128-768x416.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sau khi submit v\u00e0 vi ph\u1ea1m validate<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"529\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129.png\" alt=\"\" class=\"wp-image-90014\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129-300x198.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129-640x423.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129-200x132.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-129-768x508.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Validate theo tr\u00ecnh duy\u1ec7t m\u1eb7c \u0111\u1ecbnh (kh\u00f4ng c\u1ea7n javascript)<\/strong><\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh required \u0111\u1ec3 y\u00eau c\u1ea7u kh\u00f4ng \u0111\u01b0\u1ee3c b\u1ecf tr\u1ed1ng input. N\u1ebfu \u0111\u1ec3 tr\u1ed1ng th\u00ec tr\u00ecnh duy\u1ec7t s\u1ebd hi\u1ec3n th\u1ecb l\u1ed7i theo giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;input type=\"text\" class=\"form-control\" required&gt;\n       &lt;button class=\"btn btn-primary mt-3\" type=\"submit\"&gt;G\u1eedi&lt;\/button&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"231\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130.png\" alt=\"\" class=\"wp-image-90015\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130-300x87.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130-640x185.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130-200x58.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-130-768x222.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Validation ph\u00eda server<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Khi th\u1ef1c hi\u1ec7n submit m\u1ed9t form, v\u00e0 nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i l\u1ed7i t\u1eeb ph\u00eda server, b\u1ea1n c\u00f3 th\u1ec3 g\u1eafn c\u00e1c class<strong> .is-valid<\/strong> ho\u1eb7c<strong> .is-invalid<\/strong> theo k\u1ebft qu\u1ea3 tr\u1ea3 v\u1ec1 t\u01b0\u01a1ng \u1ee9ng. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form&gt;\n       &lt;input type=\"text\" class=\"form-control is-invalid\" required&gt;\n       &lt;div class=\"invalid-feedback\"&gt;Tr\u01b0\u1eddng n\u00e0y kh\u00f4ng h\u1ee3p l\u1ec7.&lt;\/div&gt;\n       &lt;input type=\"text\" class=\"form-control is-valid\"&gt;\n       &lt;div class=\"valid-feedback\"&gt;Tr\u01b0\u1eddng n\u00e0y h\u1ee3p l\u1ec7.&lt;\/div&gt;\n       &lt;button class=\"btn btn-primary mt-3\" type=\"submit\"&gt;G\u1eedi&lt;\/button&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"331\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139.png\" alt=\"\" class=\"wp-image-90033\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139-300x124.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139-640x264.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139-200x83.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-139-768x317.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tooltip feedback<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u0110\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o d\u1ea1ng tooltip cho input, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng class <strong>.valid-tooltip<\/strong> (th\u00f4ng b\u00e1o h\u1ee3p l\u1ec7) v\u00e0 <strong>.invalid-tooltip<\/strong> (th\u00f4ng b\u00e1o kh\u00f4ng h\u1ee3p l\u1ec7).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"row g-3 needs-validation\" novalidate&gt;\n       &lt;div class=\"col-md-4 position-relative\"&gt;\n         &lt;label for=\"validationTooltip01\" class=\"form-label\"&gt;H\u1ecd&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"validationTooltip01\" value=\"Mark\" required&gt;\n         &lt;div class=\"valid-tooltip\"&gt;H\u1ee3p l\u1ec7&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-4 position-relative\"&gt;\n         &lt;label for=\"validationTooltip02\" class=\"form-label\"&gt;T\u00ean&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"validationTooltip02\" value=\"Otto\" required&gt;\n         &lt;div class=\"valid-tooltip\"&gt;H\u1ee3p l\u1ec7&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-6 position-relative\"&gt;\n         &lt;label for=\"validationTooltip03\" class=\"form-label\"&gt;Th\u00e0nh ph\u1ed1&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"validationTooltip03\" required&gt;\n         &lt;div class=\"invalid-tooltip\"&gt;Vui l\u00f2ng ch\u1ecdn th\u00e0nh ph\u1ed1&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-12\"&gt;\n         &lt;button class=\"btn btn-primary\" type=\"submit\"&gt;Submit&lt;\/button&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>L\u01b0u \u00fd, sau khi th\u1ef1c hi\u1ec7n ki\u1ec3m tra, c\u1ea7n thay \u0111\u1ed5i<strong> .needs-validation<\/strong> th\u00e0nh <strong>.was-validated <\/strong>\u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o l\u1ed7i.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"542\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131.png\" alt=\"\" class=\"wp-image-90016\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131-300x203.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131-640x434.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131-200x136.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-131-768x521.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><em>L\u01b0u \u00fd, Tooltip ch\u1ec9 hi\u1ec3n th\u1ecb ch\u00ednh x\u00e1c n\u1ebfu ph\u1ea7n t\u1eed cha c\u00f3 position: relative<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-form-bootstrap-d\u1ec5-trung-binh-kho\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_Form_Bootstrap_de_%E2%80%93_trung_binh_%E2%80%93_kho\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Form Bootstrap (d\u1ec5 &#8211; trung b\u00ecnh &#8211; kh\u00f3)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1-d\u1ec5-t\u1ea1o-form-dang-nh\u1eadp-d\u01a1n-gi\u1ea3n\"><strong>B\u00e0i t\u1eadp 1: (D\u1ec5) \u2013 T\u1ea1o Form \u0110\u0103ng nh\u1eadp \u0111\u01a1n gi\u1ea3n<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t form \u0111\u0103ng nh\u1eadp g\u1ed3m 2 tr\u01b0\u1eddng: Email v\u00e0 M\u1eadt kh\u1ea9u, c\u0103n gi\u1eefa form tr\u00ean m\u00e0n h\u00ecnh. H\u00ecnh \u1ea3nh minh h\u1ecda:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132.png\" alt=\"\" class=\"wp-image-90017\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132-300x183.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132-640x391.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132-200x122.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132-768x469.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-132-1536x938.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<p>S\u1eed d\u1ee5ng<strong> .form-control<\/strong> cho <strong>input<\/strong>, \u0111\u1eb7t trong th\u1ebb c\u00f3 class .<strong>card<\/strong> \u0111\u1ec3 d\u1ec5 nh\u00ecn. Sau \u0111\u00f3 \u0111\u1eb7t <strong>form<\/strong> trong th\u1ebb div c\u00f3 class <strong>.min-vh-100<\/strong> \u0111\u1ec3 chi\u1ebfm chi\u1ec1u cao to\u00e0n trang v\u00e0 .<strong>d-flex, .justify-content-center, .align-items-center<\/strong> c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;div class=\"container min-vh-100 d-flex justify-content-center align-items-center\"&gt;<br>       &lt;div class=\"card p-4 shadow\" style=\"width: 100%; max-width: 400px;\"&gt;<br>         &lt;h4 class=\"mb-3\"&gt;\u0110\u0103ng nh\u1eadp&lt;\/h4&gt;<br>         &lt;form&gt;<br>           &lt;div class=\"mb-3\"&gt;<br>             &lt;label for=\"loginEmail\" class=\"form-label\"&gt;Email&lt;\/label&gt;<br>             &lt;input type=\"email\" class=\"form-control\" id=\"loginEmail\" placeholder=\"name@example.com\"&gt;<br>           &lt;\/div&gt;<br>           &lt;div class=\"mb-3\"&gt;<br>             &lt;label for=\"loginPassword\" class=\"form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;<br>             &lt;input type=\"password\" class=\"form-control\" id=\"loginPassword\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\"&gt;<br>           &lt;\/div&gt;<br>           &lt;button type=\"submit\" class=\"btn btn-primary w-100\"&gt;\u0110\u0103ng nh\u1eadp&lt;\/button&gt;<br>         &lt;\/form&gt;<br>       &lt;\/div&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2-trung-binh-form-lien-h\u1ec7-co-ki\u1ec3m-tra-h\u1ee3p-l\u1ec7\"><strong>B\u00e0i t\u1eadp 2: (Trung b\u00ecnh) \u2013 Form li\u00ean h\u1ec7 c\u00f3 ki\u1ec3m tra h\u1ee3p l\u1ec7<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t form li\u00ean h\u1ec7 g\u1ed3m: H\u1ecd t\u00ean, Email, N\u1ed9i dung v\u00e0 Checkbox \u201cT\u00f4i \u0111\u1ed3ng \u00fd\u201d. Th\u00eam validate y\u00eau c\u1ea7u nh\u1eadp \u0111\u1ee7 th\u00f4ng tin tr\u01b0\u1edbc khi g\u1eedi. H\u00ecnh \u1ea3nh minh h\u1ecda:<\/p>\n\n\n\n<p>Tr\u01b0\u1edbc khi submit:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"605\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140.png\" alt=\"\" class=\"wp-image-90034\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140-300x227.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140-640x484.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140-200x151.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-140-768x581.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Sau khi submit:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"717\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141.png\" alt=\"\" class=\"wp-image-90035\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141-300x269.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141-640x574.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141-200x179.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-141-768x688.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng c\u00e1c l\u1edbp nh\u01b0 .form-label, .form-control \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng label v\u00e0 input.<\/li>\n\n\n\n<li>Th\u00eam thu\u1ed9c t\u00ednh required cho c\u00e1c input \u0111\u1ec3 r\u00e0ng bu\u1ed9c<\/li>\n\n\n\n<li>Th\u00eam <strong>.needs-validation <\/strong>\u0111\u1ec3 cho bi\u1ebft form c\u00f3 x\u1eed l\u00fd ki\u1ec3m tra v\u00e0 <strong>novalidate<\/strong> v\u00e0o &lt;form&gt;&nbsp; t\u1eaft tr\u00ecnh duy\u1ec7t ki\u1ec3m tra m\u1eb7c \u0111\u1ecbnh<\/li>\n\n\n\n<li>D\u00f9ng &lt;div class=&#8221;invalid-feedback&#8221;&gt;&#8230;&lt;\/div&gt; ngay sau input \u0111\u1ec3 hi\u1ec3n th\u1ecb khi d\u1eef li\u1ec7u kh\u00f4ng h\u1ee3p l\u1ec7<\/li>\n\n\n\n<li>Vi\u1ebft \u0111o\u1ea1n JavaScript x\u1eed l\u00fd validation<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"needs-validation\" novalidate&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"fullname\" class=\"form-label\"&gt;H\u1ecd t\u00ean&lt;\/label&gt;\n         &lt;input type=\"text\" class=\"form-control\" id=\"fullname\" required&gt;\n         &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp h\u1ecd t\u00ean.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"email\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n         &lt;input type=\"email\" class=\"form-control\" id=\"email\" required&gt;\n         &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp email h\u1ee3p l\u1ec7.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"mb-3\"&gt;\n         &lt;label for=\"message\" class=\"form-label\"&gt;N\u1ed9i dung&lt;\/label&gt;\n         &lt;textarea class=\"form-control\" id=\"message\" rows=\"3\" required&gt;&lt;\/textarea&gt;\n         &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp n\u1ed9i dung.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"form-check mb-3\"&gt;\n         &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"agree\" required&gt;\n         &lt;label class=\"form-check-label\" for=\"agree\"&gt;T\u00f4i \u0111\u1ed3ng \u00fd v\u1edbi \u0111i\u1ec1u kho\u1ea3n&lt;\/label&gt;\n         &lt;div class=\"invalid-feedback\"&gt;B\u1ea1n c\u1ea7n \u0111\u1ed3ng \u00fd tr\u01b0\u1edbc khi g\u1eedi.&lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;button class=\"btn btn-success\" type=\"submit\"&gt;G\u1eedi li\u00ean h\u1ec7&lt;\/button&gt;\n     &lt;\/form&gt;\n    \n     &lt;script&gt;\n     (() =&gt; {\n       const forms = document.querySelectorAll('.needs-validation');\n       forms.forEach((form) =&gt; {\n         form.addEventListener('submit', (event) =&gt; {\n           if (!form.checkValidity()) {\n             event.preventDefault();\n             event.stopPropagation();\n           }\n           form.classList.add('was-validated');\n         });\n       });\n     })();\n     &lt;\/script&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3-kho-t\u1ea1o-form-dang-ky-co-nhi\u1ec1u-c\u1ed9t-co-responsive-validate\"><strong>B\u00e0i t\u1eadp 3: (Kh\u00f3) \u2013 T\u1ea1o form \u0111\u0103ng k\u00fd c\u00f3 nhi\u1ec1u c\u1ed9t, c\u00f3 responsive, validate<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t form \u0111\u0103ng k\u00fd v\u1edbi c\u00e1c tr\u01b0\u1eddng: H\u1ecd (first name), T\u00ean (last name), Email, M\u1eadt kh\u1ea9u, Qu\u1ed1c gia (select).<\/p>\n\n\n\n<p>Y\u00eau c\u1ea7u v\u1ec1 giao di\u1ec7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsive: hi\u1ec3n th\u1ecb 2 c\u1ed9t tr\u00ean desktop, 1 c\u1ed9t tr\u00ean mobile<\/li>\n\n\n\n<li>C\u00f3 ki\u1ec3m tra h\u1ee3p l\u1ec7 v\u1edbi required, invalid-feedback<\/li>\n\n\n\n<li>L\u1ed7i ch\u1ec9 hi\u1ec3n th\u1ecb sau khi ng\u01b0\u1eddi d\u00f9ng b\u1ea5m n\u00fat G\u1eedi<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh \u1ea3nh minh ho\u1ea1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean m\u00e0n h\u00ecnh PC<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"482\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133.png\" alt=\"\" class=\"wp-image-90018\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133-300x181.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133-640x386.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133-200x121.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-133-768x463.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"616\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134.png\" alt=\"\" class=\"wp-image-90020\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134-300x231.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134-640x493.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134-200x154.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-134-768x592.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean m\u00e0n h\u00ecnh SP<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"605\" height=\"800\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135.png\" alt=\"\" class=\"wp-image-90021\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135.png 605w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135-227x300.png 227w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135-484x640.png 484w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135-151x200.png 151w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-135-768x1015.png 768w\" sizes=\"auto, (max-width: 605px) 100vw, 605px\" \/><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\"><\/ol>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng Bootstrap Grid (<strong>row, col-md-6<\/strong>) \u0111\u1ec3 chia c\u00e1c tr\u01b0\u1eddng th\u00e0nh 2 c\u1ed9t tr\u00ean desktop, 1 c\u1ed9t tr\u00ean mobile (t\u1ef1 \u0111\u1ed9ng responsive)<\/li>\n\n\n\n<li>Th\u00eam thu\u1ed9c t\u00ednh <strong>required<\/strong> v\u00e0o m\u1ed7i tr\u01b0\u1eddng \u0111\u1ec3 y\u00eau c\u1ea7u ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i nh\u1eadp ho\u1eb7c ch\u1ecdn gi\u00e1 tr\u1ecb<\/li>\n\n\n\n<li>Hi\u1ec3n th\u1ecb l\u1ed7i b\u1eb1ng<strong> .invalid-feedback<\/strong><\/li>\n\n\n\n<li>Th\u00eam class<strong> .needs-validation<\/strong> v\u00e0 thu\u1ed9c t\u00ednh <strong>novalidate<\/strong> v\u00e0o form<\/li>\n\n\n\n<li>D\u00f9ng JavaScript \u0111\u1ec3 ki\u1ec3m tra t\u00ednh h\u1ee3p l\u1ec7 khi ng\u01b0\u1eddi d\u00f9ng b\u1ea5m submit. N\u1ebfu c\u00f3 l\u1ed7i, form kh\u00f4ng g\u1eedi v\u00e0 hi\u1ec3n th\u1ecb l\u1ed7i.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;form class=\"needs-validation\" novalidate&gt;\n       &lt;div class=\"row g-3\"&gt;\n         &lt;div class=\"col-md-6\"&gt;\n           &lt;label for=\"firstName\" class=\"form-label\"&gt;H\u1ecd&lt;\/label&gt;\n           &lt;input type=\"text\" class=\"form-control\" id=\"firstName\" required&gt;\n           &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp h\u1ecd.&lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;div class=\"col-md-6\"&gt;\n           &lt;label for=\"lastName\" class=\"form-label\"&gt;T\u00ean&lt;\/label&gt;\n           &lt;input type=\"text\" class=\"form-control\" id=\"lastName\" required&gt;\n           &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp t\u00ean.&lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;div class=\"col-md-6\"&gt;\n           &lt;label for=\"registerEmail\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n           &lt;input type=\"email\" class=\"form-control\" id=\"registerEmail\" required&gt;\n           &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng nh\u1eadp email h\u1ee3p l\u1ec7.&lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;div class=\"col-md-6\"&gt;\n           &lt;label for=\"registerPassword\" class=\"form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\n           &lt;input type=\"password\" class=\"form-control\" id=\"registerPassword\" required minlength=\"6\"&gt;\n           &lt;div class=\"invalid-feedback\"&gt;M\u1eadt kh\u1ea9u ph\u1ea3i c\u00f3 \u00edt nh\u1ea5t 6 k\u00fd t\u1ef1.&lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;div class=\"col-12\"&gt;\n           &lt;label for=\"country\" class=\"form-label\"&gt;Qu\u1ed1c gia&lt;\/label&gt;\n           &lt;select class=\"form-select\" id=\"country\" required&gt;\n             &lt;option selected disabled value=\"\"&gt;Ch\u1ecdn qu\u1ed1c gia&lt;\/option&gt;\n             &lt;option&gt;Vi\u1ec7t Nam&lt;\/option&gt;\n             &lt;option&gt;Nh\u1eadt B\u1ea3n&lt;\/option&gt;\n             &lt;option&gt;Hoa K\u1ef3&lt;\/option&gt;\n           &lt;\/select&gt;\n           &lt;div class=\"invalid-feedback\"&gt;Vui l\u00f2ng ch\u1ecdn qu\u1ed1c gia.&lt;\/div&gt;\n         &lt;\/div&gt;\n    \n         &lt;div class=\"col-12\"&gt;\n           &lt;button class=\"btn btn-primary\" type=\"submit\"&gt;\u0110\u0103ng k\u00fd&lt;\/button&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/form&gt;\n    \n     &lt;script&gt;\n     (() =&gt; {\n       const forms = document.querySelectorAll('.needs-validation');\n    \n       forms.forEach((form) =&gt; {\n         form.addEventListener('submit', (event) =&gt; {\n           if (!form.checkValidity()) {\n             event.preventDefault();\n             event.stopPropagation();\n           }\n           form.classList.add('was-validated');\n         });\n       });\n     })();\n     &lt;\/script&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u01b0u-y-khi-dung-form-trong-d\u1ef1-an-th\u1ef1c-t\u1ebf\"><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_dung_Form_trong_du_an_thuc_te\"><\/span><strong>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi d\u00f9ng Form trong d\u1ef1 \u00e1n th\u1ef1c t\u1ebf<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Bootstrap \u0111\u00e3 cung c\u1ea5p s\u1eb5n r\u1ea5t nhi\u1ec1u c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 x\u00e2y d\u1ef1ng form nhanh ch\u00f3ng, nh\u01b0ng trong th\u1ef1c t\u1ebf d\u1ef1 \u00e1n, vi\u1ec7c s\u1eed d\u1ee5ng form \u0111\u00f2i h\u1ecfi nhi\u1ec1u h\u01a1n th\u1ebf. T\u1eeb c\u00e1ch x\u1eed l\u00fd validation, tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ebfn b\u1ea3o m\u1eadt v\u00e0 kh\u1ea3 n\u0103ng truy c\u1eadp, t\u1ea5t c\u1ea3 \u0111\u1ec1u \u1ea3nh h\u01b0\u1edfng tr\u1ef1c ti\u1ebfp \u0111\u1ebfn hi\u1ec7u qu\u1ea3 s\u1eed d\u1ee5ng c\u1ee7a form.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng form v\u1eeba chuy\u00ean nghi\u1ec7p, v\u1eeba th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng trong c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lu\u00f4n ki\u1ec3m tra d\u1eef li\u1ec7u ph\u00eda client v\u00e0 server:<\/strong> Validation ph\u00eda client (HTML5 + Bootstrap) gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng b\u1eb1ng c\u00e1ch hi\u1ec3n th\u1ecb l\u1ed7i s\u1edbm. Tuy nhi\u00ean, validation ph\u00eda server v\u1eabn b\u1eaft bu\u1ed9c, v\u00ec ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 v\u00f4 hi\u1ec7u h\u00f3a JavaScript ho\u1eb7c g\u1eedi request th\u1ee7 c\u00f4ng.<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh name cho t\u1ea5t c\u1ea3 c\u00e1c input:<\/strong> D\u00f9 b\u1ea1n d\u00f9ng id \u0111\u1ec3 hi\u1ec3n th\u1ecb\/validate, nh\u01b0ng thu\u1ed9c t\u00ednh name l\u00e0 b\u1eaft bu\u1ed9c \u0111\u1ec3 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c g\u1eedi \u0111i trong form. V\u00ed d\u1ee5:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&lt;input <em>type<\/em>=\"text\" <em>id<\/em>=\"email\" <em>name<\/em>=\"email\" <em>required<\/em>&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tr\u00e1nh disabled n\u1ebfu c\u1ea7n g\u1eedi d\u1eef li\u1ec7u:<\/strong> C\u00e1c tr\u01b0\u1eddng <strong>disabled<\/strong> s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c g\u1eedi khi submit, k\u1ec3 c\u1ea3 c\u00f3 name. N\u1ebfu b\u1ea1n c\u1ea7n ch\u1ec9 \u0111\u1ecdc m\u00e0 v\u1eabn g\u1eedi d\u1eef li\u1ec7u, d\u00f9ng <strong>readonly<\/strong> thay v\u00ec <strong>disabled<\/strong>.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" class=\"form-control\" value=\"Kh\u00f4ng th\u1ec3 ch\u1ec9nh s\u1eeda\" disabled&gt;\n&lt;input type=\"text\" class=\"form-control\" value=\"Ch\u1ec9 \u0111\u1ecdc \u0111\u01b0\u1ee3c th\u00f4i\" readonly&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u1ed1i \u01b0u UX cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng:<\/strong> S\u1eed d\u1ee5ng grid responsive (<strong>col-md-6, col-12<\/strong>, v.v.) \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh layout. \u0110\u1ea3m b\u1ea3o form hi\u1ec3n th\u1ecb \u0111\u1eb9p, d\u1ec5 b\u1ea5m, d\u1ec5 nh\u1eadp tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf.<\/li>\n\n\n\n<li><strong>T\u1ed1i \u01b0u accessibility (kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn):<\/strong> Lu\u00f4n g\u1eafn label v\u1edbi input b\u1eb1ng for v\u00e0 id, h\u1ea1n ch\u1ebf d\u00f9ng placeholder l\u00e0m label duy nh\u1ea5t (n\u00ean c\u00f3 label r\u00f5 r\u00e0ng).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-form-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_form_Bootstrap\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 form Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-hi\u1ec3n-th\u1ecb-icon-trong-input-c\u1ee7a-form\"><strong>L\u00e0m sao hi\u1ec3n th\u1ecb icon trong input c\u1ee7a form?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng <strong>.input-group<\/strong> k\u1ebft h\u1ee3p v\u1edbi <strong>.input-group-text<\/strong> \u0111\u1ec3 ch\u00e8n icon (d\u00f9ng Font Awesome, Bootstrap Icons ho\u1eb7c SVG). V\u00ed d\u1ee5 s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p Bootstrap icons v\u00e0 input:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"input-group mb-3\"&gt;\n         &lt;span class=\"input-group-text\"&gt;&lt;i class=\"bi bi-person\"&gt;&lt;\/i&gt;&lt;\/span&gt;\n         &lt;input type=\"text\" class=\"form-control\" placeholder=\"T\u00ean \u0111\u0103ng nh\u1eadp\"&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"156\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142.png\" alt=\"\" class=\"wp-image-90038\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142-640x124.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142-200x39.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-142-768x149.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-validation-bootstrap-co-c\u1ea7n-dung-javascript-khong\"><strong>Form validation Bootstrap c\u00f3 c\u1ea7n d\u00f9ng JavaScript kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu anh mu\u1ed1n ki\u1ec3m so\u00e1t vi\u1ec7c hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o l\u1ed7i, ng\u0103n g\u1eedi form khi d\u1eef li\u1ec7u kh\u00f4ng h\u1ee3p l\u1ec7, v\u00e0 d\u00f9ng class<strong> .was-validated <\/strong>th\u00ec b\u1ea1n c\u1ea7n d\u00f9ng JavaScript \u0111\u1ec3 th\u1ef1c hi\u1ec7n ki\u1ec3m tra d\u1eef li\u1ec7u v\u00e0 hi\u1ec3n th\u1ecb l\u1ed7i. N\u1ebfu kh\u00f4ng s\u1eed d\u1ee5ng JavaScript, validation s\u1ebd \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t theo ch\u1ebf \u0111\u1ed9 m\u1eb7c \u0111\u1ecbnh c\u1ee7a browser.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 code JavaScript \u0111\u1ec3 k\u00edch ho\u1ea1t validate c\u1ee7a Form Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;script&gt;\n       (() =&gt; {\n         const forms = document.querySelectorAll('.needs-validation');\n         forms.forEach((form) =&gt; {\n           form.addEventListener('submit', (event) =&gt; {\n             if (!form.checkValidity()) {\n               event.preventDefault();\n               event.stopPropagation();\n             }\n             form.classList.add('was-validated');\n           });\n         });\n       })();\n     &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-floating-label-co-dung-d\u01b0\u1ee3c-v\u1edbi-textarea-khong\"><strong>Floating label c\u00f3 d\u00f9ng \u0111\u01b0\u1ee3c v\u1edbi textarea kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>T\u1eeb Bootstrap 5.2 tr\u1edf \u0111i, <strong>floating-label<\/strong> ho\u1ea1t \u0111\u1ed9ng t\u1ed1t v\u1edbi &lt;textarea&gt; n\u1ebfu b\u1ea1n \u0111\u1ea3m b\u1ea3o textarea c\u00f3 thu\u1ed9c t\u00ednh placeholder (ngay c\u1ea3 khi n\u00f3 tr\u1ed1ng).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>     &lt;div class=\"form-floating\"&gt;\n       &lt;textarea class=\"form-control\" placeholder=\" \" id=\"floatingTextarea\"&gt;&lt;\/textarea&gt;\n       &lt;label for=\"floatingTextarea\"&gt;N\u1ed9i dung&lt;\/label&gt;\n     &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"170\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143.png\" alt=\"\" class=\"wp-image-90040\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143-300x64.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143-640x136.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143-200x42.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-143-768x163.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_Ket\"><\/span><strong>T\u1ed5ng K\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Form trong Bootstrap, v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea5u t\u1ea1o n\u00ean n\u00f3 l\u00e0 c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean x\u00e2y d\u1ef1ng giao di\u1ec7n nh\u1eadp li\u1ec7u chuy\u00ean nghi\u1ec7p, d\u1ec5 s\u1eed d\u1ee5ng v\u00e0 \u0111\u1ed3ng b\u1ed9 v\u1edbi to\u00e0n b\u1ed9 thi\u1ebft k\u1ebf website. Nh\u1edd s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng l\u01b0\u1edbi linh ho\u1ea1t, class ti\u1ec7n l\u1ee3i c\u00f9ng kh\u1ea3 n\u0103ng tu\u1ef3 bi\u1ebfn cao, form Bootstrap ph\u00f9 h\u1ee3p v\u1edbi h\u1ea7u h\u1ebft c\u00e1c nhu c\u1ea7u t\u1eeb \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn ph\u1ee9c t\u1ea1p.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch t\u1ea1o, b\u1ed1 c\u1ee5c, x\u1eed l\u00fd tr\u1ea1ng th\u00e1i v\u00e0 ki\u1ec3m tra d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o v\u1edbi Form trong Bootstrap \u0111\u1ec3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o d\u1ef1 \u00e1n th\u1ef1c t\u1ebf c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n giao di\u1ec7n web, form l\u00e0 n\u01a1i ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u1ea5t, t\u1eeb vi\u1ec7c \u0111i\u1ec1n th\u00f4ng tin c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, t\u00ecm ki\u1ebfm \u0111\u1ebfn g\u1eedi ph\u1ea3n h\u1ed3i. Bootstrap c\u00f3 cung c\u1ea5p s\u1eb5n c\u00e1c component l\u00fd t\u01b0\u1edfng gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng c\u00e1c form chuy\u00ean nghi\u1ec7p, d\u1ec5 d\u00f9ng v\u00e0 ph\u1ea3n h\u1ed3i t\u1ed1t tr\u00ean [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":90303,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-89983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1c th\u00e0nh ph\u1ea7n form Bootstrap v\u00e0 chi ti\u1ebft c\u00e1ch t\u1ea1o form v\u1edbi responsive grid, form ngang, form inline, validation,... k\u00e8m v\u00ed d\u1ee5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao\" \/>\n<meta property=\"og:description\" content=\"Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n giao di\u1ec7n web, form l\u00e0 n\u01a1i ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u1ea5t, t\u1eeb vi\u1ec7c \u0111i\u1ec1n th\u00f4ng tin c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, t\u00ecm ki\u1ebfm \u0111\u1ebfn g\u1eedi ph\u1ea3n h\u1ed3i.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-31T16:55:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T17:05:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1c th\u00e0nh ph\u1ea7n form Bootstrap v\u00e0 chi ti\u1ebft c\u00e1ch t\u1ea1o form v\u1edbi responsive grid, form ngang, form inline, validation,... k\u00e8m v\u00ed d\u1ee5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","og_description":"Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n giao di\u1ec7n web, form l\u00e0 n\u01a1i ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nhi\u1ec1u nh\u1ea5t, t\u1eeb vi\u1ec7c \u0111i\u1ec1n th\u00f4ng tin c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, t\u00ecm ki\u1ebfm \u0111\u1ebfn g\u1eedi ph\u1ea3n h\u1ed3i.","og_url":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-31T16:55:08+00:00","article_modified_time":"2025-07-31T17:05:31+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"26 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","datePublished":"2025-07-31T16:55:08+00:00","dateModified":"2025-07-31T17:05:31+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/"},"wordCount":4938,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/","name":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png","datePublished":"2025-07-31T16:55:08+00:00","dateModified":"2025-07-31T17:05:31+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1c th\u00e0nh ph\u1ea7n form Bootstrap v\u00e0 chi ti\u1ebft c\u00e1ch t\u1ea1o form v\u1edbi responsive grid, form ngang, form inline, validation,... k\u00e8m v\u00ed d\u1ee5.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/form-bootstrap-scaled.png","width":800,"height":421,"caption":"form bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/form-bootstrap-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Form Bootstrap l\u00e0 g\u00ec: Th\u1ef1c h\u00e0nh t\u1ea1o form t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=89983"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89983\/revisions"}],"predecessor-version":[{"id":90306,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89983\/revisions\/90306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/90303"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=89983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=89983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=89983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}