Control Input Length
Mastering the HTML maxlength Attribute

What is maxlength? Understanding the HTML maxlength Attribute

The maxlength attribute in HTML controls the maximum number of characters a user can enter into an or </code> element. This is crucial for data validation and maintaining consistent data sizes in your application.</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">The attribute's value must be a non-negative integer. This length is based on UTF-16 code units, which often corresponds to characters but might differ for certain Unicode characters. If <code>maxlength</code> is not specified, or if an invalid value is provided, there is no enforced maximum length.</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">How to Use</span> <!-- -->Implementing maxlength in Your HTML</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">To use <code>maxlength</code>, simply add the attribute to your <code><input></code> or <code><textarea></code> tag: <code><input type="text" maxlength="50"></code>. This limits the input to 50 characters.</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">The length is evaluated based on UTF-16 code units. Make sure to account for this when dealing with different character sets. Always consider your users and the data they'll be providing when setting <code>maxlength</code>.</p></section><section data-section-id="validation"><h2 id="validation" 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">Constraint Validation</span> <!-- -->maxlength and</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">The <code>maxlength</code> attribute plays a significant role in constraint validation. If the input's value exceeds the specified <code>maxlength</code>, the input will fail the validation check.</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">Browser behavior: While browsers generally prevent users from exceeding the limit, situations can occur where the entered text's length might surpass the <code>maxlength</code> value (e.g., through JavaScript manipulation). In such scenarios, the <code>validity.tooLong</code> property of the input element will be set to <code>true</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 simple yet effective way to control user input and ensure data integrity.</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>MDN Web Docs Contributors</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 Features</span></h3><p class="text-neutral-700 text-lg">Explore Related Concepts</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">Form Validation</h4><p class="text-neutral-700">Learn about other form validation techniques beyond maxlength, including required fields and data type validation.</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">Input Types</h4><p class="text-neutral-700">Discover various HTML input types (text, email, number, etc.) and their unique attributes for user input.</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">Textarea Element</h4><p class="text-neutral-700">Understand the differences and similarities between the <textarea> and <input> elements, including the application of maxlength.</p></div></div></div></div></div></div></div></section><section data-section-id="examples"><h2 id="examples" 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">Example</span> <!-- -->Demonstrating maxlength</h2><p class="text-neutral-700 leading-relaxed mb-6 text-lg font-medium">Here's an example demonstrating <code>maxlength</code> usage:</p><p class="text-neutral-700 leading-relaxed mb-6 text-lg "><code>`</code>html <label for="username">Username (max 15 characters):</label> <input type="text" id="username" name="username" maxlength="15"> <code>`</code></p><p class="text-neutral-700 leading-relaxed mb-6 text-lg ">This example limits the username input to a maximum of 15 characters.</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">What is maxlength? Understanding the HTML 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">How to Use Implementing maxlength in Your HTML</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 maxlength and Constraint Validation</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">Example Demonstrating maxlength</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 - 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="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>Definition and Usage The maxlength attribute specifies the maximum number of characters allowed in the element.</p><a class="text-blue-500" rel="nofollow" target="_blank" href="https://www.w3schools.com/tags/att_input_maxlength.asp">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="">Is there a limit to the length of HTML attributes?<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><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/unfiltered-ai-chatbots-in-2024-freedom-of-expression-and-open-conversations"><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">Unfiltered AI Chatbots in 2024: Freedom of Expression & Open Conversations</h4><p class="text-xs text-gray-500 line-clamp-2">Tired of censorship? Explore the best AI chatbots without filters in 2024. Enjoy unrestricted conversations, creative roleplay, and emotional connections. Find your perfect AI companion now!</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/top-ai-marketing-tools-in-2025-grow-your-business-or-your-brand"><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">Top AI Marketing Tools in 2025: Grow Your Business | [Your Brand]</h4><p class="text-xs text-gray-500 line-clamp-2">Discover the leading AI marketing tools for 2025 and beyond. Automate tasks, gain insights, and enhance customer experience with our expert guide.</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/character-limits-in-html-input-fields-a-comprehensive-guide"><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">Character Limits in HTML Input Fields: A Comprehensive Guide</h4><p class="text-xs text-gray-500 line-clamp-2">Learn how to set minimum and maximum character limits in HTML input fields using maxlength and minlength attributes. Ensure data consistency and improve user experience.</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/how-to-add-email-addresses-to-outlook-autocomplete-list-365-and-2016"><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">How to Add Email Addresses to Outlook AutoComplete List (365 & 2016)</h4><p class="text-xs text-gray-500 line-clamp-2">Learn how to manually add email addresses to your Outlook AutoComplete list in Outlook 365 and 2016, even without sending emails. Improve your workflow!</p><span class="text-xs text-gray-500">26 tháng 9, 2025</span></div></div></a><a href="/kh/how-to-view-autosaved-autofill-data-in-microsoft-edge-solved"><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">How to View Autosaved Autofill Data in Microsoft Edge (Solved)</h4><p class="text-xs text-gray-500 line-clamp-2">Learn how to access and manage your autosaved autofill data in Microsoft Edge. Troubleshoot issues and customize your form autofill experience.</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-constraint-validation\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(front-end)\",{\"children\":[\"kh\",{\"children\":[[\"keyword\",\"html-maxlength-attribute-definition-usage-and-constraint-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-constraint-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\",\"H6DbSXAqWbpMjK4gKIe95\",{\"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\":\"Mastering the HTML maxlength Attribute\",\"highlight\":\"Control Input Length\"},\"features\":[{\"text\":\"Defines maximum input length\",\"color\":\"#4CAF50\",\"emoji\":\"📏\"},{\"text\":\"Applies to \u003cinput\u003e and \u003ctextarea\u003e\",\"color\":\"#2196F3\",\"emoji\":\"📝\"},{\"text\":\"Impacts form validation\",\"color\":\"#FF9800\",\"emoji\":\"✅\"}],\"subtitle\":\"Effectively manage user input length in your web forms with the maxlength attribute.\"}}],[\"$\",\"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\":\"introduction\",\"title\":{\"main\":\"Understanding the HTML maxlength Attribute\",\"highlight\":\"What is maxlength?\"},\"paragraphs\":[\"The \u003ccode\u003emaxlength\u003c/code\u003e attribute in HTML controls the maximum number of characters a user can enter into an \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e or \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e element. This is crucial for data validation and maintaining consistent data sizes in your application.\",\"The attribute's value must be a non-negative integer. This length is based on UTF-16 code units, which often corresponds to characters but might differ for certain Unicode characters. If \u003ccode\u003emaxlength\u003c/code\u003e is not specified, or if an invalid value is provided, there is no enforced maximum length.\"]},{\"id\":\"usage\",\"title\":{\"main\":\"Implementing maxlength in Your HTML\",\"highlight\":\"How to Use\"},\"paragraphs\":[\"To use \u003ccode\u003emaxlength\u003c/code\u003e, simply add the attribute to your \u003ccode\u003e\u003cinput\u003e\u003c/code\u003e or \u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e tag: \u003ccode\u003e\u003cinput type=\\\"text\\\" maxlength=\\\"50\\\"\u003e\u003c/code\u003e. This limits the input to 50 characters.\",\"The length is evaluated based on UTF-16 code units. Make sure to account for this when dealing with different character sets. Always consider your users and the data they'll be providing when setting \u003ccode\u003emaxlength\u003c/code\u003e.\"]},{\"id\":\"validation\",\"title\":{\"main\":\"maxlength and Constraint Validation\",\"highlight\":\"Constraint Validation\"},\"paragraphs\":[\"The \u003ccode\u003emaxlength\u003c/code\u003e attribute plays a significant role in constraint validation. If the input's value exceeds the specified \u003ccode\u003emaxlength\u003c/code\u003e, the input will fail the validation check.\",\"Browser behavior: While browsers generally prevent users from exceeding the limit, situations can occur where the entered text's length might surpass the \u003ccode\u003emaxlength\u003c/code\u003e value (e.g., through JavaScript manipulation). In such scenarios, the \u003ccode\u003evalidity.tooLong\u003c/code\u003e property of the input element will be set to \u003ccode\u003etrue\u003c/code\u003e.\"]},{\"id\":\"examples\",\"title\":{\"main\":\"Demonstrating maxlength\",\"highlight\":\"Example\"},\"paragraphs\":[\"Here's an example demonstrating \u003ccode\u003emaxlength\u003c/code\u003e usage:\",\"\u003ccode\u003e`\u003c/code\u003ehtml\\n\u003clabel for=\\\"username\\\"\u003eUsername (max 15 characters):\u003c/label\u003e\\n\u003cinput type=\\\"text\\\" id=\\\"username\\\" name=\\\"username\\\" maxlength=\\\"15\\\"\u003e\\n\u003ccode\u003e`\u003c/code\u003e\",\"This example limits the username input to a maximum of 15 characters.\"]}]},\"pullQuotes\":[{\"text\":\"The maxlength attribute is a simple yet effective way to control user input and ensure data integrity.\",\"author\":\"MDN Web Docs Contributors\"}],\"interactiveFeatures\":{\"title\":\"Interactive Features\",\"features\":[{\"id\":\"form-validation\",\"emoji\":\"✅\",\"title\":\"Form Validation\",\"description\":\"Learn about other form validation techniques beyond maxlength, including required fields and data type validation.\"},{\"id\":\"input-types\",\"emoji\":\"⌨️\",\"title\":\"Input Types\",\"description\":\"Discover various HTML input types (text, email, number, etc.) and their unique attributes for user input.\"},{\"id\":\"textarea\",\"emoji\":\"📝\",\"title\":\"Textarea Element\",\"description\":\"Understand the differences and similarities between the \u003ctextarea\u003e and \u003cinput\u003e elements, including the application of maxlength.\"}],\"subtitle\":\"Explore Related Concepts\"}}]}],[\"$\",\"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.w3schools.com/tags/att_input_maxlength.asp\",\"title\":\"HTML input maxlength Attribute - W3Schools\",\"description\":\"Definition and Usage The maxlength attribute specifies the maximum number of characters allowed in the element.\"},{\"url\":\"https://stackoverflow.com/questions/1496096/is-there-a-limit-to-the-length-of-html-attributes\",\"title\":\"Is there a limit to the length of HTML attributes?\",\"description\":\"The algorithm described below places no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, text nodes, etc. While implementors are encouraged to avoid arbitrary limits, it is recognized that practical concerns will likely force user agents to impose nesting depth constraints.\"}],\"relatedKeywords\":[{\"id\":\"92b9a452-0f27-4d73-9af2-0030d2e72d52\",\"slug\":\"unfiltered-ai-chatbots-in-2024-freedom-of-expression-and-open-conversations\",\"title\":\"Unfiltered AI Chatbots in 2024: Freedom of Expression \u0026 Open Conversations\",\"name\":\"botify ai no filter ai​\",\"keyword\":{\"text\":\"botify ai no filter ai​\",\"category\":\"Awareness – AI Chatbots \u0026 Market Education\",\"seo_techniques\":{\"title\":\"Unfiltered AI Chatbots in 2024: Freedom of Expression \u0026 Open Conversations\",\"description\":\"Tired of censorship? Explore the best AI chatbots without filters in 2024. Enjoy unrestricted conversations, creative roleplay, and emotional connections. Find your perfect AI companion now!\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T18:58:26.109Z\"},{\"id\":\"183547be-5109-4a4a-b514-17db9a2c4dd1\",\"slug\":\"top-ai-marketing-tools-in-2025-grow-your-business-or-your-brand\",\"title\":\"Top AI Marketing Tools in 2025: Grow Your Business | [Your Brand]\",\"name\":\"ai marketing tools 2025​\",\"keyword\":{\"text\":\"ai marketing tools 2025​\",\"category\":\"Awareness – AI Chatbots \u0026 Market Education\",\"seo_techniques\":{\"title\":\"Top AI Marketing Tools in 2025: Grow Your Business | [Your Brand]\",\"description\":\"Discover the leading AI marketing tools for 2025 and beyond. Automate tasks, gain insights, and enhance customer experience with our expert guide.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T18:58:05.815Z\"},{\"id\":\"7079bb27-eeb2-461f-befa-a0dd0df8724e\",\"slug\":\"character-limits-in-html-input-fields-a-comprehensive-guide\",\"title\":\"Character Limits in HTML Input Fields: A Comprehensive Guide\",\"name\":\"input type text limit characters​\",\"keyword\":{\"text\":\"input type text limit characters​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"Character Limits in HTML Input Fields: A Comprehensive Guide\",\"description\":\"Learn how to set minimum and maximum character limits in HTML input fields using maxlength and minlength attributes. Ensure data consistency and improve user experience.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T18:57:51.058Z\"},{\"id\":\"96ba9225-e302-47b8-afe1-2e90748bd103\",\"slug\":\"how-to-add-email-addresses-to-outlook-autocomplete-list-365-and-2016\",\"title\":\"How to Add Email Addresses to Outlook AutoComplete List (365 \u0026 2016)\",\"name\":\"auto complete list in outlook​\",\"keyword\":{\"text\":\"auto complete list in outlook​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"How to Add Email Addresses to Outlook AutoComplete List (365 \u0026 2016)\",\"description\":\"Learn how to manually add email addresses to your Outlook AutoComplete list in Outlook 365 and 2016, even without sending emails. Improve your workflow!\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T18:57:31.384Z\"},{\"id\":\"223f90fe-ff20-41c9-8932-1fe96d659e03\",\"slug\":\"how-to-view-autosaved-autofill-data-in-microsoft-edge-solved\",\"title\":\"How to View Autosaved Autofill Data in Microsoft Edge (Solved)\",\"name\":\"autosave in microsoft edge​\",\"keyword\":{\"text\":\"autosave in microsoft edge​\",\"category\":\"Solution – Features \u0026 Integrations\",\"seo_techniques\":{\"title\":\"How to View Autosaved Autofill Data in Microsoft Edge (Solved)\",\"description\":\"Learn how to access and manage your autosaved autofill data in Microsoft Edge. Troubleshoot issues and customize your form autofill experience.\"},\"related_keywords\":[]},\"image\":null,\"createdAt\":\"2025-09-26T18:57:05.511Z\"}]}]}]]}]}]]}]}],[\"$\",\"$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 Constraint Validation\\\",\\\"description\\\":\\\"Learn how the HTML maxlength attribute limits user input in \u003cinput\u003e and \u003ctextarea\u003e elements. Understand its impact on form validation and browser behavior.\\\",\\\"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-26T18:58:44.235Z\\\",\\\"dateModified\\\":\\\"2025-09-26T18:58:44.235Z\\\",\\\"mainEntityOfPage\\\":{\\\"@type\\\":\\\"WebPage\\\",\\\"@id\\\":\\\"https://chatbotviet.ai/kh/html-maxlength-attribute-definition-usage-and-constraint-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 Constraint Validation\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Learn how the HTML maxlength attribute limits user input in \u003cinput\u003e and \u003ctextarea\u003e elements. Understand its impact on form validation and browser behavior.\"}],[\"$\",\"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-constraint-validation\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"HTML maxlength Attribute: Definition, Usage, and Constraint Validation\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Learn how the HTML maxlength attribute limits user input in \u003cinput\u003e and \u003ctextarea\u003e elements. Understand its impact on form validation and browser behavior.\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://chatbotviet.ai/kh/html-maxlength-attribute-definition-usage-and-constraint-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 Constraint Validation\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Learn how the HTML maxlength attribute limits user input in \u003cinput\u003e and \u003ctextarea\u003e elements. Understand its impact on form validation and browser behavior.\"}],[\"$\",\"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>