input

• 참고 링크 : https://www.w3schools.com/tags/tag_input.asp

input type

버튼

• button (기본동작이 없는 그냥 버튼)

• submit (form 제출)

• image (이미지로 된 submit)
• src 속성으로 이미지 지정. alt로 대체 텍스트

• reset (form 항목 모두 초기화. 권장되진 않음)

<!-- 기본 버튼 -->
<input type="button" value="Click Me" />

<!-- 폼 제출 버튼 -->
<input type="submit" value="Submit Form" />

<!-- 이미지 버튼 -->
<input type="image" src="submit-image.png" alt="Submit" width="100" height="30" />

<!-- 폼 리셋 버튼 (권장되지 않음) -->
<input type="reset" value="Reset Form" />

텍스트 입력

• text, tel, search (맞춤 키패드)

• number, url, email (validation 기능과, 맞춤 키패드 뜸)

• password (숨김 처리됨, 사이트가 안전하지 않다면 alert)

<!-- 일반 텍스트 -->
<input type="text" placeholder="Enter text here" />

<!-- 전화번호 입력 -->
<input type="tel" placeholder="Enter phone number" />

<!-- 검색 -->
<input type="search" placeholder="Search..." />

<!-- 숫자 입력 -->
<input type="number" min="1" max="100" value="10" />

<!-- URL 입력 -->
<input type="url" placeholder="https://example.com" />

<!-- 이메일 입력 -->
<input type="email" placeholder="Enter your email" />

<!-- 비밀번호 입력 -->
<input type="password" placeholder="Enter your password" />

범위

• range (min, max, value)

<!-- 슬라이더 범위 -->
<input type="range" min="0" max="100" value="50" />

선택

• checkbox

• radio (동일한 name으로 설정한 것 중에선 하나만 선택 가능)

<!-- 체크박스 -->
<input type="checkbox" id="agree" />
<label for="agree">I agree to the terms and conditions</label>

<!-- 라디오 버튼 -->
<input type="radio" name="gender" id="male" value="Male" />
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="Female" />
<label for="female">Female</label>

파일첨부

• file (accept 속성으로 선택가능한 파일들 지정 가능)

<!-- 파일 업로드 -->
<input type="file" accept=".png, .jpg, .jpeg" />

색상선택

• color

<!-- 색상 선택 -->
<input type="color" value="#ff0000" />

날짜

• date, time, month, week, datetime-local

<!-- 날짜 선택 -->
<input type="date" />

<!-- 시간 선택 -->
<input type="time" />

<!-- 월 선택 -->
<input type="month" />

<!-- 주 선택 -->
<input type="week" />

<!-- 로컬 날짜 및 시간 선택 -->
<input type="datetime-local" />