모바일 폼 사용성

<div class="phone-form"><div class="phone-top">SIGN UP <span id="form-state">FIELD HIDDEN</span></div><div class="form-content" id="form-content"><div class="form-field">EMAIL <b>alex@example.test</b></div><div class="form-field next">PHONE <b>Enter number</b><small id="form-hint">Required for updates</small></div></div><div class="mock-keyboard"><span>Q W E R T Y U I O P</span><span>A S D F G H J K L</span><span>Z X C V B N M</span></div></div>

.phone-form{position:relative;width:min(72%,300px);height:clamp(145px,50vmin,245px);overflow:hidden;border:2px solid var(--fg);border-radius:clamp(8px,2vmin,16px);background:var(--bg);font:700 clamp(10px,3.2vmin,14px)/1.15 sans-serif}.phone-top{position:relative;z-index:2;background:var(--fg);color:var(--bg);padding:clamp(6px,1.5vmin,11px);display:flex;justify-content:space-between}.phone-top span{color:var(--accent);font-size:clamp(10px,3.2vmin,12px)}.form-content{display:grid;gap:clamp(5px,1vmin,10px);padding:clamp(8px,2vmin,16px);transition:transform .5s}.form-field{border:1px solid var(--line);padding:clamp(5px,1vmin,9px);background:var(--surface)}.form-field b,.form-field small{display:block;margin-top:3px}.form-field b{color:var(--muted)}.form-field small{color:var(--accent);font-size:inherit}.mock-keyboard{position:absolute;z-index:1;bottom:0;width:100%;height:39%;background:var(--line);display:grid;align-content:center;gap:4px;text-align:center;color:var(--fg)}.mock-keyboard span{background:var(--surface);padding:2px 0;margin:0 6px;letter-spacing:.12em}

const content=document.querySelector('#form-content'),state=document.querySelector('#form-state'),hint=document.querySelector('#form-hint');let fixed=true;function draw(){content.style.transform=fixed?'translateY(-47px)':'translateY(0)';state.textContent=fixed?'FIELD VISIBLE':'FIELD HIDDEN';hint.style.opacity=fixed?'1':'0';fixed=!fixed}draw();setInterval(draw,2500);