HTML 폼 속성 — autofocus · required · placeholder · readonly 완전 정리

 

 

Web Development · HTML Form

HTML 폼 속성 완전 정리 —
autofocus · required · placeholder · readonly · min/max

신청 폼 하나로 배우는 input의 핵심 속성 12가지

시작 오늘 분석할 코드

여름방학 특강 신청 폼. fieldset 3개로 그룹화하고, input에 다양한 속성(autofocus, required, placeholder, readonly, maxlength, min, max, step)을 적용해 사용자 입력을 통제하는 코드다.

<fieldset id="register"> <legend> 신청자</legend> <ul> <li> <label class="reg" for="uname">이름</label> <input type="text" id="uname" autofocus required> <small class="fontcolor">필수입력</small> </li> <li> <label class="reg" for="uid">학번</label> <input type="text" id="uid" placeholder="하이픈없이 입력" maxlength="8" required> </li> </ul> </fieldset> <!-- 교재 주문: number 타입 + min/max/step --> <input type="number" id="group" value="10" min="10" max="100" step="10"> <button type="submit">신청하기</button> <button type="reset">다시쓰기</button>

실제 출력 결과

신청자

• 이름필수입력
• 학번필수입력

교재 주문

• 단체주문

용어 용어 정리

autofocus로드 시 자동 포커스

required필수 입력 — 비우면 제출 막힘

placeholder입력 칸 가이드 텍스트

readonly읽기 전용 (수정 X)

maxlength최대 글자 수 제한

min / max숫자 입력 최소·최대값

step증감 단위 (10·100 등)

label forid 매칭으로 라벨 연결

---

1 autofocus — 페이지 로드 즉시 커서

autofocus는 페이지가 로드되면 자동으로 이 입력란에 커서가 가게 하는 불린 속성이다. 사용자가 첫 클릭 없이 바로 타이핑할 수 있다.

※ 한 페이지에 autofocus는 1개만. 여러 개 적으면 마지막 것만 적용된다.

※ 검색 페이지(google.com 첫 화면), 로그인 페이지의 ID 입력창 등에 거의 자동으로 적용돼 있다.

---

2 required — 빈칸이면 제출 차단

required는 빈 채로 폼을 제출하지 못하게 막는다. 브라우저가 자동으로 "이 입력란을 작성해주세요" 풍선 메시지를 띄운다.

※ 자바스크립트 없이 HTML만으로 기본적인 필수 입력 검증이 된다. 예전엔 일일이 JS로 처리했던 일.

<!-- 비우고 제출 시도하면 --> <input required> ↓ "이 입력란을 작성하세요" 풍선이 뜸 → 제출 차단

---

3 placeholder — 흐릿한 가이드 텍스트

placeholder는 입력 칸 안에 흐릿하게 보이는 안내 텍스트다. 클릭해 입력 시작하면 자동으로 사라진다.

placeholder ⚠

힌트만 — 입력 시 사라짐
실제 값 X
색이 흐림 (회색)
스크린 리더 못 읽음

label ✓

정식 라벨
항상 표시
접근성 보장
placeholder는 보조

※ placeholder를 label 대신 쓰면 안 된다. 사용자가 입력 후 무엇을 적어야 했는지 잊어버릴 수 있고, 스크린 리더가 못 읽는다.

---

4 readonly vs disabled — 비슷한데 다른 둘

둘 다 입력을 막지만, 제출 시 동작이 다르다.

속성	편집	커서	폼 제출 포함	스타일
readonly	X	가능 (선택은 OK)	O (값 전송됨)	일반 모습
disabled	X	불가	X (값 안 전송)	회색 처리

※ 이번 코드의 readonly는 "오전 9:00~11:00" 같은 고정값을 보여주면서 함께 제출하고 싶을 때의 패턴.

---

반응형

5 maxlength — 입력 길이 제한

최대 글자 수를 제한한다. 학번은 8자리, 비밀번호 30자 같은 경우.

속성	의미
maxlength="8"	최대 8글자까지 입력 가능
minlength="4"	최소 4글자 이상 (적으면 제출 차단)
size="10"	입력란의 너비 (글자 약 10개 분량)

※ size는 시각적 너비이고 maxlength는 실제 입력 가능 길이다. 헷갈리지 말 것.

---

6 type="number" + min/max/step

숫자 입력 전용 타입. 사용자는 키보드 숫자만 입력 가능하고, 화살표 스피너로 증감도 가능.

<input type="number" value="10" min="10" max="100" step="10"> │ │ │ │ │ │ │ └─ 증감 단위 (10씩) │ │ └─ 최대값 │ └─ 최소값 └─ 초기값

↑/↓ 화살표로 10씩 증감 → 10, 20, 30 ... 100. 100을 넘기거나 10보다 작게는 입력 차단.

※ 가격(step="100"), 인원(step="1"), 용량(step="0.5") 등 의미에 맞는 step을 줘서 사용성을 높인다.

---

7 button type — submit · reset · button

type	역할
submit	폼 제출 — 데이터 전송
reset	폼 안 모든 입력값 초기화
button	아무 동작 없음 (JS로 제어)

※ form 안 button은 type 기본값이 submit이다. 일반 클릭 버튼으로 쓰려면 반드시 type="button" 명시.

---

8 label for + id — 라벨 연결의 정석

이번 코드는 label 안에 input을 포함하는 대신 for+id 매칭 방식을 썼다. 더 유연한 구조다.

<label for="uname">이름</label> ↓ 매칭 ↓ <input id="uname"> → "이름" 글자 클릭해도 input에 포커스

이 매칭이 있으면 라벨 클릭만으로 입력 칸으로 커서 이동, 체크박스 토글, 라디오 선택 등이 가능해진다. 접근성·사용성 모두 향상.

---

9 자주 하는 실수

실수	증상	해결
autofocus 여러 개	마지막 것만 적용	1개로 제한
placeholder만 쓰고 label 없음	접근성 ↓	label도 함께
readonly로 보안 처리	JS로 우회 가능	서버에서도 검증
disabled한 값 서버 기대	값이 안 전송됨	readonly로 변경
button type 미지정 (form 안)	의도치 않은 제출	type="button" 명시
label for와 id 불일치	연결 안 됨	정확히 일치시키기
min만 주고 max 누락	무한대 허용	둘 다 명시

---

핵심 한 줄 요약

autofocus로드 시 자동 커서 — 1개만

required빈칸 제출 차단

placeholder힌트 — label 대용 X

readonly읽기 전용 — 값은 전송됨

disabled비활성화 — 값 전송 안 됨

maxlength최대 글자 수 (size와 다름)

min/max/stepnumber 타입 범위·단위

button typeform 안 기본 = submit

label for + id라벨-입력 연결의 정석

Tags

#fieldset #label #input #autofocus #required #placeholder #readonly #maxlength #min #max #step #HTML #폼속성 #입력검증 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

fieldset, label, input, autofocus, required, placeholder, readonly, maxlength, min, max, step, HTML, 폼속성, 입력검증, 웹개발, 티스토리