# Create Account Form

> A sign-up form with name, email, password, confirm password with match check and a terms checkbox.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/create-account-form/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<form class='su' id='suf'><label for='su1'>Full name</label><input id='su1' placeholder='Jane Cooper' required><label for='su2'>Email</label><input id='su2' type='email' placeholder='you@company.com' required><label for='su3'>Password</label><input id='su3' type='password' placeholder='Min. 8 characters' minlength='8' required><label for='su4'>Confirm password</label><input id='su4' type='password' placeholder='Re-enter password' required><label class='su-c'><input type='checkbox' id='suk'><span></span>I agree to the <a href='#'>Terms</a> and <a href='#'>Privacy Policy</a></label><button type='submit' id='sub' disabled>Create account</button></form>
```

`styles.css`

```css
.su{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.su label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:500}.su input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;margin-bottom:14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.su input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.su input.bad{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}.su input::placeholder{color:#a3a3a3}.su-c{display:flex!important;align-items:center;gap:10px;margin:4px 0 16px!important;font-weight:400!important;font-size:13px!important;cursor:pointer}.su-c input{position:absolute;opacity:0}.su-c span{flex:none;width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.su-c input:checked+span{background:#111;border-color:#111}.su-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.su-c a{color:#111;text-decoration:underline;text-underline-offset:3px;font-weight:500}.su button{width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;transition:opacity .15s}.su button:disabled{opacity:.35;cursor:not-allowed}
```

`script.js`

```js
const p=document.getElementById('su3'),q=document.getElementById('su4'),k=document.getElementById('suk'),b=document.getElementById('sub');const chk=()=>{q.classList.toggle('bad',q.value.length>0&&q.value!==p.value);b.disabled=!k.checked||p.value!==q.value||!p.value};[p,q,k].forEach(x=>x.addEventListener('input',chk));k.addEventListener('change',chk);document.getElementById('suf').addEventListener('submit',e=>{e.preventDefault();b.textContent='Account created ✓'});document.querySelectorAll('.su a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
```

## About

A registration form with show/hide password, live confirm-password validation (border turns red when values differ) and an agree-to-terms checkbox that enables the button.

---
Also available as JSON: https://ownlyplans.com/bhaskar/create-account-form/?format=json
MCP server: https://ownlyplans.com/mcp