{"id":42383,"date":"2026-06-29T09:48:46","date_gmt":"2026-06-29T02:48:46","guid":{"rendered":"https:\/\/interdata.vn\/blog\/?p=42383"},"modified":"2026-06-29T09:48:46","modified_gmt":"2026-06-29T02:48:46","slug":"the-input-trong-html","status":"publish","type":"post","link":"https:\/\/interdata.vn\/blog\/the-input-trong-html\/","title":{"rendered":"Th\u1ebb Input Trong HTML: T\u1ed5ng H\u1ee3p Type V\u00e0 V\u00ed D\u1ee5 Form \u0110\u1eb9p"},"content":{"rendered":"\n\n<style>\n.interdata-plan-carousel,.interdata-plan-carousel *{box-sizing:border-box}\n.interdata-plan-carousel{--blue:#005bea;--blue-dark:#004dcc;--text:#071832;--muted:#516173;--border:#d8e6fb;--bg:#f3f8ff;--shadow:0 5px 14px rgba(0,62,145,.08);container-type:inline-size;background:var(--bg);padding:14px 40px 18px;position:relative;overflow:hidden}\n.interdata-carousel-heading{color:#f00;font-family:Roboto,sans-serif;font-size:18px;line-height:1.35;font-weight:800;text-align:center;margin:0 0 14px}\n.interdata-plan-viewport{overflow:hidden;width:100%}\n.interdata-plan-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 0 4px}\n.interdata-plan-track::-webkit-scrollbar{display:none}\n.interdata-plan-card{flex:0 0 calc((100% - 36px)\/4);min-width:0;background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px 10px 13px;min-height:370px;display:flex;flex-direction:column;scroll-snap-align:start;box-shadow:var(--shadow)}\n.interdata-plan-title{color:var(--blue-dark);font-size:16px;line-height:1.22;font-weight:800;text-align:center;margin:0 0 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.interdata-plan-price{color:var(--blue-dark);font-size:24px;line-height:1;font-weight:900;text-align:center;margin-bottom:12px;white-space:nowrap;letter-spacing:0}\n.interdata-plan-price span{font-size:10px;font-weight:800;margin-left:2px}\n.interdata-plan-badge{align-self:center;display:inline-flex;align-items:center;justify-content:center;background:#ff3934;color:#fff;border-radius:5px;padding:7px 8px;font-size:9px;line-height:1;font-weight:800;margin-bottom:15px;white-space:nowrap;max-width:100%}\n.interdata-plan-features{list-style:none!important;padding:0!important;margin:0!important}\n.interdata-plan-features li{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:12px;line-height:1.35;font-weight:700;text-align:left;margin:0 0 10px!important;padding:0!important}\n.interdata-plan-icon{width:14px;min-width:14px;height:14px;color:#0069ff;margin-top:2px}\n.interdata-plan-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n.interdata-plan-spacer{flex:1;min-height:16px}\n.interdata-plan-button{display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;background:var(--blue);color:#fff!important;border-radius:5px;font-size:13px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 14px rgba(0,91,234,.24);transition:transform .2s ease,background .2s ease}\n.interdata-plan-button:hover{background:var(--blue-dark);color:#fff!important;transform:translateY(-1px)}\n.interdata-carousel-arrow{position:absolute;top:50%;z-index:5;width:44px;height:54px;border:2px solid #fff!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,62,145,.32);display:flex!important;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-35%);transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}\n.interdata-carousel-arrow:hover{background:var(--blue-dark)!important;color:#fff!important;transform:translateY(-35%) scale(1.04)}\n.interdata-carousel-arrow:disabled{opacity:.78;cursor:not-allowed;background:#8aa6cf!important;color:#fff!important}\n.interdata-carousel-arrow:disabled:hover{background:#8aa6cf!important;color:#fff!important;transform:translateY(-35%)}\n.interdata-carousel-arrow svg{display:none!important}\n.interdata-carousel-arrow:before{content:none!important;display:none!important}\n.interdata-carousel-mark{display:block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:38px!important;font-weight:900!important;line-height:1!important;text-align:center!important;pointer-events:none!important;transform:translateY(-2px)}\n.interdata-carousel-prev{left:14px}\n.interdata-carousel-prev .interdata-carousel-mark{margin-left:-2px}\n.interdata-carousel-next{right:14px}\n.interdata-carousel-next .interdata-carousel-mark{margin-right:-2px}\n@container (max-width:640px){.interdata-plan-carousel{padding:12px 38px 16px}.interdata-plan-card{flex-basis:calc((100% - 12px)\/2);min-height:370px}.interdata-carousel-heading{font-size:16px}}\n@container (max-width:480px){.interdata-plan-carousel{padding:12px 34px 16px}.interdata-plan-card{flex-basis:100%;min-height:360px}.interdata-plan-price{font-size:25px}.interdata-carousel-arrow{width:34px;height:44px}.interdata-carousel-mark{font-size:32px!important}.interdata-carousel-prev{left:5px}.interdata-carousel-next{right:5px}}\n<\/style>\n\n<div class=\"interdata-plan-carousel\" data-interdata-carousel>\n  <div class=\"interdata-carousel-heading\">Si\u00eau \u01afu \u0110\u00e3i VPS \/ CLOUD SERVER - Ti\u1ebft Ki\u1ec7m \u0110\u1ebfn 70%<\/div>\n\n  <svg width=\"0\" height=\"0\" style=\"position:absolute;visibility:hidden\" aria-hidden=\"true\">\n    <symbol id=\"id-icon-cpu\" viewBox=\"0 0 24 24\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\"><\/rect><path d=\"M4 9h3M4 15h3M17 9h3M17 15h3M9 4v3M15 4v3M9 17v3M15 17v3\"><\/path><path d=\"M10 10h4v4h-4z\"><\/path><\/symbol>\n    <symbol id=\"id-icon-ram\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"><\/rect><path d=\"M7 16v2M11 16v2M15 16v2M19 16v2M7 11h1M11 11h1M15 11h1\"><\/path><\/symbol>\n    <symbol id=\"id-icon-storage\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"><\/rect><path d=\"M9 7h6\"><\/path><circle cx=\"12\" cy=\"16\" r=\"1.5\"><\/circle><\/symbol>\n    <symbol id=\"id-icon-network\" viewBox=\"0 0 24 24\"><path d=\"M5 12.5a10 10 0 0 1 14 0\"><\/path><path d=\"M8.5 16a5 5 0 0 1 7 0\"><\/path><path d=\"M12 19h.01\"><\/path><\/symbol>\n    <symbol id=\"id-icon-gift\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"13\" rx=\"2\"><\/rect><path d=\"M12 8v13M3 12h18\"><\/path><path d=\"M7.5 8C6.1 8 5 6.9 5 5.5S6.1 3 7.5 3C10 3 12 8 12 8\"><\/path><path d=\"M16.5 8C17.9 8 19 6.9 19 5.5S17.9 3 16.5 3C14 3 12 8 12 8\"><\/path><\/symbol>\n  <\/svg>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-prev\" type=\"button\" aria-label=\"Xem 4 g\u00f3i tr\u01b0\u1edbc\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8249;<\/span>\n  <\/button>\n\n  <div class=\"interdata-plan-viewport\">\n    <div class=\"interdata-plan-track\">\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">299K<span>\/3 th\u00e1ng<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2GB <a href=\"https:\/\/interdata.vn\/blog\/ram-server\/\">RAM<\/a><\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-value-plans-2026\/best-value-plans-premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">999K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>3 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Pro<\/h3>\n        <div class=\"interdata-plan-price\">2.599K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>6 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 350Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Ultra<\/h3>\n        <div class=\"interdata-plan-price\">5.679K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>12 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>180GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 450Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-ultra\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 1<\/h3>\n        <div class=\"interdata-plan-price\">988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 <a href=\"https:\/\/interdata.vn\/blog\/vcpu-la-gi\/\">vCPU<\/a><\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-1\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 2<\/h3>\n        <div class=\"interdata-plan-price\">2.988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-2\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Base<\/h3>\n        <div class=\"interdata-plan-price\">2.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 80GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>6GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>60GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Pro<\/h3>\n        <div class=\"interdata-plan-price\">5.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 200GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>8 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>12GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>160GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-next\" type=\"button\" aria-label=\"Xem 4 g\u00f3i ti\u1ebfp theo\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8250;<\/span>\n  <\/button>\n<\/div>\n\n<script>\n(function(){\n  function setupInterDataCarousel(root){\n    var track=root.querySelector('.interdata-plan-track');\n    var prev=root.querySelector('.interdata-carousel-prev');\n    var next=root.querySelector('.interdata-carousel-next');\n    if(!track||!prev||!next||track.dataset.ready==='1')return;\n    track.dataset.ready='1';\n\n    function pageWidth(){\n      return track.clientWidth;\n    }\n\n    function updateButtons(){\n      var maxScroll=track.scrollWidth-track.clientWidth-2;\n      prev.disabled=track.scrollLeft<=2;\n      next.disabled=track.scrollLeft>=maxScroll;\n    }\n\n    prev.addEventListener('click',function(){\n      track.scrollBy({left:-pageWidth(),behavior:'smooth'});\n    });\n\n    next.addEventListener('click',function(){\n      track.scrollBy({left:pageWidth(),behavior:'smooth'});\n    });\n\n    track.addEventListener('scroll',function(){\n      window.requestAnimationFrame(updateButtons);\n    });\n\n    window.addEventListener('resize',updateButtons);\n    updateButtons();\n  }\n\n  function initInterDataCarousels(){\n    document.querySelectorAll('[data-interdata-carousel]').forEach(setupInterDataCarousel);\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initInterDataCarousels);\n  }else{\n    initInterDataCarousels();\n  }\n})();\n<\/script>\n\n\t<div id=\"gap-674427177\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-674427177 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<p style=\"text-align: justify;\"><span style=\"font-size: 100%;\"><strong>Th\u1ebb input trong HTML<\/strong> l\u00e0 ph\u1ea7n t\u1eed b\u1ea1n s\u1ebd d\u00f9ng nhi\u1ec1u nh\u1ea5t khi l\u00e0m form \u0111\u0103ng nh\u1eadp, \u0111\u0103ng k\u00fd, kh\u1ea3o s\u00e1t hay \u00f4 t\u00ecm ki\u1ebfm. Sai m\u1ed9t thu\u1ed9c t\u00ednh nh\u1ecf l\u00e0 d\u1eef li\u1ec7u g\u1eedi v\u1ec1 backend h\u1ecfng, ho\u1eb7c m\u1eadt kh\u1ea9u l\u1ed9 nguy\u00ean v\u0103n tr\u00ean m\u00e0n h\u00ecnh. B\u00e0i vi\u1ebft n\u00e0y t\u1ed5ng h\u1ee3p \u0111\u1ee7 lo\u1ea1i <code>type<\/code>, v\u00ed d\u1ee5 form \u0111\u1eb9p v\u00e0 c\u00e1ch l\u1ea5y d\u1eef li\u1ec7u th\u1eadt, \u0111\u00fang chu\u1ea9n nh\u01b0 t\u00e0i li\u1ec7u c\u1ee7a <a style=\"background: linear-gradient(90deg, #1E3A8A 0%, #2563EB 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; font-weight: bold;\" href=\"\/\">InterData<\/a>.<br \/>\n<\/span><\/p>\n<div style=\"background-color: #eff6ff; padding: 20px; border: 1.5px solid #BFDBFE; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.05);\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; font-size: 18px; margin-top: 0; margin-bottom: 15px; color: #1e3a8a;\">N\u1ed8I DUNG B\u00c0I VI\u1ebeT<\/p>\n<ul style=\"list-style-type: none; padding-left: 0; margin: 0;\">\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section1\">Th\u1ebb input trong HTML l\u00e0 g\u00ec v\u00e0 c\u00fa ph\u00e1p c\u01a1 b\u1ea3n?<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section2\">T\u1ed5ng h\u1ee3p c\u00e1c type c\u1ee7a th\u1ebb input k\u00e8m v\u00ed d\u1ee5<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section3\">C\u00e1c thu\u1ed9c t\u00ednh quan tr\u1ecdng \u0111i c\u00f9ng input<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section4\">D\u1ef1ng form \u0111\u0103ng nh\u1eadp v\u00e0 \u0111\u0103ng k\u00fd ho\u00e0n ch\u1ec9nh<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section5\">CSS cho input: l\u00e0m khung nh\u1eadp li\u1ec7u \u0111\u1eb9p<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section6\">Validation input: ch\u1eb7n d\u1eef li\u1ec7u r\u00e1c ngay \u1edf tr\u00ecnh duy\u1ec7t<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section7\">L\u1ea5y d\u1eef li\u1ec7u t\u1eeb form g\u1eedi v\u1ec1 backend (PHP)<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section8\">L\u1ed7i th\u01b0\u1eddng g\u1eb7p khi l\u00e0m vi\u1ec7c v\u1edbi input<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#faq\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (FAQ)<\/a><\/li>\n<\/ul>\n<\/div>\n<h2 id=\"section1\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">Th\u1ebb input trong HTML l\u00e0 g\u00ec v\u00e0 c\u00fa ph\u00e1p c\u01a1 b\u1ea3n?<\/h2>\n<p style=\"text-align: justify;\">Th\u1ebb input trong HTML l\u00e0 ph\u1ea7n t\u1eed d\u00f9ng \u0111\u1ec3 nh\u1eadn d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng nh\u1eadp v\u00e0o: ch\u1eef, s\u1ed1, m\u1eadt kh\u1ea9u, l\u1ef1a ch\u1ecdn, ng\u00e0y th\u00e1ng, file. N\u00f3 l\u00e0 m\u1ed9t th\u1ebb r\u1ed7ng (empty element), kh\u00f4ng c\u00f3 th\u1ebb \u0111\u00f3ng. M\u1ecdi h\u00e0nh vi c\u1ee7a \u00f4 nh\u1eadp ph\u1ee5 thu\u1ed9c v\u00e0o thu\u1ed9c t\u00ednh <code>type<\/code> b\u1ea1n khai b\u00e1o.<\/p>\n<p style=\"text-align: justify;\">C\u00fa ph\u00e1p t\u1ed1i gi\u1ea3n nh\u1ea5t ch\u1ec9 g\u1ed3m m\u1ed9t d\u00f2ng:<\/p>\n<pre>&lt;input type=\"text\" name=\"hoten\" placeholder=\"Nh\u1eadp h\u1ecd t\u00ean\"&gt;<\/pre>\n<p style=\"text-align: justify;\">C\u00f3 ba \u0111i\u1ec3m b\u1ea1n c\u1ea7n n\u1eafm ngay t\u1eeb \u0111\u1ea7u, v\u00ec thi\u1ebfu ch\u00fang l\u00e0 form ch\u1ea1y nh\u01b0ng kh\u00f4ng d\u00f9ng \u0111\u01b0\u1ee3c:<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>Thu\u1ed9c t\u00ednh name l\u00e0 b\u1eaft bu\u1ed9c \u0111\u1ec3 g\u1eedi d\u1eef li\u1ec7u:<\/strong> Backend \u0111\u1ecdc d\u1eef li\u1ec7u theo <code>name<\/code>, kh\u00f4ng ph\u1ea3i theo <code>id<\/code>. Qu\u00ean <code>name<\/code> th\u00ec gi\u00e1 tr\u1ecb \u00f4 \u0111\u00f3 kh\u00f4ng bao gi\u1edd t\u1edbi server.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>input ph\u1ea3i n\u1eb1m trong th\u1ebb form:<\/strong> N\u00fat submit ch\u1ec9 gom \u0111\u01b0\u1ee3c d\u1eef li\u1ec7u c\u1ee7a c\u00e1c input c\u00f9ng n\u1eb1m trong m\u1ed9t <code>&lt;form&gt;<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>id \u0111\u1ec3 g\u1eafn label v\u00e0 CSS\/JS:<\/strong> D\u00f9ng <code>id<\/code> gh\u00e9p v\u1edbi <code>&lt;label for=\"...\"&gt;<\/code> gi\u00fap ng\u01b0\u1eddi d\u00f9ng b\u1ea5m v\u00e0o nh\u00e3n l\u00e0 focus v\u00e0o \u00f4, t\u1ed1t cho c\u1ea3 tr\u1ea3i nghi\u1ec7m l\u1eabn accessibility.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">M\u1ed9t input &#8220;\u0111\u00fang chu\u1ea9n&#8221; th\u01b0\u1eddng \u0111i k\u00e8m label nh\u01b0 sau. \u0110\u00e2y l\u00e0 c\u00e1ch vi\u1ebft b\u1ea1n n\u00ean d\u00f9ng m\u1eb7c \u0111\u1ecbnh:<\/p>\n<pre>&lt;label for=\"email\"&gt;Email&lt;\/label&gt;\r\n&lt;input type=\"email\" id=\"email\" name=\"email\" placeholder=\"ban@example.com\" required&gt;<\/pre>\n<p style=\"text-align: justify;\">N\u1eafm v\u1eefng \u0111\u1ecbnh ngh\u0129a v\u00e0 c\u00fa ph\u00e1p g\u1ed1c theo t\u00e0i li\u1ec7u c\u1ee7a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> s\u1ebd gi\u00fap b\u1ea1n tr\u00e1nh \u0111a s\u1ed1 l\u1ed7i v\u1eb7t v\u1ec1 sau.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-42386\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/The-Input-Trong-HTML.jpg\" alt=\"Th\u1ebb Input Trong HTML\" width=\"700\" height=\"467\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/The-Input-Trong-HTML.jpg 700w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/The-Input-Trong-HTML-300x200.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2 id=\"section2\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">T\u1ed5ng h\u1ee3p c\u00e1c type c\u1ee7a th\u1ebb input k\u00e8m v\u00ed d\u1ee5<\/h2>\n<p style=\"text-align: justify;\">Thu\u1ed9c t\u00ednh <code>type<\/code> quy\u1ebft \u0111\u1ecbnh \u00f4 nh\u1eadp l\u00e0 d\u1ea1ng g\u00ec. HTML h\u1ed7 tr\u1ee3 h\u01a1n 20 gi\u00e1 tr\u1ecb, nh\u01b0ng trong th\u1ef1c t\u1ebf b\u1ea1n ch\u1ec9 d\u00f9ng \u0111i d\u00f9ng l\u1ea1i kho\u1ea3ng 10. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u00f3m quan tr\u1ecdng nh\u1ea5t, s\u1eafp theo t\u1ea7n su\u1ea5t d\u00f9ng th\u1eadt.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 25px; font-size: 20px;\">input type text v\u00e0 c\u00e1c bi\u1ebfn th\u1ec3 ch\u1eef<\/h3>\n<p style=\"text-align: justify;\"><code>type=\"text\"<\/code> l\u00e0 d\u1ea1ng m\u1eb7c \u0111\u1ecbnh cho chu\u1ed7i ng\u1eafn m\u1ed9t d\u00f2ng: h\u1ecd t\u00ean, ti\u00eau \u0111\u1ec1, m\u00e3 gi\u1ea3m gi\u00e1. V\u1edbi chu\u1ed7i d\u00e0i nhi\u1ec1u d\u00f2ng (b\u00ecnh lu\u1eadn, \u0111\u1ecba ch\u1ec9), b\u1ea1n d\u00f9ng <code>&lt;textarea&gt;<\/code> ch\u1ee9 kh\u00f4ng ph\u1ea3i input.<\/p>\n<pre>&lt;input type=\"text\" name=\"hoten\" maxlength=\"50\" placeholder=\"Nguy\u1ec5n V\u0103n A\"&gt;\r\n&lt;input type=\"email\" name=\"email\" placeholder=\"ban@example.com\"&gt;\r\n&lt;input type=\"tel\" name=\"sdt\" placeholder=\"0901234567\"&gt;\r\n&lt;input type=\"url\" name=\"website\" placeholder=\"https:\/\/...\"&gt;\r\n&lt;input type=\"search\" name=\"tukhoa\" placeholder=\"T\u00ecm ki\u1ebfm...\"&gt;<\/pre>\n<p style=\"text-align: justify;\">\u0110i\u1ec3m kh\u00e1c bi\u1ec7t th\u1ef1c t\u1ebf: tr\u00ean \u0111i\u1ec7n tho\u1ea1i, <code>type=\"email\"<\/code> b\u1eadt b\u00e0n ph\u00edm c\u00f3 k\u00fd t\u1ef1 @, <code>type=\"tel\"<\/code> b\u1eadt b\u00e0n ph\u00edm s\u1ed1. Ch\u1ecdn \u0111\u00fang type l\u00e0 b\u1ea1n \u0111\u00e3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m nh\u1eadp li\u1ec7u m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam d\u00f2ng n\u00e0o.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 25px; font-size: 20px;\">input type password: \u1ea9n m\u1eadt kh\u1ea9u khi g\u00f5<\/h3>\n<p style=\"text-align: justify;\"><code>type=\"password\"<\/code> che k\u00fd t\u1ef1 th\u00e0nh d\u1ea5u ch\u1ea5m khi ng\u01b0\u1eddi d\u00f9ng g\u00f5. \u0110\u00e2y l\u00e0 y\u00eau c\u1ea7u c\u01a1 b\u1ea3n c\u1ee7a m\u1ecdi form \u0111\u0103ng nh\u1eadp. L\u01b0u \u00fd quan tr\u1ecdng: <strong>password ch\u1ec9 \u1ea9n tr\u00ean m\u00e0n h\u00ecnh, kh\u00f4ng m\u00e3 h\u00f3a d\u1eef li\u1ec7u.<\/strong> M\u1eadt kh\u1ea9u v\u1eabn \u0111\u01b0\u1ee3c g\u1eedi \u0111i d\u1ea1ng v\u0103n b\u1ea3n thu\u1ea7n, n\u00ean b\u1eaft bu\u1ed9c ph\u1ea3i c\u00f3 HTTPS \u0111\u1ec3 ch\u1ed1ng nghe l\u00e9n.<\/p>\n<pre>&lt;input type=\"password\" name=\"matkhau\" minlength=\"8\" required autocomplete=\"current-password\"&gt;<\/pre>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 25px; font-size: 20px;\">input radio v\u00e0 checkbox: t\u00edch ch\u1ecdn cho kh\u1ea3o s\u00e1t<\/h3>\n<p style=\"text-align: justify;\">\u0110\u00e2y l\u00e0 c\u1eb7p hay b\u1ecb nh\u1ea7m. Quy t\u1eafc \u0111\u01a1n gi\u1ea3n: radio cho ch\u1ecdn m\u1ed9t, checkbox cho ch\u1ecdn nhi\u1ec1u.<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>input radio:<\/strong> C\u00e1c radio c\u00f9ng m\u1ed9t c\u00e2u h\u1ecfi ph\u1ea3i d\u00f9ng <em>chung m\u1ed9t gi\u00e1 tr\u1ecb name<\/em>. Nh\u1edd v\u1eady tr\u00ecnh duy\u1ec7t hi\u1ec3u ch\u00fang l\u00e0 m\u1ed9t nh\u00f3m v\u00e0 ch\u1ec9 cho ch\u1ecdn m\u1ed9t.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>input checkbox:<\/strong> Cho ph\u00e9p ch\u1ecdn nhi\u1ec1u m\u1ee5c \u0111\u1ed9c l\u1eadp. N\u1ebfu mu\u1ed1n g\u1eedi nhi\u1ec1u gi\u00e1 tr\u1ecb v\u1ec1 backend, \u0111\u1eb7t <code>name<\/code> d\u1ea1ng <a href=\"https:\/\/interdata.vn\/blog\/array-la-gi\/\">m\u1ea3ng<\/a> nh\u01b0 <code>name=\"sothich[]\"<\/code>.<\/li>\n<\/ul>\n<pre>&lt;!-- Radio: ch\u1ecdn m\u1ed9t gi\u1edbi t\u00ednh --&gt;\r\n&lt;input type=\"radio\" name=\"gioitinh\" value=\"nam\" id=\"nam\" checked&gt;\r\n&lt;label for=\"nam\"&gt;Nam&lt;\/label&gt;\r\n&lt;input type=\"radio\" name=\"gioitinh\" value=\"nu\" id=\"nu\"&gt;\r\n&lt;label for=\"nu\"&gt;N\u1eef&lt;\/label&gt;\r\n\r\n&lt;!-- Checkbox: ch\u1ecdn nhi\u1ec1u s\u1edf th\u00edch --&gt;\r\n&lt;input type=\"checkbox\" name=\"sothich[]\" value=\"code\" id=\"c1\"&gt;\r\n&lt;label for=\"c1\"&gt;<a href=\"https:\/\/interdata.vn\/blog\/lap-trinh-la-gi\/\">L\u1eadp tr\u00ecnh<\/a>&lt;\/label&gt;\r\n&lt;input type=\"checkbox\" name=\"sothich[]\" value=\"server\" id=\"c2\"&gt;\r\n&lt;label for=\"c2\"&gt;Qu\u1ea3n tr\u1ecb m\u00e1y ch\u1ee7&lt;\/label&gt;<\/pre>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 25px; font-size: 20px;\">C\u00e1c type ti\u1ec7n \u00edch: number, date, file, color, range<\/h3>\n<p style=\"text-align: justify;\">Nh\u00f3m n\u00e0y gi\u00fap b\u1ea1n thu th\u1eadp d\u1eef li\u1ec7u web \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng m\u00e0 kh\u00f4ng c\u1ea7n JavaScript:<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">Type<\/th>\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">D\u00f9ng cho<\/th>\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">Ghi ch\u00fa th\u1ef1c t\u1ebf<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>number<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">S\u1ed1 l\u01b0\u1ee3ng, tu\u1ed5i, gi\u00e1<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">K\u1ebft h\u1ee3p <code>min<\/code>, <code>max<\/code>, <code>step<\/code><\/td>\n<\/tr>\n<tr style=\"background: #F8FAFC;\">\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>date<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Ng\u00e0y sinh, ng\u00e0y h\u1eb9n<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Giao di\u1ec7n l\u1ecbch kh\u00e1c nhau theo tr\u00ecnh duy\u1ec7t<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>file<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">T\u1ea3i \u1ea3nh, t\u00e0i li\u1ec7u<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Form ph\u1ea3i c\u00f3 <code>enctype=\"multipart\/form-data\"<\/code><\/td>\n<\/tr>\n<tr style=\"background: #F8FAFC;\">\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>color<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Ch\u1ecdn m\u00e0u<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Tr\u1ea3 v\u1ec1 m\u00e3 hex nh\u01b0 <code>#2563EB<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>hidden<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">G\u1eedi gi\u00e1 tr\u1ecb \u1ea9n (token, id)<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Kh\u00f4ng hi\u1ec3n th\u1ecb nh\u01b0ng v\u1eabn g\u1eedi v\u1ec1 backend<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 25px; font-size: 20px;\">button submit v\u00e0 c\u00e1c lo\u1ea1i n\u00fat<\/h3>\n<p style=\"text-align: justify;\">N\u00fat g\u1eedi form c\u00f3 hai c\u00e1ch vi\u1ebft: <code>&lt;input type=\"submit\"&gt;<\/code> ho\u1eb7c <code>&lt;button type=\"submit\"&gt;<\/code>. Khuy\u00ean d\u00f9ng <code>&lt;button&gt;<\/code> v\u00ec cho ph\u00e9p ch\u00e8n HTML v\u00e0 icon b\u00ean trong. Ngo\u00e0i ra c\u00f2n <code>type=\"reset\"<\/code> \u0111\u1ec3 x\u00f3a form v\u00e0 <code>type=\"button\"<\/code> cho n\u00fat kh\u00f4ng submit, ch\u1ec9 ch\u1ea1y JavaScript.<\/p>\n<pre>&lt;button type=\"submit\"&gt;\u0110\u0103ng k\u00fd&lt;\/button&gt;\r\n&lt;button type=\"reset\"&gt;Nh\u1eadp l\u1ea1i&lt;\/button&gt;\r\n&lt;button type=\"button\" onclick=\"hienMatKhau()\"&gt;Hi\u1ec7n m\u1eadt kh\u1ea9u&lt;\/button&gt;<\/pre>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: white; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Thu\u00ea VPS<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">To\u00e0n quy\u1ec1n root, SSD NVMe U.2, c\u00e0i s\u1eb5n PHP\/MySQL trong v\u00e0i ph\u00fat<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">C\u1ea7n n\u01a1i ch\u1ea1y th\u1eed form PHP c\u1ee7a b\u1ea1n?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">H\u1ecdc input l\u00e0 m\u1ed9t chuy\u1ec7n, nh\u01b0ng \u0111\u1ec3 form g\u1eedi d\u1eef li\u1ec7u th\u1eadt v\u1ec1 backend b\u1ea1n c\u1ea7n m\u1ed9t m\u00e1y ch\u1ee7 ch\u1ea1y PHP. VPS cho b\u1ea1n quy\u1ec1n root \u0111\u1ec3 c\u00e0i web server, d\u1ef1ng m\u00f4i tr\u01b0\u1eddng dev v\u00e0 deploy form l\u00ean domain th\u1eadt m\u00e0 kh\u00f4ng b\u1ecb gi\u1edbi h\u1ea1n c\u1ea5u h\u00ecnh.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">Xem c\u1ea5u h\u00ecnh VPS \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section3\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">C\u00e1c thu\u1ed9c t\u00ednh quan tr\u1ecdng \u0111i c\u00f9ng th\u1ebb input<\/h2>\n<p style=\"text-align: justify;\">C\u00f9ng m\u1ed9t <code>type=\"text\"<\/code>, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebfn n\u00f3 t\u1eeb \u00f4 nh\u1eadp th\u00f4 th\u00e0nh \u00f4 th\u00f4ng minh nh\u1edd c\u00e1c thu\u1ed9c t\u00ednh. \u0110\u00e2y l\u00e0 nh\u1eefng thu\u1ed9c t\u00ednh b\u1ea1n s\u1ebd g\u1eb7p g\u1ea7n nh\u01b0 m\u1ecdi form trong HTML c\u01a1 b\u1ea3n:<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>placeholder:<\/strong> G\u1ee3i \u00fd m\u1edd trong \u00f4. Kh\u00f4ng ph\u1ea3i gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, v\u00e0 bi\u1ebfn m\u1ea5t khi g\u00f5. \u0110\u1eebng d\u00f9ng n\u00f3 thay cho label.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>value:<\/strong> Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u00f3 s\u1eb5n. Kh\u00e1c placeholder \u1edf ch\u1ed7 n\u00f3 l\u00e0 d\u1eef li\u1ec7u th\u1eadt, s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111i.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>required:<\/strong> B\u1eaft bu\u1ed9c nh\u1eadp. Tr\u00ecnh duy\u1ec7t ch\u1eb7n submit n\u1ebfu \u0111\u1ec3 tr\u1ed1ng.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>readonly v\u00e0 disabled:<\/strong> <code>readonly<\/code> cho \u0111\u1ecdc, kh\u00f4ng s\u1eeda, v\u1eabn g\u1eedi d\u1eef li\u1ec7u. <code>disabled<\/code> kh\u00f3a h\u1eb3n v\u00e0 <em>kh\u00f4ng g\u1eedi<\/em> gi\u00e1 tr\u1ecb v\u1ec1 backend.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>autocomplete:<\/strong> Cho tr\u00ecnh duy\u1ec7t g\u1ee3i \u00fd \u0111i\u1ec1n nhanh. V\u1edbi m\u1eadt kh\u1ea9u n\u00ean \u0111\u1eb7t r\u00f5 <code>current-password<\/code> ho\u1eb7c <code>new-password<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>maxlength v\u00e0 minlength:<\/strong> Gi\u1edbi h\u1ea1n s\u1ed1 k\u00fd t\u1ef1, h\u1eefu \u00edch cho m\u00e3 OTP, s\u1ed1 \u0111i\u1ec7n tho\u1ea1i.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">M\u1ed9t nh\u1ea7m l\u1eabn ph\u1ed5 bi\u1ebfn: d\u00f9ng <code>disabled<\/code> cho \u00f4 kh\u00f4ng cho s\u1eeda nh\u01b0ng v\u1eabn mu\u1ed1n d\u1eef li\u1ec7u g\u1eedi v\u1ec1. Sai. N\u1ebfu c\u1ea7n g\u1eedi, d\u00f9ng <code>readonly<\/code>, ho\u1eb7c \u0111i k\u00e8m m\u1ed9t <code>input type=\"hidden\"<\/code> mang gi\u00e1 tr\u1ecb \u0111\u00f3.<\/p>\n<h2 id=\"section4\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">D\u1ef1ng form \u0111\u0103ng nh\u1eadp v\u00e0 \u0111\u0103ng k\u00fd ho\u00e0n ch\u1ec9nh<\/h2>\n<p style=\"text-align: justify;\">Gi\u1edd gh\u00e9p t\u1ea5t c\u1ea3 l\u1ea1i th\u00e0nh m\u1ed9t form html d\u00f9ng \u0111\u01b0\u1ee3c th\u1eadt. \u0110\u00e2y l\u00e0 khung \u0111\u0103ng nh\u1eadp g\u1ed3m email, m\u1eadt kh\u1ea9u, n\u00fat submit v\u00e0 m\u1ed9t checkbox ghi nh\u1edb. B\u1ea1n d\u00e1n nguy\u00ean \u0111o\u1ea1n n\u00e0y l\u00e0 ch\u1ea1y.<\/p>\n<pre>&lt;form action=\"xu-ly-dang-nhap.php\" method=\"POST\"&gt;\r\n  &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\r\n  &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\r\n\r\n  &lt;label for=\"mk\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\r\n  &lt;input type=\"password\" id=\"mk\" name=\"matkhau\" minlength=\"8\" required&gt;\r\n\r\n  &lt;input type=\"checkbox\" id=\"nhomk\" name=\"ghinho\" value=\"1\"&gt;\r\n  &lt;label for=\"nhomk\"&gt;Ghi nh\u1edb \u0111\u0103ng nh\u1eadp&lt;\/label&gt;\r\n\r\n  &lt;button type=\"submit\"&gt;\u0110\u0103ng nh\u1eadp&lt;\/button&gt;\r\n&lt;\/form&gt;<\/pre>\n<p style=\"text-align: justify;\">Hai thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb <code>&lt;form&gt;<\/code> quy\u1ebft \u0111\u1ecbnh d\u1eef li\u1ec7u \u0111i \u0111\u00e2u v\u00e0 \u0111i ki\u1ec3u g\u00ec:<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>action:<\/strong> \u0110\u01b0\u1eddng d\u1eabn file backend x\u1eed l\u00fd d\u1eef li\u1ec7u. \u0110\u1ec3 tr\u1ed1ng ngh\u0129a l\u00e0 g\u1eedi v\u1ec1 ch\u00ednh trang hi\u1ec7n t\u1ea1i.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>method:<\/strong> D\u00f9ng <code>POST<\/code> cho m\u1ecdi form c\u00f3 m\u1eadt kh\u1ea9u ho\u1eb7c d\u1eef li\u1ec7u nh\u1ea1y c\u1ea3m. D\u00f9ng <code>GET<\/code> cho \u00f4 t\u00ecm ki\u1ebfm v\u00ec n\u00f3 hi\u1ec7n <a href=\"https:\/\/interdata.vn\/blog\/tham-so-parameter-la-gi\/\">tham s\u1ed1<\/a> tr\u00ean URL.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Form \u0111\u0103ng k\u00fd ch\u1ec9 l\u00e0 phi\u00ean b\u1ea3n d\u00e0i h\u01a1n: th\u00eam h\u1ecd t\u00ean, x\u00e1c nh\u1eadn m\u1eadt kh\u1ea9u, ng\u00e0y sinh, radio gi\u1edbi t\u00ednh v\u00e0 checkbox \u0111\u1ed3ng \u00fd \u0111i\u1ec1u kho\u1ea3n. Nguy\u00ean t\u1eafc gi\u1eef nguy\u00ean, b\u1ea1n ch\u1ec9 n\u1ed1i th\u00eam c\u00e1c input \u0111\u00e3 h\u1ecdc \u1edf tr\u00ean.<\/p>\n<h2 id=\"section5\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">CSS cho input: l\u00e0m khung nh\u1eadp li\u1ec7u \u0111\u1eb9p m\u1eaft<\/h2>\n<p style=\"text-align: justify;\">Input m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t nh\u00ecn th\u00f4 v\u00e0 c\u0169. Ch\u1ec9 v\u00e0i d\u00f2ng CSS cho input l\u00e0 form c\u1ee7a b\u1ea1n tr\u00f4ng chuy\u00ean nghi\u1ec7p h\u1eb3n. Ba vi\u1ec7c c\u1ea7n l\u00e0m: bo g\u00f3c, th\u00eam padding cho d\u1ec5 b\u1ea5m, v\u00e0 \u0111\u1ed5i vi\u1ec1n khi focus \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng bi\u1ebft \u0111ang \u1edf \u00f4 n\u00e0o.<\/p>\n<pre>input[type=\"text\"],\r\ninput[type=\"email\"],\r\ninput[type=\"password\"] {\r\n  width: 100%;\r\n  padding: 12px 14px;\r\n  border: 1.5px solid #cbd5e1;\r\n  border-radius: 8px;\r\n  font-size: 15px;\r\n  box-sizing: border-box;\r\n  transition: border-color .2s, box-shadow .2s;\r\n}\r\n\r\n\/* \u0110\u1ed5i vi\u1ec1n khi ng\u01b0\u1eddi d\u00f9ng \u0111ang nh\u1eadp *\/\r\ninput:focus {\r\n  border-color: #2563EB;\r\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);\r\n  outline: none;\r\n}\r\n\r\n\/* B\u00e1o l\u1ed7i khi nh\u1eadp sai \u0111\u1ecbnh d\u1ea1ng *\/\r\ninput:invalid {\r\n  border-color: #ef4444;\r\n}<\/pre>\n<p style=\"text-align: justify;\">Checklist nhanh \u0111\u1ec3 khung nh\u1eadp li\u1ec7u v\u1eeba \u0111\u1eb9p v\u1eeba d\u00f9ng t\u1ed1t:<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>Lu\u00f4n \u0111\u1eb7t box-sizing: border-box:<\/strong> Tr\u00e1nh input b\u1ecb tr\u00e0n kh\u1ecfi khung cha khi \u0111\u1ec3 <code>width: 100%<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Padding t\u1ed1i thi\u1ec3u 10-12px:<\/strong> \u00d4 qu\u00e1 s\u00e1t kh\u00f3 b\u1ea5m tr\u00ean \u0111i\u1ec7n tho\u1ea1i.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>C\u00f3 tr\u1ea1ng th\u00e1i focus r\u00f5 r\u00e0ng:<\/strong> \u0110\u1eebng x\u00f3a <code>outline<\/code> m\u00e0 kh\u00f4ng thay b\u1eb1ng hi\u1ec7u \u1ee9ng kh\u00e1c, s\u1ebd h\u1ea1i accessibility.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>T\u1eadn d\u1ee5ng pseudo-class :invalid v\u00e0 :valid:<\/strong> B\u00e1o l\u1ed7i b\u1eb1ng m\u00e0u vi\u1ec1n m\u00e0 kh\u00f4ng c\u1ea7n JavaScript.<\/li>\n<\/ul>\n<h2 id=\"section6\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">Validation input: ch\u1eb7n d\u1eef li\u1ec7u r\u00e1c ngay \u1edf tr\u00ecnh duy\u1ec7t<\/h2>\n<p style=\"text-align: justify;\">HTML5 cho b\u1ea1n ki\u1ec3m tra d\u1eef li\u1ec7u nh\u1eadp m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft JavaScript. \u0110\u00e2y g\u1ecdi l\u00e0 validation ph\u00eda client. N\u00f3 ch\u1eb7n ng\u01b0\u1eddi d\u00f9ng submit form khi d\u1eef li\u1ec7u sai \u0111\u1ecbnh d\u1ea1ng, gi\u00fap gi\u1ea3m t\u1ea3i cho backend.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">Thu\u1ed9c t\u00ednh<\/th>\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">T\u00e1c d\u1ee5ng<\/th>\n<th style=\"border: 1px solid #BFDBFE; padding: 10px; text-align: left;\">V\u00ed d\u1ee5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>required<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Kh\u00f4ng cho \u0111\u1ec3 tr\u1ed1ng<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>required<\/code><\/td>\n<\/tr>\n<tr style=\"background: #F8FAFC;\">\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>pattern<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Ki\u1ec3m tra theo regex<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>pattern=\"[0-9]{10}\"<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>min \/ max<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">Gi\u1edbi h\u1ea1n gi\u00e1 tr\u1ecb s\u1ed1\/ng\u00e0y<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>min=\"18\" max=\"100\"<\/code><\/td>\n<\/tr>\n<tr style=\"background: #F8FAFC;\">\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>minlength<\/code><\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\">S\u1ed1 k\u00fd t\u1ef1 t\u1ed1i thi\u1ec3u<\/td>\n<td style=\"border: 1px solid #BFDBFE; padding: 10px;\"><code>minlength=\"8\"<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">V\u00ed d\u1ee5 \u00e9p s\u1ed1 \u0111i\u1ec7n tho\u1ea1i \u0111\u00fang 10 ch\u1eef s\u1ed1:<\/p>\n<pre>&lt;input type=\"tel\" name=\"sdt\"\r\n       pattern=\"0[0-9]{9}\"\r\n       title=\"Nh\u1eadp 10 s\u1ed1, b\u1eaft \u0111\u1ea7u b\u1eb1ng 0\"\r\n       required&gt;<\/pre>\n<p style=\"text-align: justify;\">C\u1ea3nh b\u00e1o b\u1eaft bu\u1ed9c nh\u1edb: <strong>validation ph\u00eda client kh\u00f4ng bao gi\u1edd thay th\u1ebf ki\u1ec3m tra \u1edf backend.<\/strong> Ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 t\u1eaft JavaScript, s\u1eeda HTML b\u1eb1ng DevTools ho\u1eb7c g\u1eedi request th\u1eb3ng t\u1edbi server. Lu\u00f4n ki\u1ec3m tra l\u1ea1i d\u1eef li\u1ec7u \u1edf backend tr\u01b0\u1edbc khi l\u01b0u v\u00e0o database.<\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: white; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Cloud Server<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">N\u00e2ng\/h\u1ea1 t\u00e0i nguy\u00ean linh ho\u1ea1t khi l\u01b0\u1ee3ng form g\u1eedi v\u1ec1 t\u0103ng \u0111\u1ed9t bi\u1ebfn<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">Form kh\u1ea3o s\u00e1t hay landing page m\u00f9a cao \u0111i\u1ec3m?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Khi m\u1ed9t chi\u1ebfn d\u1ecbch ch\u1ea1y qu\u1ea3ng c\u00e1o, l\u01b0\u1ee3ng ng\u01b0\u1eddi \u0111i\u1ec1n form v\u00e0 ghi d\u1eef li\u1ec7u v\u00e0o database c\u00f3 th\u1ec3 t\u0103ng v\u1ecdt trong v\u00e0i gi\u1edd. Cloud Server cho ph\u00e9p t\u0103ng CPU\/RAM theo nhu c\u1ea7u r\u1ed3i h\u1ea1 l\u1ea1i sau campaign, ph\u00f9 h\u1ee3p khi t\u1ea3i bi\u1ebfn \u0111\u1ed9ng m\u1ea1nh v\u00e0 l\u01b0\u1ee3ng truy c\u1eadp kh\u00f3 \u0111o\u00e1n.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/cloud-server\/\" target=\"_blank\" rel=\"noopener\">T\u00ecm hi\u1ec3u Cloud Server \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section7\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">L\u1ea5y d\u1eef li\u1ec7u t\u1eeb form g\u1eedi v\u1ec1 backend (PHP)<\/h2>\n<p style=\"text-align: justify;\">\u0110\u00e2y l\u00e0 ph\u1ea7n nhi\u1ec1u ng\u01b0\u1eddi m\u1edbi b\u1ecf qua: form \u0111\u1eb9p m\u00e0 kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c d\u1eef li\u1ec7u th\u00ec v\u00f4 ngh\u0129a. Khi ng\u01b0\u1eddi d\u00f9ng b\u1ea5m submit, tr\u00ecnh duy\u1ec7t g\u00f3i to\u00e0n b\u1ed9 gi\u00e1 tr\u1ecb input theo <code>name<\/code> r\u1ed3i g\u1eedi t\u1edbi file ghi trong <code>action<\/code>. \u1ede ph\u00eda <a href=\"https:\/\/interdata.vn\/blog\/php-la-gi\/\">PHP<\/a> form, b\u1ea1n \u0111\u1ecdc l\u1ea1i b\u1eb1ng <code>$_POST<\/code> ho\u1eb7c <code>$_GET<\/code>.<\/p>\n<p style=\"text-align: justify;\">File <code>xu-ly-dang-nhap.php<\/code> x\u1eed l\u00fd form \u0111\u0103ng nh\u1eadp \u1edf tr\u00ean c\u00f3 th\u1ec3 vi\u1ebft nh\u01b0 sau:<\/p>\n<pre>&lt;?php\r\n\/\/ Ch\u1ec9 x\u1eed l\u00fd khi form g\u1eedi b\u1eb1ng POST\r\nif ($_SERVER['REQUEST_METHOD'] === 'POST') {\r\n\r\n    \/\/ L\u1ea5y d\u1eef li\u1ec7u theo thu\u1ed9c t\u00ednh name c\u1ee7a input\r\n    $email   = trim($_POST['email'] ?? '');\r\n    $matkhau = $_POST['matkhau'] ?? '';\r\n    $ghinho  = isset($_POST['ghinho']); \/\/ checkbox: c\u00f3 t\u00edch hay kh\u00f4ng\r\n\r\n    \/\/ Ki\u1ec3m tra l\u1ea1i \u1edf backend, kh\u00f4ng tin client\r\n    if ($email === '' || $matkhau === '') {\r\n        die('Vui l\u00f2ng nh\u1eadp \u0111\u1ee7 th\u00f4ng tin');\r\n    }\r\n\r\n    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {\r\n        die('Email kh\u00f4ng h\u1ee3p l\u1ec7');\r\n    }\r\n\r\n    \/\/ ... so kh\u1edbp v\u1edbi database, t\u1ea1o session ...\r\n    echo '\u0110\u0103ng nh\u1eadp v\u1edbi email: ' . htmlspecialchars($email);\r\n}\r\n?&gt;<\/pre>\n<p style=\"text-align: justify;\">Ba quy t\u1eafc an to\u00e0n khi nh\u1eadn d\u1eef li\u1ec7u t\u1eeb form, \u00e1p d\u1ee5ng cho m\u1ecdi ng\u00f4n ng\u1eef backend ch\u1ee9 kh\u00f4ng ri\u00eang PHP:<\/p>\n<ol style=\"padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>Kh\u00f4ng tin d\u1eef li\u1ec7u client:<\/strong> Validation HTML ch\u1ec9 \u0111\u1ec3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m. Backend ph\u1ea3i ki\u1ec3m tra l\u1ea1i t\u1eeb \u0111\u1ea7u.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>L\u1ecdc v\u00e0 tho\u00e1t d\u1eef li\u1ec7u tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb:<\/strong> D\u00f9ng <code>htmlspecialchars()<\/code> \u0111\u1ec3 ch\u1ed1ng XSS khi in ra tr\u00ecnh duy\u1ec7t.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>D\u00f9ng prepared statement khi ghi v\u00e0o database:<\/strong> \u0110\u00e2y l\u00e0 c\u00e1ch chu\u1ea9n \u0111\u1ec3 ch\u1ed1ng SQL Injection, \u0111\u1eebng n\u1ed1i chu\u1ed7i truy v\u1ea5n tr\u1ef1c ti\u1ebfp.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">V\u1edbi form upload file (<code>type=\"file\"<\/code>), d\u1eef li\u1ec7u n\u1eb1m trong bi\u1ebfn <code>$_FILES<\/code> ch\u1ee9 kh\u00f4ng ph\u1ea3i <code>$_POST<\/code>, v\u00e0 form b\u1eaft bu\u1ed9c khai b\u00e1o <code>enctype=\"multipart\/form-data\"<\/code>. Qu\u00ean d\u00f2ng n\u00e0y l\u00e0 file kh\u00f4ng bao gi\u1edd t\u1edbi server.<\/p>\n<h2 id=\"section8\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">L\u1ed7i th\u01b0\u1eddng g\u1eb7p khi l\u00e0m vi\u1ec7c v\u1edbi th\u1ebb input trong HTML<\/h2>\n<p style=\"text-align: justify;\">Ph\u1ea7n l\u1edbn l\u1ed7i form \u0111\u1ebfn t\u1eeb v\u00e0i sai s\u00f3t l\u1eb7p \u0111i l\u1eb7p l\u1ea1i. \u0110\u1ed1i chi\u1ebfu nhanh \u0111\u1ec3 kh\u00f4ng m\u1ea5t th\u1eddi gian debug:<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>D\u1eef li\u1ec7u kh\u00f4ng g\u1eedi v\u1ec1 server:<\/strong> Th\u01b0\u1eddng do qu\u00ean <code>name<\/code>, ho\u1eb7c input n\u1eb1m ngo\u00e0i th\u1ebb <code>&lt;form&gt;<\/code>, ho\u1eb7c l\u1ee1 \u0111\u1ec3 <code>disabled<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Radio cho ch\u1ecdn nhi\u1ec1u c\u00f9ng l\u00fac:<\/strong> Do m\u1ed7i radio \u0111\u1eb7t m\u1ed9t <code>name<\/code> kh\u00e1c nhau. S\u1eeda b\u1eb1ng c\u00e1ch cho c\u1ea3 nh\u00f3m chung m\u1ed9t <code>name<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Checkbox ch\u1ec9 nh\u1eadn m\u1ed9t gi\u00e1 tr\u1ecb \u1edf backend:<\/strong> Do thi\u1ebfu <code>[]<\/code> trong <code>name<\/code>. \u0110\u1eb7t <code>name=\"mua[]\"<\/code> \u0111\u1ec3 nh\u1eadn m\u1ea3ng.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>B\u1ea5m label kh\u00f4ng focus v\u00e0o \u00f4:<\/strong> Do <code>for<\/code> c\u1ee7a label kh\u00f4ng tr\u00f9ng <code>id<\/code> c\u1ee7a input.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>File upload tr\u1ed1ng:<\/strong> Do form thi\u1ebfu <code>enctype=\"multipart\/form-data\"<\/code> ho\u1eb7c d\u00f9ng <code>method=\"GET\"<\/code>.<\/li>\n<\/ul>\n<div style=\"border-top: 2px dashed #BFDBFE; margin-top: 50px; padding-top: 30px;\">\n<h3 id=\"faq\" style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 22px; font-weight: bold; margin-bottom: 15px;\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 th\u1ebb input<\/h3>\n<h4 style=\"color: #1e3a8a; font-size: 18px; margin-top: 25px; margin-bottom: 8px;\">Th\u1ebb input c\u00f3 c\u1ea7n th\u1ebb \u0111\u00f3ng kh\u00f4ng?<\/h4>\n<p style=\"text-align: justify;\">Kh\u00f4ng. Input l\u00e0 th\u1ebb r\u1ed7ng, ch\u1ec9 vi\u1ebft <code>&lt;input&gt;<\/code> l\u00e0 \u0111\u1ee7, kh\u00f4ng c\u00f3 <code>&lt;\/input&gt;<\/code>. Trong c\u00fa ph\u00e1p XHTML b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 \u0111\u00f3ng b\u1eb1ng <code>&lt;input \/&gt;<\/code>, nh\u01b0ng v\u1edbi HTML5 hi\u1ec7n \u0111\u1ea1i th\u00ec kh\u00f4ng b\u1eaft bu\u1ed9c. M\u1ecdi th\u00f4ng tin c\u1ee7a \u00f4 nh\u1eadp n\u1eb1m trong c\u00e1c thu\u1ed9c t\u00ednh.<\/p>\n<h4 style=\"color: #1e3a8a; font-size: 18px; margin-top: 25px; margin-bottom: 8px;\">Kh\u00e1c nhau gi\u1eefa input radio v\u00e0 checkbox l\u00e0 g\u00ec?<\/h4>\n<p style=\"text-align: justify;\">Radio cho ch\u1ecdn duy nh\u1ea5t m\u1ed9t ph\u01b0\u01a1ng \u00e1n trong nh\u00f3m c\u00f3 c\u00f9ng <code>name<\/code>, d\u00f9ng cho c\u00e2u h\u1ecfi m\u1ed9t \u0111\u00e1p \u00e1n nh\u01b0 gi\u1edbi t\u00ednh. Checkbox cho ch\u1ecdn nhi\u1ec1u m\u1ee5c \u0111\u1ed9c l\u1eadp, ho\u1eb7c d\u00f9ng l\u00e0m \u00f4 t\u00edch \u0111\u1ed3ng \u00fd \u0111i\u1ec1u kho\u1ea3n. \u0110\u00f3 l\u00e0 kh\u00e1c bi\u1ec7t c\u1ed1t l\u00f5i khi l\u00e0m kh\u1ea3o s\u00e1t.<\/p>\n<h4 style=\"color: #1e3a8a; font-size: 18px; margin-top: 25px; margin-bottom: 8px;\">L\u00e0m sao th\u00eam n\u00fat hi\u1ec7n\/\u1ea9n m\u1eadt kh\u1ea9u?<\/h4>\n<p style=\"text-align: justify;\">D\u00f9ng JavaScript \u0111\u1ed5i thu\u1ed9c t\u00ednh <code>type<\/code> c\u1ee7a \u00f4 t\u1eeb <code>password<\/code> sang <code>text<\/code> v\u00e0 ng\u01b0\u1ee3c l\u1ea1i khi b\u1ea5m n\u00fat. B\u1ea3n th\u00e2n HTML kh\u00f4ng c\u00f3 s\u1eb5n t\u00ednh n\u0103ng n\u00e0y. \u0110\u00e2y l\u00e0 l\u00fd do nhi\u1ec1u form th\u00eam m\u1ed9t n\u00fat <code>type=\"button\"<\/code> b\u00ean c\u1ea1nh \u00f4 m\u1eadt kh\u1ea9u.<\/p>\n<h4 style=\"color: #1e3a8a; font-size: 18px; margin-top: 25px; margin-bottom: 8px;\">Placeholder v\u00e0 value kh\u00e1c nhau th\u1ebf n\u00e0o?<\/h4>\n<p style=\"text-align: justify;\">Placeholder l\u00e0 g\u1ee3i \u00fd m\u1edd, bi\u1ebfn m\u1ea5t khi g\u00f5 v\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c g\u1eedi v\u1ec1 server. Value l\u00e0 gi\u00e1 tr\u1ecb th\u1eadt c\u00f3 s\u1eb5n trong \u00f4, s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111i khi submit. \u0110\u1eebng d\u00f9ng placeholder thay cho label v\u00ec ng\u01b0\u1eddi d\u00f9ng s\u1ebd m\u1ea5t g\u1ee3i \u00fd ngay khi b\u1eaft \u0111\u1ea7u nh\u1eadp.<\/p>\n<h4 style=\"color: #1e3a8a; font-size: 18px; margin-top: 25px; margin-bottom: 8px;\">Backend \u0111\u1ecdc d\u1eef li\u1ec7u input theo id hay name?<\/h4>\n<p style=\"text-align: justify;\">Theo <code>name<\/code>. Thu\u1ed9c t\u00ednh <code>id<\/code> ch\u1ec9 ph\u1ee5c v\u1ee5 CSS, JavaScript v\u00e0 g\u1eafn label ph\u00eda tr\u00ecnh duy\u1ec7t. Server nh\u1eadn d\u1eef li\u1ec7u qua c\u00e1c kh\u00f3a tr\u00f9ng v\u1edbi <code>name<\/code> c\u1ee7a input. Thi\u1ebfu <code>name<\/code> th\u00ec d\u00f9 \u00f4 c\u00f3 nh\u1eadp g\u00ec, gi\u00e1 tr\u1ecb c\u0169ng kh\u00f4ng t\u1edbi backend.<\/p>\n<\/div>\n<div style=\"border-top: 2px dashed #BFDBFE; margin-top: 50px; padding-top: 30px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 22px; font-weight: bold; margin-bottom: 15px;\">T\u1eeb \u00f4 nh\u1eadp \u0111\u1ea7u ti\u00ean \u0111\u1ebfn form ch\u1ea1y th\u1eadt<\/h3>\n<p style=\"text-align: justify;\">N\u1eafm v\u1eefng th\u1ebb input trong HTML l\u00e0 b\u1ea1n \u0111\u00e3 c\u00f3 n\u1ec1n \u0111\u1ec3 d\u1ef1ng m\u1ecdi form: \u0111\u0103ng nh\u1eadp, \u0111\u0103ng k\u00fd, kh\u1ea3o s\u00e1t, thanh to\u00e1n. Ghi nh\u1edb ba \u0111i\u1ec1u: <code>name<\/code> quy\u1ebft \u0111\u1ecbnh d\u1eef li\u1ec7u c\u00f3 t\u1edbi server hay kh\u00f4ng, ch\u1ecdn \u0111\u00fang <code>type<\/code> gi\u00fap nh\u1eadp li\u1ec7u chu\u1ea9n m\u00e0 kh\u00f4ng c\u1ea7n JavaScript, v\u00e0 validation HTML ch\u1ec9 l\u00e0 l\u1edbp \u0111\u1ea7u, backend m\u1edbi l\u00e0 n\u01a1i gi\u1eef an to\u00e0n th\u1eadt s\u1ef1. H\u1ecdc xong l\u00fd thuy\u1ebft, b\u01b0\u1edbc ti\u1ebfp theo l\u00e0 \u0111\u01b0a form l\u00ean m\u1ed9t m\u00e1y ch\u1ee7 ch\u1ea1y \u0111\u01b0\u1ee3c \u0111\u1ec3 ki\u1ec3m tra lu\u1ed3ng d\u1eef li\u1ec7u ho\u00e0n ch\u1ec9nh.<\/p>\n<div style=\"background: #EFF6FF; border: 1px solid #2563EB; padding: 30px; margin-top: 25px; border-radius: 12px; text-align: center;\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-size: 20px; font-weight: bold; color: #1e3a8a; margin-top: 0;\">S\u1eb5n s\u00e0ng \u0111\u01b0a form c\u1ee7a b\u1ea1n l\u00ean server th\u1eadt<\/p>\n<p style=\"font-size: 15px; margin-bottom: 20px; color: #4b5563;\">M\u1ed9t VPS c\u00f3 quy\u1ec1n root l\u00e0 \u0111\u1ee7 \u0111\u1ec3 c\u00e0i PHP, MySQL v\u00e0 deploy form g\u1eedi d\u1eef li\u1ec7u th\u1eadt.<\/p>\n<p><a style=\"background: #2563EB; color: #ffffff; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 6px; display: inline-block;\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">Thu\u00ea VPS t\u1ea1i InterData \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<p style=\"text-align: justify; font-size: 13px; font-style: italic; color: #6b7280; margin-top: 30px; border-top: 1px solid #E5E7EB; padding-top: 15px;\"><span style=\"font-size: 100%;\"><em>L\u01b0u \u00fd: c\u00e1c \u0111o\u1ea1n m\u00e3 HTML, CSS v\u00e0 PHP trong b\u00e0i ch\u1ec9 mang t\u00ednh tham kh\u1ea3o cho m\u1ee5c \u0111\u00edch h\u1ecdc t\u1eadp. C\u00fa ph\u00e1p, h\u00e0nh vi tr\u00ecnh duy\u1ec7t v\u00e0 c\u1ea5u h\u00ecnh c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo phi\u00ean b\u1ea3n tr\u00ecnh duy\u1ec7t, phi\u00ean b\u1ea3n PHP v\u00e0 m\u00f4i tr\u01b0\u1eddng m\u00e1y ch\u1ee7 th\u1ef1c t\u1ebf. B\u1ea1n n\u00ean ki\u1ec3m th\u1eed tr\u00ean m\u00f4i tr\u01b0\u1eddng dev, sao l\u01b0u d\u1eef li\u1ec7u v\u00e0 \u0111\u00e1nh gi\u00e1 r\u1ee7i ro b\u1ea3o m\u1eadt tr\u01b0\u1edbc khi \u00e1p d\u1ee5ng cho website ch\u1ea1y production.<\/em><\/span><\/p>\n\n\n<style>\n.interdata-plan-carousel,.interdata-plan-carousel *{box-sizing:border-box}\n.interdata-plan-carousel{--blue:#005bea;--blue-dark:#004dcc;--text:#071832;--muted:#516173;--border:#d8e6fb;--bg:#f3f8ff;--shadow:0 5px 14px rgba(0,62,145,.08);container-type:inline-size;background:var(--bg);padding:14px 40px 18px;position:relative;overflow:hidden}\n.interdata-carousel-heading{color:#f00;font-family:Roboto,sans-serif;font-size:18px;line-height:1.35;font-weight:800;text-align:center;margin:0 0 14px}\n.interdata-plan-viewport{overflow:hidden;width:100%}\n.interdata-plan-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 0 4px}\n.interdata-plan-track::-webkit-scrollbar{display:none}\n.interdata-plan-card{flex:0 0 calc((100% - 36px)\/4);min-width:0;background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px 10px 13px;min-height:370px;display:flex;flex-direction:column;scroll-snap-align:start;box-shadow:var(--shadow)}\n.interdata-plan-title{color:var(--blue-dark);font-size:16px;line-height:1.22;font-weight:800;text-align:center;margin:0 0 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.interdata-plan-price{color:var(--blue-dark);font-size:24px;line-height:1;font-weight:900;text-align:center;margin-bottom:12px;white-space:nowrap;letter-spacing:0}\n.interdata-plan-price span{font-size:10px;font-weight:800;margin-left:2px}\n.interdata-plan-badge{align-self:center;display:inline-flex;align-items:center;justify-content:center;background:#ff3934;color:#fff;border-radius:5px;padding:7px 8px;font-size:9px;line-height:1;font-weight:800;margin-bottom:15px;white-space:nowrap;max-width:100%}\n.interdata-plan-features{list-style:none!important;padding:0!important;margin:0!important}\n.interdata-plan-features li{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:12px;line-height:1.35;font-weight:700;text-align:left;margin:0 0 10px!important;padding:0!important}\n.interdata-plan-icon{width:14px;min-width:14px;height:14px;color:#0069ff;margin-top:2px}\n.interdata-plan-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n.interdata-plan-spacer{flex:1;min-height:16px}\n.interdata-plan-button{display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;background:var(--blue);color:#fff!important;border-radius:5px;font-size:13px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 14px rgba(0,91,234,.24);transition:transform .2s ease,background .2s ease}\n.interdata-plan-button:hover{background:var(--blue-dark);color:#fff!important;transform:translateY(-1px)}\n.interdata-carousel-arrow{position:absolute;top:50%;z-index:5;width:44px;height:54px;border:2px solid #fff!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,62,145,.32);display:flex!important;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-35%);transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}\n.interdata-carousel-arrow:hover{background:var(--blue-dark)!important;color:#fff!important;transform:translateY(-35%) scale(1.04)}\n.interdata-carousel-arrow:disabled{opacity:.78;cursor:not-allowed;background:#8aa6cf!important;color:#fff!important}\n.interdata-carousel-arrow:disabled:hover{background:#8aa6cf!important;color:#fff!important;transform:translateY(-35%)}\n.interdata-carousel-arrow svg{display:none!important}\n.interdata-carousel-arrow:before{content:none!important;display:none!important}\n.interdata-carousel-mark{display:block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:38px!important;font-weight:900!important;line-height:1!important;text-align:center!important;pointer-events:none!important;transform:translateY(-2px)}\n.interdata-carousel-prev{left:14px}\n.interdata-carousel-prev .interdata-carousel-mark{margin-left:-2px}\n.interdata-carousel-next{right:14px}\n.interdata-carousel-next .interdata-carousel-mark{margin-right:-2px}\n@container (max-width:640px){.interdata-plan-carousel{padding:12px 38px 16px}.interdata-plan-card{flex-basis:calc((100% - 12px)\/2);min-height:370px}.interdata-carousel-heading{font-size:16px}}\n@container (max-width:480px){.interdata-plan-carousel{padding:12px 34px 16px}.interdata-plan-card{flex-basis:100%;min-height:360px}.interdata-plan-price{font-size:25px}.interdata-carousel-arrow{width:34px;height:44px}.interdata-carousel-mark{font-size:32px!important}.interdata-carousel-prev{left:5px}.interdata-carousel-next{right:5px}}\n<\/style>\n\n<div class=\"interdata-plan-carousel\" data-interdata-carousel>\n  <div class=\"interdata-carousel-heading\">Si\u00eau \u01afu \u0110\u00e3i VPS \/ CLOUD SERVER - Ti\u1ebft Ki\u1ec7m \u0110\u1ebfn 70%<\/div>\n\n  <svg width=\"0\" height=\"0\" style=\"position:absolute;visibility:hidden\" aria-hidden=\"true\">\n    <symbol id=\"id-icon-cpu\" viewBox=\"0 0 24 24\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\"><\/rect><path d=\"M4 9h3M4 15h3M17 9h3M17 15h3M9 4v3M15 4v3M9 17v3M15 17v3\"><\/path><path d=\"M10 10h4v4h-4z\"><\/path><\/symbol>\n    <symbol id=\"id-icon-ram\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"><\/rect><path d=\"M7 16v2M11 16v2M15 16v2M19 16v2M7 11h1M11 11h1M15 11h1\"><\/path><\/symbol>\n    <symbol id=\"id-icon-storage\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"><\/rect><path d=\"M9 7h6\"><\/path><circle cx=\"12\" cy=\"16\" r=\"1.5\"><\/circle><\/symbol>\n    <symbol id=\"id-icon-network\" viewBox=\"0 0 24 24\"><path d=\"M5 12.5a10 10 0 0 1 14 0\"><\/path><path d=\"M8.5 16a5 5 0 0 1 7 0\"><\/path><path d=\"M12 19h.01\"><\/path><\/symbol>\n    <symbol id=\"id-icon-gift\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"13\" rx=\"2\"><\/rect><path d=\"M12 8v13M3 12h18\"><\/path><path d=\"M7.5 8C6.1 8 5 6.9 5 5.5S6.1 3 7.5 3C10 3 12 8 12 8\"><\/path><path d=\"M16.5 8C17.9 8 19 6.9 19 5.5S17.9 3 16.5 3C14 3 12 8 12 8\"><\/path><\/symbol>\n  <\/svg>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-prev\" type=\"button\" aria-label=\"Xem 4 g\u00f3i tr\u01b0\u1edbc\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8249;<\/span>\n  <\/button>\n\n  <div class=\"interdata-plan-viewport\">\n    <div class=\"interdata-plan-track\">\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">299K<span>\/3 th\u00e1ng<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-value-plans-2026\/best-value-plans-premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">999K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>3 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Pro<\/h3>\n        <div class=\"interdata-plan-price\">2.599K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>6 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 350Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Ultra<\/h3>\n        <div class=\"interdata-plan-price\">5.679K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>12 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>180GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 450Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-ultra\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 1<\/h3>\n        <div class=\"interdata-plan-price\">988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCPU<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-1\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 2<\/h3>\n        <div class=\"interdata-plan-price\">2.988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-2\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Base<\/h3>\n        <div class=\"interdata-plan-price\">2.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 80GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>6GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>60GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Pro<\/h3>\n        <div class=\"interdata-plan-price\">5.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 200GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>8 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>12GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>160GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-next\" type=\"button\" aria-label=\"Xem 4 g\u00f3i ti\u1ebfp theo\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8250;<\/span>\n  <\/button>\n<\/div>\n\n<script>\n(function(){\n  function setupInterDataCarousel(root){\n    var track=root.querySelector('.interdata-plan-track');\n    var prev=root.querySelector('.interdata-carousel-prev');\n    var next=root.querySelector('.interdata-carousel-next');\n    if(!track||!prev||!next||track.dataset.ready==='1')return;\n    track.dataset.ready='1';\n\n    function pageWidth(){\n      return track.clientWidth;\n    }\n\n    function updateButtons(){\n      var maxScroll=track.scrollWidth-track.clientWidth-2;\n      prev.disabled=track.scrollLeft<=2;\n      next.disabled=track.scrollLeft>=maxScroll;\n    }\n\n    prev.addEventListener('click',function(){\n      track.scrollBy({left:-pageWidth(),behavior:'smooth'});\n    });\n\n    next.addEventListener('click',function(){\n      track.scrollBy({left:pageWidth(),behavior:'smooth'});\n    });\n\n    track.addEventListener('scroll',function(){\n      window.requestAnimationFrame(updateButtons);\n    });\n\n    window.addEventListener('resize',updateButtons);\n    updateButtons();\n  }\n\n  function initInterDataCarousels(){\n    document.querySelectorAll('[data-interdata-carousel]').forEach(setupInterDataCarousel);\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initInterDataCarousels);\n  }else{\n    initInterDataCarousels();\n  }\n})();\n<\/script>\n\n\t<div id=\"gap-1075421834\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1075421834 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb input trong HTML l\u00e0 ph\u1ea7n t\u1eed b\u1ea1n s\u1ebd d\u00f9ng nhi\u1ec1u nh\u1ea5t khi l\u00e0m form \u0111\u0103ng nh\u1eadp, \u0111\u0103ng k\u00fd, kh\u1ea3o s\u00e1t hay \u00f4 t\u00ecm ki\u1ebfm. Sai m\u1ed9t thu\u1ed9c t\u00ednh nh\u1ecf l\u00e0 d\u1eef li\u1ec7u g\u1eedi v\u1ec1 backend h\u1ecfng, ho\u1eb7c m\u1eadt kh\u1ea9u l\u1ed9 nguy\u00ean v\u0103n tr\u00ean m\u00e0n h\u00ecnh. B\u00e0i vi\u1ebft n\u00e0y t\u1ed5ng h\u1ee3p \u0111\u1ee7 lo\u1ea1i type, v\u00ed<\/p>\n","protected":false},"author":2,"featured_media":42385,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140],"tags":[],"class_list":["post-42383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lap-trinh"],"_links":{"self":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/42383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/comments?post=42383"}],"version-history":[{"count":1,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/42383\/revisions"}],"predecessor-version":[{"id":42387,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/42383\/revisions\/42387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media\/42385"}],"wp:attachment":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media?parent=42383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/categories?post=42383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/tags?post=42383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}