[{"data":1,"prerenderedAt":61},["ShallowReactive",2],{"tag-form":3},[4],{"id":5,"title":6,"_icon":7,"_tags":8,"authors":11,"created_at":12,"description":13,"extension":14,"items":15,"meta":59,"stem":9,"__hash__":60},"lists\u002Fform.json","Signup and login forms","fluent:form-28-regular",[9,10],"form","example",null,"2025-08-20","Based on EvilMartians' article\n\nSee https:\u002F\u002Fevilmartians.com\u002Fchronicles\u002Fhtml-best-practices-for-login-and-signup-forms","json",[16,20,24,27,31,35,39,43,47,51,55],{"id":17,"title":18,"content_text":19},"RsGRFZ7813fc1x7jsxs6I","Set 'autocomplete' ","- It allows password managers to distinguish a login form (current-password) from a sign-up form (new-password)\n- Don’t set autocomplete=\"off\" if you don’t know what are you doing!",{"id":21,"title":22,"content_text":23},"Y5xGVOrgJFV6KRZp58C8p","Set type=\"email\"","",{"id":25,"title":26,"content_text":23},"fIm-vLgoWpsbNM7nhIEaA","All clickables should use \u003Cbutton> or \u003Ca>, not \u003Cdiv> or \u003Cspan>",{"id":28,"title":29,"content_text":30},"9zJQb4b_CfRqG4GILyu7X","Wrap the fields and submit \u003Cbutton> within \u003Cform> tags.","Form submission using Enter only works if the fields are inside \u003Cform> tags and there is a single submit button",{"id":32,"title":33,"content_text":34},"FzNhxJE2iPzU0p6PUhG5T","Avoid using placeholder as a \u003Clabel>","The placeholder attribute was created to show an example of a potential input, not to describe that input. Moreover, placeholder values will be hidden while users are entering the data, and they also often have contrast issues.",{"id":36,"title":37,"content_text":38},"jt4kVN4zEMlwczLtAvpdJ","Wrap checkbox inputs within \u003Clabel> tags","- \u003Cinput type=\"checkbox\"> I agree with the privacy policy\n+ \u003Clabel>\n+   \u003Cinput type=\"checkbox\"> I agree with the privacy policy\n+ \u003C\u002Flabel>",{"id":40,"title":41,"content_text":42},"VsfebseiHe9w62kb-Wk8l","Add a visible :focus state","When it comes to forms, in general, every user will make use of the keyboard. So, we need to think about how our UIs are accessible from the keyboard.",{"id":44,"title":45,"content_text":46},"NZKHkqVf1hjz6NOZFotYO","Mark invalid fields for screen-readers","\u003Cinput type=\"email\" autocomplete=\"username\"\n-         class=\"invalid\">\n+         required aria-invalid=\"true\" aria-errormessage=\"email-error\">\n  \u003Cdiv id=\"email-error\">Enter a valid email address\u003C\u002Fdiv>\n\n\"aria-invalid\" and \"aria-errormessage\" display validation errors for screen-reader users",{"id":48,"title":49,"content_text":50},"t-2p2HwyUN35P2P2F0sDU","Prevent validation in the middle of user input","We don’t want to distract or confuse users with error animations while they’re inputting data into a form, so don’t display a Not valid email error before a user hasn’t finished their input.\n\nAs a solution, use change instead of keyup for validation once the user has finished their input (by moving to another control or by submitting the form). Of course, we can use still input\u002Fkeyup, but only to hide errors during input.",{"id":52,"title":53,"content_text":54},"JM60_y2Wr4gyBb_AzeW0I","Prevent forms from being sent twice","User can often accidentally double-click instead of a single-click. So, to prevent showing some server error, it’s better to disable the button upon form submission.",{"id":56,"title":57,"content_text":58},"-_wcyxP-7UvRu1tbG0Mor","With AJAX, think about network latency and server\u002Fnetwork errors","form.addEventListener('submit', async () => {\n-   await fetch(…)\n+   try {\n+     showLoader()\n+     await fetch(…)\n+   } catch (e) {\n+     showError(e)\n+   } finally {\n+     hideLoader()\n+   }\n  })",{},"bDpJTU5Pu7PjUUmEuQBacgnEi7sghBS2W_IGd-q4FFg",1780344512480]