Understanding The maxlength Attribute

The maxlength attribute is a crucial component of HTML form elements, specifically for and </code>. It dictates the maximum number of characters, measured in UTF-16 code units, that a user can enter into the input field. This attribute is essential for controlling data input, preventing overly long strings, and maintaining data integrity.</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">When used effectively, <code>maxlength</code> significantly improves user experience by providing clear input constraints and aids in building robust and reliable forms. If the entered text exceeds the <code>maxlength</code> value, constraint validation is triggered. This guide provides a deep dive into its implementation, implications, and best practices.</p></section><section data-section-id="usage"><h2 id="usage" class="text-3xl lg:text-4xl font-bold text-primary mb-8 leading-tight"><span class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">Implementing</span> <!-- -->maxlength in HTML Forms</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">To use <code>maxlength</code>, simply include it within your <code><input></code> or <code><textarea></code> tags, setting its value to a positive integer (or zero). For instance, <code><input type="text" maxlength="50" name="username"></code> restricts the input to a maximum of 50 characters. Similarly, <code><textarea maxlength="200" name="comments"> limits the number of characters in a text area to 200.

If maxlength is not specified or has an invalid value, the input will have no maximum length. It's crucial to note that the length is often, but not always, equivalent to the number of characters. The maxlength must be greater than or equal to the minlength (if the minlength attribute is valid).

Constraint Validation and User Experience

Constraint validation occurs when the value of the input element changes by the user. While browsers typically prevent the user from entering more text than maxlength permits, it is good practice to implement client-side validation as well to proactively prevent incorrect data.

When the input's text length exceeds maxlength, the element's validity.tooLong property becomes true. The read-only property of a or </code> object's <code>maxLength</code> property will be true if the length exceeds the value of <code>maxlength</code>.</p><blockquote class="relative my-12 p-8 surface-elevated rounded-2xl border-l-4 border-indigo-500 shadow-glow overflow-hidden" style="opacity:0;transform:translateX(-20px)"><div class="absolute inset-0 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 opacity-50"></div><div class="absolute top-6 left-6 text-6xl text-indigo-500/20 leading-none font-serif">“</div><div class="relative z-10"><p class="text-xl md:text-2xl font-medium text-blue-700 italic leading-relaxed pl-8 mb-4">The maxlength attribute is a cornerstone of form validation, providing essential control over user input.</p><cite class="text-sm text-blue-600 font-semibold not-italic pl-8 flex items-center gap-2"><div class="w-8 h-0.5 bg-blue-600 rounded-full"></div>Web Development Expert</cite></div><div class="absolute bottom-4 right-6 w-12 h-12 bg-gradient-primary opacity-10 rounded-full blur-xl"></div></blockquote><div class="transition-all duration-500 opacity-100 scale-100"><div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-8 my-12"><div class="text-center mb-8"><h3 class="text-2xl lg:text-3xl font-bold text-primary mb-4"><span class="text-gradient">Interactive Examples & Resources</span></h3><p class="text-neutral-700 text-lg">Explore these resources to learn more about maxlength.</p></div><div class="grid gap-4"><div class="surface rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg"><div class="w-full p-6 text-left flex items-center justify-between interactive"><div class="flex items-center gap-4"><span class="text-xl">💻</span><div><h4 class="font-semibold text-primary text-lg">Try it Example</h4><p class="text-neutral-700">Experiment with maxlength using interactive code snippets.</p></div></div></div></div><div class="surface rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg"><div class="w-full p-6 text-left flex items-center justify-between interactive"><div class="flex items-center gap-4"><span class="text-xl">📜</span><div><h4 class="font-semibold text-primary text-lg">Constraint Validation Guide</h4><p class="text-neutral-700">Learn about constraint validation and its importance.</p></div></div></div></div><div class="surface rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg"><div class="w-full p-6 text-left flex items-center justify-between interactive"><div class="flex items-center gap-4"><span class="text-xl">🌐</span><div><h4 class="font-semibold text-primary text-lg">MDN Documentation</h4><p class="text-neutral-700">Visit the official MDN documentation for detailed information.</p></div></div></div></div></div></div></div></section><section data-section-id="utf16"><h2 id="utf16" class="text-3xl lg:text-4xl font-bold text-primary mb-8 leading-tight"><span class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">UTF-16</span> <!-- -->Code Units and Character Length</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">The <code>maxlength</code> attribute measures input length in UTF-16 code units, which is often equivalent to characters but not always. For characters outside the Basic Multilingual Plane (BMP), such as certain emojis or characters in less common languages, a single character may be represented by two UTF-16 code units (surrogate pairs).</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">Understanding this distinction is crucial, as exceeding <code>maxlength</code> can unexpectedly truncate user input if the text contains these more complex characters.</p></section><section data-section-id="browser-compatibility"><h2 id="browser-compatibility" class="text-3xl lg:text-4xl font-bold text-primary mb-8 leading-tight"><span class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">Browser</span> <!-- -->Compatibility</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">The <code>maxlength</code> attribute is widely supported across all modern browsers, including Chrome, Firefox, Safari, and Edge. The behavior of <code>maxlength</code> is consistent, generally preventing input beyond the specified limit. However, for the best user experience, always test across multiple browsers and devices.</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">Developers should always validate user input on the server-side. While <code>maxlength</code> helps control the user experience on the client-side, server-side validation is vital to prevent data corruption and security vulnerabilities, regardless of client-side constraints.</p></section></div></article></main><aside class="w-full lg:w-4/12"><div class="sticky top-8 transition-all duration-500 opacity-100"><div class="space-y-6"><div class="flex justify-center lg:justify-start"><button class="flex items-center gap-3 px-5 py-3 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 interactive font-medium surface-elevated text-primary hover:shadow-glow" aria-label="Toggle focus mode" type="button" tabindex="0"><div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-5 h-5"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></div><span class="text-sm font-semibold">Focus Mode</span></button></div><div class="bg-neutral-50 rounded-xl p-6 backdrop-blur-md"><h3 class="text-lg font-bold text-blue-700 mb-4">Table of Contents</h3><nav aria-label="Article sections"><ul class="space-y-2"><li class="stagger-item"><button class="block w-full text-left text-sm rounded-lg py-3 px-4 border-l-4 transition-all duration-300 text-neutral-700 hover:text-blue-700 border-transparent hover:border-indigo-500 hover:bg-indigo-50"><span class="text-xs mr-3 font-bold text-neutral-400">01</span><span class="font-medium text-neutral-400">Understanding The maxlength Attribute</span></button></li><li class="stagger-item"><button class="block w-full text-left text-sm rounded-lg py-3 px-4 border-l-4 transition-all duration-300 text-neutral-700 hover:text-blue-700 border-transparent hover:border-indigo-500 hover:bg-indigo-50"><span class="text-xs mr-3 font-bold text-neutral-400">02</span><span class="font-medium text-neutral-400">Implementing maxlength in HTML Forms</span></button></li><li class="stagger-item"><button class="block w-full text-left text-sm rounded-lg py-3 px-4 border-l-4 transition-all duration-300 text-neutral-700 hover:text-blue-700 border-transparent hover:border-indigo-500 hover:bg-indigo-50"><span class="text-xs mr-3 font-bold text-neutral-400">03</span><span class="font-medium text-neutral-400">Constraint Validation and User Experience</span></button></li><li class="stagger-item"><button class="block w-full text-left text-sm rounded-lg py-3 px-4 border-l-4 transition-all duration-300 text-neutral-700 hover:text-blue-700 border-transparent hover:border-indigo-500 hover:bg-indigo-50"><span class="text-xs mr-3 font-bold text-neutral-400">04</span><span class="font-medium text-neutral-400">UTF-16 Code Units and Character Length</span></button></li><li class="stagger-item"><button class="block w-full text-left text-sm rounded-lg py-3 px-4 border-l-4 transition-all duration-300 text-neutral-700 hover:text-blue-700 border-transparent hover:border-indigo-500 hover:bg-indigo-50"><span class="text-xs mr-3 font-bold text-neutral-400">05</span><span class="font-medium text-neutral-400">Browser Compatibility</span></button></li></ul></nav></div><div class="bg-neutral-50 rounded-xl p-6 backdrop-blur-md"><h3 class="text-lg font-bold text-blue-700 mb-4 flex items-center gap-2"><div class="w-2 h-2 bg-yellow-500 rounded-full"></div>Reading Progress</h3><div class="space-y-4"><div class="flex justify-between text-sm"><span class="text-neutral-700 font-medium">Progress</span><span class="text-blue-700 font-bold">0<!-- -->%</span></div><div class="relative w-full bg-gray-200 rounded-full h-3 overflow-hidden"><div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 h-full rounded-full transition-all duration-500 ease-out shadow-glow relative" style="width:0%"><div class="absolute inset-0 bg-white/20 rounded-full animate-pulse"></div></div></div><p class="text-xs text-neutral-400 font-medium">🌱 Just getting started...</p></div></div><div class="bg-neutral-50 rounded-xl p-6 backdrop-blur-md"><h3 class="text-lg font-bold text-blue-700 mb-4 flex items-center gap-2"><div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>Related Topics</h3><div class="w-full" data-orientation="vertical"><div data-state="open" data-orientation="vertical" class="border-b"><h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="radix-«R5kmjrnctb»" aria-expanded="true" data-state="open" data-orientation="vertical" id="radix-«R1kmjrnctb»" class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-xs text-left" data-radix-collection-item="">HTML input maxlength Attribute - GeeksforGeeks<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="open" id="radix-«R5kmjrnctb»" role="region" aria-labelledby="radix-«R1kmjrnctb»" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"><div class="pb-4 pt-0 flex flex-col gap-2 text-xs"><p>Learn about the HTML maxlength attribute to set a maximum character limit for input fields, ensuring data consistency and user input validation.</p><a class="text-blue-500" rel="nofollow" target="_blank" href="https://www.geeksforgeeks.org/html/html-input-maxlength-attribute">View more</a></div></div></div><div data-state="closed" data-orientation="vertical" class="border-b"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-«R6kmjrnctb»" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-«R2kmjrnctb»" class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-xs text-left" data-radix-collection-item="">How can the size of an input text box be defined in HTML?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-«R6kmjrnctb»" hidden="" role="region" aria-labelledby="radix-«R2kmjrnctb»" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-«R7kmjrnctb»" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-«R3kmjrnctb»" class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-xs text-left" data-radix-collection-item="">HTML input size Attribute - W3Schools<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-«R7kmjrnctb»" hidden="" role="region" aria-labelledby="radix-«R3kmjrnctb»" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div></div><div class="mt-6 p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100"><p class="text-xs text-indigo-700 font-medium flex items-center gap-2"><span class="text-sm">💡</span>Topics update based on your current reading section</p></div></div><div class="bg-neutral-50 rounded-xl p-6 backdrop-blur-md"><h3 class="text-lg font-bold text-blue-700 mb-4 flex items-center gap-2"><div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>Discovery Topics</h3><div class="grid grid-cols-1 gap-2"><a href="/kh/recover-your-crypto-how-to-get-verification-codes-from-an-old-number-or-bitget"><div class="flex gap-2 p-3 bg-blue-50 hover:bg-blue-100 transition-all duration-300 rounded-lg"><div class="space-y-1"><h4 class="text-sm font-medium line-clamp-2">Recover Your Crypto: How to Get Verification Codes from an Old Number | Bitget</h4><p class="text-xs text-gray-500 line-clamp-2">Locked out of your crypto account? Learn how to retrieve verification codes when you no longer have access to your old phone number. Secure your Bitget account today!</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/html-maxlength-attribute-definition-usage-and-browser-compatibility"><div class="flex gap-2 p-3 bg-blue-50 hover:bg-blue-100 transition-all duration-300 rounded-lg"><div class="space-y-1"><h4 class="text-sm font-medium line-clamp-2">HTML maxlength Attribute: Definition, Usage, and Browser Compatibility</h4><p class="text-xs text-gray-500 line-clamp-2">Learn how the HTML maxlength attribute limits user input in <input> and <textarea> elements. Explore its impact, validation, and compatibility across browsers.</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/naturalreader-text-to-speech-technology-for-personal-and-commercial-use"><div class="flex gap-2 p-3 bg-blue-50 hover:bg-blue-100 transition-all duration-300 rounded-lg"><div class="space-y-1"><h4 class="text-sm font-medium line-clamp-2">NaturalReader: Text-to-Speech Technology for Personal & Commercial Use</h4><p class="text-xs text-gray-500 line-clamp-2">Discover NaturalReader's AI-powered text-to-speech technology. Convert text to speech in 99+ languages. Ideal for personal, educational, and commercial applications.</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/navigating-the-california-dmv-a-guide-for-non-english-speakers"><div class="flex gap-2 p-3 bg-blue-50 hover:bg-blue-100 transition-all duration-300 rounded-lg"><div class="space-y-1"><h4 class="text-sm font-medium line-clamp-2">Navigating the California DMV: A Guide for Non-English Speakers</h4><p class="text-xs text-gray-500 line-clamp-2">Simplify your California DMV experience! This guide offers essential tips, contact details, and resources, including AI Phone, for non-English speakers.</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/google-password-manager-review-2025-is-it-safe-and-right-for-you"><div class="flex gap-2 p-3 bg-blue-50 hover:bg-blue-100 transition-all duration-300 rounded-lg"><div class="space-y-1"><h4 class="text-sm font-medium line-clamp-2">Google Password Manager Review 2025: Is It Safe & Right for You?</h4><p class="text-xs text-gray-500 line-clamp-2">Unbiased review of Google Password Manager: security, features, ease of use, and if it's the best choice for you in 2025. Is it better than 1Password or Dashlane?</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a></div></div></div></div></aside></div></div></div><!--$?--><template id="B:0"></template><!--/$--><!--$?--><template id="B:1"></template><!--/$--><footer class="w-full bg-[#0f172a] text-white py-7"><div class="max-w-7xl mx-auto px-6 mb-16"><div class="flex flex-col md:flex-row justify-between items-center gap-8"><div class="flex flex-col items-center text-center gap-4"><svg class="w-14 h-14 fill-blue-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.248 6.685c-.656 2.694-.614 2.55-1.209 5.014-.013.227-.201.406-.43.406-.025 0-.05-.002-.074-.006h.003-.675c-.02.004-.044.006-.067.006-.203 0-.37-.151-.396-.346v-.002c-.577-1.846-1.35-4.41-1.87-6.125-.192-.633-.066-.618.436-.605.174.005.342 0 .515 0 .012-.001.026-.002.041-.002.196 0 .358.145.385.333v.002c.169.605.281 1.069 1.246 4.88.018.075.042.146.066.215h.051c.023-.094.051-.182.075-.277q.548-2.313 1.092-4.63c.113-.48.314-.525.8-.525h.356c.32.005.422.07.502.389.281 1.097 1.102 4.77 1.251 5.174.24-.858-.084.37 1.336-5.108.098-.379.192-.454.577-.454h.591c.253.005.328.084.267.333-.113.446-.136.464-1.935 6.228-.146.464-.197.506-.684.506h-.497c-.342 0-.431-.061-.515-.394-.202-.759-1.092-4.485-1.238-5.01zm-6.364 5.211c.068.139.208.233.37.233.114 0 .216-.046.291-.121l.295-.197c.32-.211.342-.295.169-.633-.186-.354-.296-.773-.296-1.218 0-.015 0-.03 0-.045v.002c0-.146.028-2.61-.042-3.13-.062-.87-.665-1.584-1.471-1.811l-.014-.003c-.353-.098-.758-.154-1.177-.154-.126 0-.252.005-.375.015l.016-.001c-.736.029-1.42.224-2.025.547l.025-.012c-.091.049-.159.13-.191.227l-.001.003c-.026.118-.041.254-.041.393 0 .061.003.122.008.182l-.001-.008c.028.277.122.328.384.24.24-.08.469-.182.708-.253.345-.128.743-.202 1.159-.202.323 0 .635.045.931.128l-.024-.006c.317.095.564.334.668.639l.002.007c.077.258.122.554.122.861 0 .094-.004.188-.012.28l.001-.012c0 .258-.005.258-.258.211-.43-.107-.923-.169-1.431-.169-.187 0-.373.008-.556.025l.024-.002c-.726.053-1.36.406-1.787.933l-.004.005c-.26.36-.416.811-.416 1.298 0 .197.025.387.073.569l-.003-.016c.104.682.588 1.228 1.225 1.422l.012.003c.28.1.603.158.94.158.667 0 1.282-.227 1.77-.608l-.006.005c.178-.131.338-.29.52-.446.146.234.272.454.417.656zm-.72-2.887h.005c.111 0 .201.09.201.201 0 .014-.001.027-.004.041v-.001c-.01.178.005.356-.014.534-.05.523-.377.959-.83 1.164l-.009.004c-.294.154-.641.245-1.01.245-.075 0-.149-.004-.222-.011l.009.001c-.529-.031-.946-.467-.946-1.001 0-.082.01-.162.029-.239l-.001.007c.026-.548.46-.987 1.004-1.021h.003c.21-.034.452-.053.698-.053.388 0 .766.048 1.126.138l-.032-.007zm16.346 3.051c.825-.277 1.408-1.043 1.408-1.945 0-.141-.014-.279-.041-.412l.002.013c-.107-.653-.564-1.177-1.169-1.379l-.012-.004c-.912-.286-1.659-.575-2.383-.905l.129.053c-.209-.105-.351-.315-.356-.559v-.001c-.006-.037-.009-.079-.009-.122 0-.419.318-.763.726-.805h.003c.211-.05.453-.078.702-.078.217 0 .43.022.635.063l-.02-.003c.342.066.67.197 1.003.295.131.042.277.098.366-.075.046-.097.073-.211.073-.33 0-.298-.166-.557-.411-.689l-.004-.002c-.494-.236-1.074-.373-1.686-.373-.546 0-1.066.11-1.54.308l.026-.01c-.725.288-1.228.984-1.228 1.797 0 .779.462 1.451 1.127 1.755l.012.005c.361.174.754.277 1.134.417s.759.272 1.13.426c.256.142.427.411.427.72 0 .286-.146.537-.368.684l-.003.002c-1.298.72-3.04-.113-3.243-.178-.154-.051-.248.01-.295.174-.038.089-.06.193-.06.302 0 .369.255.679.599.761l.005.001c.531.213 1.146.336 1.79.336.546 0 1.072-.089 1.563-.253l-.035.01zm-7.634 7.625c2.498-.268 4.766-1.052 6.763-2.244l-.076.042c.375-.22.726-.48 1.082-.736.342-.24.15-.862-.53-.572-2.344 1.029-5.066 1.687-7.925 1.821l-.051.002c-.3.015-.651.023-1.004.023-1.152 0-2.284-.088-3.389-.258l.123.016c-3.117-.449-5.924-1.458-8.429-2.927l.109.059c-.088-.059-.189-.107-.297-.139l-.008-.002c-.23-.051-.361.22-.113.454 3.069 2.838 7.189 4.578 11.716 4.578h.014-.001c.675-.038 1.35-.042 2.015-.117zm8.187-4.32c.694.038.909.277.736.946-.178.694-.436 1.369-.651 2.053-.042.136-.197.295-.038.413.174.122.305-.047.422-.154.455-.433.813-.962 1.044-1.555l.01-.029c.258-.564.408-1.224.408-1.919 0-.016 0-.031 0-.047v.002c-.01-.29-.084-.413-.366-.492-.224-.069-.487-.122-.757-.148l-.016-.001c-.183-.023-.394-.036-.609-.036-.836 0-1.626.197-2.327.546l.03-.014c-.155.084-.289.176-.412.28l.004-.003c-.051.042-.15.248.113.286.024.002.053.003.081.003.069 0 .137-.006.202-.018l-.007.001c.526-.075 1.134-.118 1.751-.118.134 0 .267.002.4.006h-.019z"></path></svg><p class="text-lg font-medium">Chứng nhận AWS</p></div><div class="flex flex-col items-center text-center gap-4"><svg class="h-14 w-14 fill-blue-600" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>users-solid</title><path class="clr-i-solid clr-i-solid-path-1" d="M12,16.14q-.43,0-.87,0a8.67,8.67,0,0,0-6.43,2.52l-.24.28v8.28H8.54v-4.7l.55-.62.25-.29a11,11,0,0,1,4.71-2.86A6.59,6.59,0,0,1,12,16.14Z"></path><path class="clr-i-solid clr-i-solid-path-2" d="M31.34,18.63a8.67,8.67,0,0,0-6.43-2.52,10.47,10.47,0,0,0-1.09.06,6.59,6.59,0,0,1-2,2.45,10.91,10.91,0,0,1,5,3l.25.28.54.62v4.71h3.94V18.91Z"></path><path class="clr-i-solid clr-i-solid-path-3" d="M11.1,14.19c.11,0,.2,0,.31,0a6.45,6.45,0,0,1,3.11-6.29,4.09,4.09,0,1,0-3.42,6.33Z"></path><path class="clr-i-solid clr-i-solid-path-4" d="M24.43,13.44a6.54,6.54,0,0,1,0,.69,4.09,4.09,0,0,0,.58.05h.19A4.09,4.09,0,1,0,21.47,8,6.53,6.53,0,0,1,24.43,13.44Z"></path><circle class="clr-i-solid clr-i-solid-path-5" cx="17.87" cy="13.45" r="4.47"></circle><path class="clr-i-solid clr-i-solid-path-6" d="M18.11,20.3A9.69,9.69,0,0,0,11,23l-.25.28v6.33a1.57,1.57,0,0,0,1.6,1.54H23.84a1.57,1.57,0,0,0,1.6-1.54V23.3L25.2,23A9.58,9.58,0,0,0,18.11,20.3Z"></path><rect x="0" y="0" width="36" height="36" fill-opacity="0"></rect></svg><p class="text-lg font-medium">Hơn 2,000+ doanh nghiệp tin tưởng</p></div><div class="flex flex-col items-center text-center gap-4"><svg class="w-14 h-14 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.37752 5.08241C3 5.62028 3 7.21907 3 10.4167V11.9914C3 17.6294 7.23896 20.3655 9.89856 21.5273C10.62 21.8424 10.9807 22 12 22V2C11.1886 2 10.405 2.26824 8.83772 2.80472L8.26491 3.00079C5.25832 4.02996 3.75503 4.54454 3.37752 5.08241Z" class="fill-blue-600"></path><path opacity="0.5" d="M21 11.9914V10.4167C21 7.21907 21 5.62028 20.6225 5.08241C20.245 4.54454 18.7417 4.02996 15.7351 3.00079L15.1623 2.80472C13.595 2.26824 12.8114 2 12 2V22C13.0193 22 13.38 21.8424 14.1014 21.5273C16.761 20.3655 21 17.6294 21 11.9914Z" class="fill-blue-600"></path></svg><p class="text-lg font-medium">Bảo mật cấp doanh nghiệp</p></div></div></div><div class="h-[1px] bg-gradient-to-r from-transparent via-neutral-200 to-transparent w-full"></div><div class="max-w-full mx-auto lg:px-32 px-6"><div class="flex justify-between flex-col md:flex-row gap-8 py-10"><div class="flex flex-col gap-4"><p class="text-xl font-bold">ChatbotViet</p><p class="text-neutral-400">Trợ lý ảo thông minh - Giải pháp tối ưu cho doanh nghiệp hiện đại</p><div class="flex flex-col gap-4"><a href="https://www.google.com/maps?q=231+P.+Chùa+Bộc,+Trung+Liệt,+Đống+Đa,+Hà+Nội+100000,+Việt+Nam" target="_blank" rel="noopener noreferrer" class="flex gap-2 items-center hover:text-blue-400" title="Mở bản đồ trên Google Maps"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><p>231 Chùa Bộc, Quận Đống Đa, Hà Nội</p></a><a href="mailto:human_support@chatbotviet.com" class="flex gap-2 items-center hover:text-blue-400" title="Gửi email"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg><p>human_support@chatbotviet.com</p></a><a href="tel:+84399323699" class="flex gap-2 items-center hover:text-blue-400" title="Gọi điện"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg><p>+84 399 323 699</p></a></div><div class="flex gap-4 mt-2"><a rel="nofollow" target="_blank" class="hover:text-blue-400" href="https://www.facebook.com/chatbotviet"><span class="sr-only">Facebook</span><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a><a class="hover:text-blue-400" href="https://www.tiktok.com/@chatbotviet.ai"><span class="sr-only">YouTube</span><svg fill="currentColor" class="w-6 h-6" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z"></path></svg></a><a class="hover:text-blue-400" href="https://www.linkedin.com/in/chatbot-viet-81914b281"><span class="sr-only">LinkedIn</span><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg></a></div></div><div class="flex flex-col gap-4"><h3 class="text-xl font-bold">Sản phẩm</h3><a class="hover:text-blue-400" href="#">Tính năng</a><a class="hover:text-blue-400" href="/guide">Hướng dẫn sử dụng</a><a class="hover:text-blue-400" href="/dang-ky">Bảng giá</a><a class="hover:text-blue-400" href="/chinh-sach-ban-hang">Chính sách bán hàng</a><a class="hover:text-blue-400" href="/huong-dan-thanh-toan-vnpay">Hướng dẫn thanh toán VNPAY</a></div><div class="flex flex-col gap-4"><h3 class="text-xl font-bold">Công ty</h3><a class="hover:text-blue-400" href="/contact">Về chúng tôi</a><a class="hover:text-blue-400" href="/blog">Bài viết</a><a class="hover:text-blue-400" href="/case-study">Dự án tiêu biểu</a></div><div class="flex flex-col gap-4"><h3 class="text-xl font-bold">Hỗ trợ & Pháp lý</h3><a class="hover:text-blue-400" href="/faqs">Câu hỏi thường gặp</a><a class="hover:text-blue-400" href="/privacy">Chính sách bảo mật</a><a class="hover:text-blue-400" href="/term-policy">Điều khoản dịch vụ</a></div><div class="flex flex-col gap-4"><h3 class="text-xl font-bold">Kiến Thức Thú Vị</h3><a class="hover:text-blue-400" href="/kh/top-ai-chatbots-2024-chatgpt-alternatives-free-and-paid">Top AI chatbot tốt nhất 2025</a></div></div></div><div class="h-[1px] bg-gradient-to-r from-transparent via-neutral-200 to-transparent w-full"></div><div class="max-w-7xl mx-auto px-6 mt-10 flex flex-col md:flex-row justify-center gap-4"><a class="bg-gradient-to-r from-[#cc4e85] via-[#af3da4] to-[#8122d9] text-white px-8 py-3 rounded-lg text-center hover:opacity-90 transition-opacity" href="https://ai.chatbotviet.com">Dùng thử miễn phí</a><button class="border border-gray-600 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition-colors">Đặt lịch tư vấn</button></div><div class="max-w-7xl mx-auto px-6 mt-7 text-center text-gray-400"><p>© <!-- -->2025<!-- --> ChatbotViet. Đã đăng ký bản quyền.</p></div></footer><noscript><img alt="facebook-pixel" loading="lazy" width="1" height="1" decoding="async" data-nimg="1" style="color:transparent;display:none" src="https://www.facebook.com/tr?id=995675879101609&ev=PageView&noscript=1"/></noscript><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M3BP3NPK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script src="/_next/static/chunks/webpack-d53410365225e4e2.js" async=""></script><div hidden id="S:0"></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script><div hidden id="S:1"></div><script>$RC("B:1","S:1")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[96063,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"GoogleTagManager\"]\n3:I[82454,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"default\"]\n4:I[57221,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"default\"]\n5:I[87555,[],\"\"]\n6:I[31295,[],\"\"]\n7:I[6874,[\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"4345\",\"static/chunks/app/not-found-07f5fa5d0b657002.js\"],\"\"]\n8:I[78971,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"default\"]\n9:I[63440,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"default\"]\na:I[26259,[\"3063\",\"static/chunks/3063-7"])</script><script>self.__next_f.push([1,"7d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"GoogleAnalytics\"]\nb:I[69243,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end)/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"\"]\nc:I[33063,[\"3063\",\"static/chunks/3063-77d62d84700036fa.js\",\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"4219\",\"static/chunks/4219-934e60603e1ae628.js\",\"2500\",\"static/chunks/2500-7024cb06ee928f9a.js\",\"7177\",\"static/chunks/app/layout-6c6312e1167ee880.js\"],\"Image\"]\ne:I[59665,[],\"MetadataBoundary\"]\n10:I[59665,[],\"OutletBoundary\"]\n13:I[74911,[],\"AsyncMetadataOutlet\"]\n15:I[59665,[],\"ViewportBoundary\"]\n17:I[26614,[],\"\"]\n18:\"$Sreact.suspense\"\n19:I[74911,[],\"AsyncMetadata\"]\n1b:I[54345,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end)/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"FocusModeProvider\"]\n1c:I[20433,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end)/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"ReadingProgressBar\"]\n1d:I[57874,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end"])</script><script>self.__next_f.push([1,")/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"HeroSection\"]\n1e:I[94330,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end)/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"ArticleBody\"]\n1f:I[7503,[\"4277\",\"static/chunks/4277-8448fba076ff7080.js\",\"6874\",\"static/chunks/6874-aede18ee20bc35ac.js\",\"1978\",\"static/chunks/1978-ca868f0180986620.js\",\"2282\",\"static/chunks/2282-bb28a3c5d3431995.js\",\"8971\",\"static/chunks/app/(front-end)/kh/%5Bkeyword%5D/page-11f00ba971646ad8.js\"],\"ContextualSidebar\"]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/db23a03704e169ff.css\",\"style\"]\n:HL[\"/_next/static/css/081a0afca5a9bd20.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"fgoUvkeb8k22tOAKn2VT_\",\"p\":\"\",\"c\":[\"\",\"kh\",\"html-maxlength-attribute-definition-usage-and-validation\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(front-end)\",{\"children\":[\"kh\",{\"children\":[[\"keyword\",\"html-maxlength-attribute-definition-usage-and-validation\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/db23a03704e169ff.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/081a0afca5a9bd20.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"$L2\",null,{\"gtmId\":\"GTM-M3BP3NPK\"}],[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 antialiased bg-gradient-to-b from-white to-blue-50\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"h-[calc(100vh-8rem)] flex items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-4 flex flex-col items-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-blue-700 text-4xl font-bold text-center\",\"children\":\"Not Found\"}],[\"$\",\"p\",null,{\"className\":\"text-xl font-semibold\",\"children\":\"Could not find requested resource\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 bg-blue-600 hover:bg-blue-800 w-48 rounded-xl text-white text-center font-bold\",\"children\":\"Return Home\"}]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{\"gaId\":\"G-8LRD62YL4M\"}],[\"$\",\"$Lb\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"children\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"pbpfn5gvda\\\");\\n \"}],[[\"$\",\"$Lb\",null,{\"id\":\"pixel-fb-code\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n !function(f,b,e,v,n,t,s)\\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\\n n.queue=[];t=b.createElement(e);t.async=!0;\\n t.src=v;s=b.getElementsByTagName(e)[0];\\n s.parentNode.insertBefore(t,s)}(window, document,'script',\\n 'https://connect.facebook.net/en_US/fbevents.js');\\n fbq('init', '995675879101609');\\n fbq('track', 'PageView');\\n \"}}],[\"$\",\"noscript\",null,{\"children\":[\"$\",\"$Lc\",null,{\"unoptimized\":true,\"alt\":\"facebook-pixel\",\"height\":\"1\",\"width\":\"1\",\"style\":{\"display\":\"none\"},\"src\":\"https://www.facebook.com/tr?id=995675879101609\u0026ev=PageView\u0026noscript=1\"}]}]],[[\"$\",\"$Lb\",null,{\"id\":\"google-swg-basic\",\"strategy\":\"afterInteractive\",\"async\":true,\"src\":\"https://news.google.com/swg/js/v1/swg-basic.js\",\"type\":\"application/javascript\",\"data-iframe-title\":\"Google Subscribe Widget\"}],[\"$\",\"$Lb\",null,{\"id\":\"google-swg-init\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (self.SWG_BASIC = self.SWG_BASIC || []).push( basicSubscriptions =\u003e {\\n basicSubscriptions.init({\\n type: \\\"NewsArticle\\\",\\n isPartOfType: [\\\"Product\\\"],\\n isPartOfProductId: \\\"CAowiay6DA:openaccess\\\",\\n clientOptions: { theme: \\\"light\\\", lang: \\\"vi\\\" },\\n });\\n });\\n \"}}]],[\"$\",\"$Lb\",null,{\"id\":\"website-data-script\",\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org/\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"ChatbotViet\\\",\\\"url\\\":\\\"https://chatbotviet.ai\\\"}\"}}],[\"$\",\"noscript\",null,{\"children\":[\"$\",\"iframe\",null,{\"src\":\"https://www.googletagmanager.com/ns.html?id=GTM-M3BP3NPK\",\"height\":\"0\",\"width\":\"0\",\"style\":{\"display\":\"none\",\"visibility\":\"hidden\"}}]}]]}]]}]]}],{\"children\":[\"(front-end)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"kh\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"keyword\",\"html-maxlength-attribute-definition-usage-and-validation\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$Ld\",[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],null,[\"$\",\"$L10\",null,{\"children\":[\"$L11\",\"$L12\",[\"$\",\"$L13\",null,{\"promise\":\"$@14\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"ch_Wpzgvei8PcC92kTwHf\",{\"children\":[[\"$\",\"$L15\",null,{\"children\":\"$L16\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$17\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"f:[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"promise\":\"$@1a\"}]}]\n12:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"$L1b\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"min-h-screen transition-colors duration-300 bg-white\",\"children\":[[\"$\",\"$L1c\",null,{}],[\"$\",\"$L1d\",null,{\"data\":{\"title\":{\"main\":\"maxlength in HTML\",\"highlight\":\"Control Input Length with\"},\"features\":[{\"text\":\"Limits text input in \u003cinput\u003e and \u003ctextarea\u003e elements\",\"color\":\"#4CAF50\",\"emoji\":\"✍️\"},{\"text\":\"Ensures data validation and prevents exceeding character limits\",\"color\":\"#2196F3\",\"emoji\":\"✅\"},{\"text\":\"Detailed explanation on UTF-16 code units and constraint validation\",\"color\":\"#FF9800\",\"emoji\":\"💡\"}],\"subtitle\":\"Master the maxlength attribute for enhanced user experience and data integrity.\"}}],[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col lg:flex-row gap-12\",\"children\":[[\"$\",\"main\",null,{\"className\":\"w-full lg:w-8/12\",\"children\":[\"$\",\"$L1e\",null,{\"articleContent\":{\"sections\":[{\"id\":\"intro\",\"title\":{\"main\":\"The maxlength Attribute\",\"highlight\":\"Understanding\"},\"paragraphs\":[\"The \u003ccode\u003emaxlength\u003c/code\u003e attribute is a crucial component of HTML form elements, specifically for \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e and \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e. It dictates the maximum number of characters, measured in UTF-16 code units, that a user can enter into the input field. This attribute is essential for controlling data input, preventing overly long strings, and maintaining data integrity.\",\"When used effectively, \u003ccode\u003emaxlength\u003c/code\u003e significantly improves user experience by providing clear input constraints and aids in building robust and reliable forms. If the entered text exceeds the \u003ccode\u003emaxlength\u003c/code\u003e value, constraint validation is triggered. This guide provides a deep dive into its implementation, implications, and best practices.\"]},{\"id\":\"usage\",\"title\":{\"main\":\"maxlength in HTML Forms\",\"highlight\":\"Implementing\"},\"paragraphs\":[\"To use \u003ccode\u003emaxlength\u003c/code\u003e, simply include it within your \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e or \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e tags, setting its value to a positive integer (or zero). For instance, \u003ccode\u003e\u003cinput type=\\\"text\\\" maxlength=\\\"50\\\" name=\\\"username\\\"\u003e\u003c/code\u003e restricts the input to a maximum of 50 characters. Similarly, \u003ccode\u003e\u003ctextarea maxlength=\\\"200\\\" name=\\\"comments\\\"\u003e\u003c/textarea\u003e\u003c/code\u003e limits the number of characters in a text area to 200.\",\"If \u003ccode\u003emaxlength\u003c/code\u003e is not specified or has an invalid value, the input will have no maximum length. It's crucial to note that the length is often, but not always, equivalent to the number of characters. The \u003ccode\u003emaxlength\u003c/code\u003e must be greater than or equal to the \u003ccode\u003eminlength\u003c/code\u003e (if the minlength attribute is valid).\"]},{\"id\":\"validation\",\"title\":{\"main\":\"Validation and User Experience\",\"highlight\":\"Constraint\"},\"paragraphs\":[\"Constraint validation occurs when the value of the input element changes by the user. While browsers typically prevent the user from entering more text than \u003ccode\u003emaxlength\u003c/code\u003e permits, it is good practice to implement client-side validation as well to proactively prevent incorrect data.\",\"When the input's text length exceeds \u003ccode\u003emaxlength\u003c/code\u003e, the element's \u003ccode\u003evalidity.tooLong\u003c/code\u003e property becomes true. The read-only property of a \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e or \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e object's \u003ccode\u003emaxLength\u003c/code\u003e property will be true if the length exceeds the value of \u003ccode\u003emaxlength\u003c/code\u003e.\"]},{\"id\":\"utf16\",\"title\":{\"main\":\"Code Units and Character Length\",\"highlight\":\"UTF-16\"},\"paragraphs\":[\"The \u003ccode\u003emaxlength\u003c/code\u003e attribute measures input length in UTF-16 code units, which is often equivalent to characters but not always. For characters outside the Basic Multilingual Plane (BMP), such as certain emojis or characters in less common languages, a single character may be represented by two UTF-16 code units (surrogate pairs).\",\"Understanding this distinction is crucial, as exceeding \u003ccode\u003emaxlength\u003c/code\u003e can unexpectedly truncate user input if the text contains these more complex characters.\"]},{\"id\":\"browser-compatibility\",\"title\":{\"main\":\"Compatibility\",\"highlight\":\"Browser\"},\"paragraphs\":[\"The \u003ccode\u003emaxlength\u003c/code\u003e attribute is widely supported across all modern browsers, including Chrome, Firefox, Safari, and Edge. The behavior of \u003ccode\u003emaxlength\u003c/code\u003e is consistent, generally preventing input beyond the specified limit. However, for the best user experience, always test across multiple browsers and devices.\",\"Developers should always validate user input on the server-side. While \u003ccode\u003emaxlength\u003c/code\u003e helps control the user experience on the client-side, server-side validation is vital to prevent data corruption and security vulnerabilities, regardless of client-side constraints.\"]}]},\"pullQuotes\":[{\"text\":\"The maxlength attribute is a cornerstone of form validation, providing essential control over user input.\",\"author\":\"Web Development Expert\"}],\"interactiveFeatures\":{\"title\":\"Interactive Examples \u0026 Resources\",\"features\":[{\"id\":\"example-1\",\"emoji\":\"💻\",\"title\":\"Try it Example\",\"description\":\"Experiment with maxlength using interactive code snippets.\"},{\"id\":\"example-2\",\"emoji\":\"📜\",\"title\":\"Constraint Validation Guide\",\"description\":\"Learn about constraint validation and its importance.\"},{\"id\":\"example-3\",\"emoji\":\"🌐\",\"title\":\"MDN Documentation\",\"description\":\"Visit the official MDN documentation for detailed information.\"}],\"subtitle\":\"Explore these resources to learn more about maxlength.\"}}]}],[\"$\",\"aside\",null,{\"className\":\"w-full lg:w-4/12\",\"children\":[\"$\",\"$L1f\",null,{\"articleContents\":\"$d:0:props:children:props:children:2:props:children:props:children:0:props:children:props:articleContent\",\"relatedTopics\":[{\"url\":\"https://www.geeksforgeeks.org/html/html-input-maxlength-attribute\",\"title\":\"HTML input maxlength Attribute - GeeksforGeeks\",\"description\":\"Learn about the HTML maxlength attribute to set a maximum character limit for input fields, ensuring data consistency and user input validation.\"},{\"url\":\"https://stackoverflow.com/questions/7545302/how-can-the-size-of-an-input-text-box-be-defined-in-html\",\"title\":\"How can the size of an input text box be defined in HTML?\",\"description\":\"Learn how to define the size of an input text box in HTML with examples and tips on customization.\"},{\"url\":\"https://www.w3schools.com/TAGS/att_input_size.asp\",\"title\":\"HTML input size Attribute - W3Schools\",\"description\":\"Definition and Usage The size attribute specifies the visible width, in characters, of an element. Note: The size attribute works with the following input types: text, search, tel, url, email, and password. Tip: To specify the maximum number of characters allowed in the element, use the maxlength attribute.\"}],\"relatedKeywords\":[{\"id\":\"d743d34d-c368-48cc-8370-254ee7610f84\",\"slug\":\"recover-your-crypto-how-to-get-verification-codes-from-an-old-number-or-bitget\",\"title\":\"Recover Your Crypto: How to Get Verification Codes from an Old Number | Bitget\",\"name\":\"code sent to phone number​\",\"keyword\":{\"text\":\"code sent to phone number​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"Recover Your Crypto: How to Get Verification Codes from an Old Number | Bitget\",\"description\":\"Locked out of your crypto account? Learn how to retrieve verification codes when you no longer have access to your old phone number. Secure your Bitget account today!\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T23:46:15.994Z\"},{\"id\":\"42dfe4b2-1e50-49b9-b137-0541cd88c7e2\",\"slug\":\"html-maxlength-attribute-definition-usage-and-browser-compatibility\",\"title\":\"HTML maxlength Attribute: Definition, Usage, and Browser Compatibility\",\"name\":\"maxlength input​\",\"keyword\":{\"text\":\"maxlength input​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"HTML maxlength Attribute: Definition, Usage, and Browser Compatibility\",\"description\":\"Learn how the HTML maxlength attribute limits user input in \u003cinput\u003e and \u003ctextarea\u003e elements. Explore its impact, validation, and compatibility across browsers.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T23:45:59.534Z\"},{\"id\":\"30689ec6-1bb2-4184-b306-f2f9f52a0d4d\",\"slug\":\"naturalreader-text-to-speech-technology-for-personal-and-commercial-use\",\"title\":\"NaturalReader: Text-to-Speech Technology for Personal \u0026 Commercial Use\",\"name\":\"ai generated voice from text​\",\"keyword\":{\"text\":\"ai generated voice from text​\",\"category\":\"Awareness – AI Chatbots \u0026 Market Education\",\"seo_techniques\":{\"title\":\"NaturalReader: Text-to-Speech Technology for Personal \u0026 Commercial Use\",\"description\":\"Discover NaturalReader's AI-powered text-to-speech technology. Convert text to speech in 99+ languages. Ideal for personal, educational, and commercial applications.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T23:45:45.753Z\"},{\"id\":\"7896154b-b74c-4bf9-8923-cefe762b0db7\",\"slug\":\"navigating-the-california-dmv-a-guide-for-non-english-speakers\",\"title\":\"Navigating the California DMV: A Guide for Non-English Speakers\",\"name\":\"how to contact ca dmv​\",\"keyword\":{\"text\":\"how to contact ca dmv​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"Navigating the California DMV: A Guide for Non-English Speakers\",\"description\":\"Simplify your California DMV experience! This guide offers essential tips, contact details, and resources, including AI Phone, for non-English speakers.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T23:45:25.435Z\"},{\"id\":\"b8e36f46-ed47-4bdc-98a3-0bbac79015bd\",\"slug\":\"google-password-manager-review-2025-is-it-safe-and-right-for-you\",\"title\":\"Google Password Manager Review 2025: Is It Safe \u0026 Right for You?\",\"name\":\"google password manager pricing​\",\"keyword\":{\"text\":\"google password manager pricing​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"Google Password Manager Review 2025: Is It Safe \u0026 Right for You?\",\"description\":\"Unbiased review of Google Password Manager: security, features, ease of use, and if it's the best choice for you in 2025. Is it better than 1Password or Dashlane?\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T23:44:53.078Z\"}]}]}]]}]}]]}]}],[\"$\",\"$Lb\",null,{\"id\":\"schema-knowledge-hub\",\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Article\\\",\\\"headline\\\":\\\"HTML maxlength Attribute: Definition, Usage, and Validation\\\",\\\"description\\\":\\\"Learn how the HTML maxlength attribute limits user input length in text fields and text areas. Understand validation, UTF-16 code units, and browser compatibility.\\\",\\\"image\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://chatbotviet.ai/logo.png\\\",\\\"width\\\":1200,\\\"height\\\":675},\\\"author\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"ChatbotViet\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"ChatbotViet\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://chatbotviet.ai/logo.png\\\",\\\"width\\\":600,\\\"height\\\":60}},\\\"datePublished\\\":\\\"2025-09-26T23:46:30.914Z\\\",\\\"dateModified\\\":\\\"2025-09-26T23:46:30.914Z\\\",\\\"mainEntityOfPage\\\":{\\\"@type\\\":\\\"WebPage\\\",\\\"@id\\\":\\\"https://chatbotviet.ai/kh/html-maxlength-attribute-definition-usage-and-validation\\\"}}\"}}]]\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n11:null\n"])</script><script>self.__next_f.push([1,"1a:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"HTML maxlength Attribute: Definition, Usage, and Validation\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Learn how the HTML maxlength attribute limits user input length in text fields and text areas. Understand validation, UTF-16 code units, and browser compatibility.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"creator\",\"content\":\"chatbotviet.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"msvalidate.01\",\"content\":\"35541F8CE23FCB7BA92A89EE6CEF4FAC\"}],[\"$\",\"meta\",\"4\",{\"name\":\"msapplication-TileColor\",\"content\":\"#2b5797\"}],[\"$\",\"meta\",\"5\",{\"name\":\"msapplication-TileImage\",\"content\":\"/mstile-150x150.png\"}],[\"$\",\"meta\",\"6\",{\"name\":\"theme-color\",\"content\":\"#ffffff\"}],[\"$\",\"link\",\"7\",{\"rel\":\"canonical\",\"href\":\"https://chatbotviet.ai/kh/html-maxlength-attribute-definition-usage-and-validation\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"HTML maxlength Attribute: Definition, Usage, and Validation\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Learn how the HTML maxlength attribute limits user input length in text fields and text areas. Understand validation, UTF-16 code units, and browser compatibility.\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://chatbotviet.ai/kh/html-maxlength-attribute-definition-usage-and-validation\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:site_name\",\"content\":\"chatbotviet.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:locale\",\"content\":\"vi_VN\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image\",\"content\":\"https://chatbotviet.ai/logo.png\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:creator\",\"content\":\"@ChatbotViet\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"HTML maxlength Attribute: Definition, Usage, and Validation\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Learn how the HTML maxlength attribute limits user input length in text fields and text areas. Understand validation, UTF-16 code units, and browser compatibility.\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://chatbotviet.ai/logo.png\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"232x256\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"14:{\"metadata\":\"$1a:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>