https://hugo-theme-test-a-1.pages.dev/ko/tags/forms/ Recent content in Forms on SITE — SITE https://hugo-theme-test-a-1.pages.dev/social.png https://hugo-theme-test-a-1.pages.dev/social.png Hugo -- 0.147.7 ko-KR https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/forms/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/forms/ <h1 id="forms">forms</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.</p> <h2 id="raw-html-예시">raw HTML 예시</h2> <form style="display:grid;gap:0.75rem;max-width:32rem;"> <label>이름 <input type="text" style="display:block;width:100%;padding:0.6rem;border:1px solid currentColor;border-radius:0.5rem;" /> </label> <small>입력 도움말은 너무 길지 않게 유지합니다.</small> </form> <h2 id="확인-항목">확인 항목</h2> <ul> <li>라벨이 입력과 제대로 연결되는가</li> <li>도움말이 입력보다 앞서거나 뒤섞이지 않는가</li> <li>오류 상태가 색상만으로 표현되지 않는가</li> </ul>