[HTML] 10. input 타입 완전 정리

[HTML] 10. input 타입 완전 정리

input 태그는 form에서 가장 많이 사용되는 요소입니다.
type 속성에 따라 완전히 다른 기능을 합니다.

이번 글에서는 자주 쓰는 타입부터, 실무에서 중요한 타입까지 모두 정리합니다.

---

1. 기본 텍스트 입력

① text

<input type="text">

한 줄 텍스트 입력

② password

<input type="password">

입력 내용이 ●●● 로 표시

---

2. HTML5 전용 입력 타입

① email

<input type="email">

이메일 형식이 아니면 자동 검증 오류 발생

② number

<input type="number" min="1" max="10">

③ date

<input type="date">

④ tel

<input type="tel">

⑤ url

<input type="url">

이 타입들은 브라우저가 기본 유효성 검사를 제공합니다.

---

3. 선택 관련 타입

① checkbox

<input type="checkbox" name="hobby" value="축구"> 축구
<input type="checkbox" name="hobby" value="농구"> 농구

여러 개 선택 가능

② radio

<input type="radio" name="gender" value="male"> 남자
<input type="radio" name="gender" value="female"> 여자

같은 name을 사용해야 하나만 선택됩니다.

---

4. 버튼 관련 타입

① submit

<input type="submit" value="전송">

② reset

<input type="reset">

③ button

<input type="button" value="클릭">

button은 JavaScript와 함께 사용됩니다.

---

5. 파일 업로드

<input type="file">

파일 선택 창이 열립니다.
서버와 함께 사용할 때는 form에 enctype 속성이 필요합니다.

---

6. 자주 쓰는 속성 정리

• required → 필수 입력
• readonly → 읽기 전용
• disabled → 비활성화
• maxlength → 최대 글자 수
• pattern → 정규식 검사

예제

<input type="text" maxlength="10" required>

---

7. 핵심 정리

• type에 따라 입력 방식이 완전히 달라진다
• HTML5 타입은 기본 유효성 검사를 제공한다
• radio는 같은 name으로 묶는다
• submit은 form을 전송한다
• name 속성은 서버 전송에 필수이다

input을 제대로 이해하면, 웹 폼의 80%는 이해한 것입니다.