HTML `<input type='text'>` ignoring `maxlength` when used inside `<form>` with `novalidate` attribute
I'm experiencing an scenario with an `<input type='text'>` element where the `maxlength` attribute seems to be ignored when the input is inside a `<form>` that has the `novalidate` attribute set. Here's a simplified version of my code: ```html <form novalidate> <label for='username'>Username:</label> <input type='text' id='username' name='username' maxlength='10' /> <button type='submit'>Submit</button> </form> ``` When I enter more than 10 characters in the input field and try to submit the form, it lets me exceed the `maxlength` limit without any restriction. I expected that the browser would prevent submission or at least enforce the character limit just by having the `maxlength` attribute. I've tested this in Chrome 117 and Firefox 105, and both browsers exhibit the same behavior. I also tried adding client-side validation using JavaScript, but that feels redundant when I’m just trying to use standard HTML attributes. Here’s the JavaScript I attempted to use: ```javascript document.querySelector('form').addEventListener('submit', function(event) { const usernameInput = document.getElementById('username'); if (usernameInput.value.length > 10) { event.preventDefault(); alert('Username want to exceed 10 characters.'); } }); ``` While this works, I’d prefer a cleaner solution that doesn't require extra JavaScript. Is there a reason `maxlength` isn't being enforced when `novalidate` is applied, or am I missing something in my understanding of these attributes?