HTML <input> 태그의 다양한 type 속성
-
text: 단일 텍스트 라인 입력을 위한 필드입니다.
<input type="text" name="id" placeholder="아이디 입력해주세요"> -
radio: 여러 개 중 하나를 선택할 수 있는 라디오 버튼입니다.
성별 : <input type="radio" name="opt" checked>남 <input type="radio" name="opt">여 -
checkbox: 여러 개 중 다수를 선택할 수 있는 체크박스입니다.
checkbox : <input type="checkbox">1 <input type="checkbox" checked>2 <input type="checkbox">3 <input type="checkbox" checked>4 -
range: 슬라이더 바 형태의 범위 입력 필드입니다.
rang : <input type="range" max="100" min="0"> -
file: 파일 업로드를 위한 필드입니다.
<input type="file"> -
number: 숫자 입력을 위한 필드로, 최소값(
min)과 최대값(max)을 설정할 수 있습니다.<input type="number" max="99999" min="100"> -
search: 검색어 입력을 위한 필드로, 검색 필드와 유사한 스타일을 제공합니다.
<input type="search" placeholder="search">
예시 코드 설명
다음은 위에서 설명한 <input> 태그를 사용한 예시 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tag - input / type</title>
</head>
<body>
<form action="" method="get">
id : <input type="text" name="id" placeholder="아이디 입력해주세요"> <br><br>
내용 : <textarea rows="10" cols="55">board write</textarea><br><br>
취미:<select>
<option>선택하세요</option>
<option>등산</option>
<option>게임</option>
<option>독서</option>
<option>음악감상</option>
<option>낮잠자기</option>
</select><br><br>
<textarea rows="5" cols="55">자기 소개 해주세요.</textarea><br><br>
성별 : <input type="radio" name="opt" checked>남
<input type="radio" name="opt">여 <br><br>
checkbox : <input type="checkbox">1
<input type="checkbox" checked>2
<input type="checkbox">3
<input type="checkbox" checked>4 <br><br>
rang : <input type="range" max="100" min="0"><br><br>
<input type="file"><br><br>
<input type="number" max="99999" min="100"><br><br>
<input type="search" placeholder="search"><br><br>
</form>
</body>
</html>
코드 설명
- 아이디 입력:
type="text"를 사용하여 사용자가 텍스트를 입력할 수 있는 필드를 만들었습니다. - 내용 입력:
<textarea>태그를 사용하여 여러 줄의 텍스트를 입력할 수 있는 필드를 만들었습니다. - 취미 선택:
<select>태그와<option>태그를 사용하여 드롭다운 리스트를 만들었습니다. - 성별 선택:
type="radio"를 사용하여 라디오 버튼을 만들었습니다. - 다중 선택:
type="checkbox"를 사용하여 여러 개의 선택 항목을 만들었습니다. - 범위 선택:
type="range"를 사용하여 슬라이더 바를 만들었습니다. - 파일 업로드:
type="file"을 사용하여 파일 업로드 필드를 만들었습니다. - 숫자 입력:
type="number"를 사용하여 숫자 입력 필드를 만들었습니다. - 검색 입력:
type="search"를 사용하여 검색 입력 필드를 만들었습니다.
이와 같이 <input> 태그의 다양한 type 속성을 사용하여 사용자가 데이터를 입력할 수 있는 여러 가지 방법을 제공할 수 있습니다. 각각의 type 속성은 특정한 형태의 입력을 받도록 최적화되어 있어, 사용자가 데이터를 입력하는 데 편리함을 제공합니다.
넙-죽