폼과 입력: label·value·submit

최소 폼

<label>
  이름
  <input id="name" type="text" />
</label>
<button id="go" type="button">적용</button>
<p id="out"></p>

label로 감싸면 클릭 영역이 커지고 접근성이 좋아집니다.
연습에서는 type="button"으로 두어 페이지가 새로고침되지 않게 합니다. (샌드박스에서도 습관으로)

값 읽기

const name = document.getElementById('name');
const out = document.getElementById('out');
document.getElementById('go').onclick = () => {
  out.textContent = '안녕, ' + (name.value || '손님');
};

value는 문자열입니다. 숫자로 쓰려면 Number/parseInt 후 Number.isFinite를 확인하세요.

이벤트

click 외에 input(타이핑마다), change(확정)를 쓸 수 있습니다.
미리보기 연습은 click 하나로 시작해도 충분합니다.

주의

• 사용자 HTML을 innerHTML에 넣지 말고 textContent를 쓰세요.
• 비밀번호·토큰을 예제에 하드코딩하지 마세요.
• 이 사이트 미리보기는 샌드박스입니다. 외부 전송이 필요한 기능은 넣지 마세요.

체크리스트

1. id가 HTML·JS에서 같은가?
2. 빈 입력 기본값을 정했는가?
3. 출력이 textContent인가?

연습

/preview/에서 숫자 두 개를 더해 out에 표시하는 미니 UI를 만드세요.

한 줄

> 입력은 value, 출력은 textContent, 버튼은 type=button.

더 깊게

읽은 뒤 연습장에서 예제 코드를 한 번 타이핑해 보세요. 눈으로만 보면 하루 뒤 사라집니다.

관련 원리 카드와 문제 태그로 바로 이어서 풀면, 문법·패턴이 한 묶음으로 남습니다.

막히면 30분 규칙: 입력을 로그로 확인 → 기대/실제 한 줄 비교 → 그래도 안 되면 배우기 레슨으로 잠시 복귀.