HTML 많이 쓰이는 유용한 태그 2. input 태그

input 사용자의 입력값을 받음

< input type ="입력받을 타입">

💡 유용한 추가 속성

• value="기본 셋팅된 미리보기 문구"
• placeholder="흐린 색상 미리보기 문구, 사용자 입력시 자동 지워짐"
  
  
• checked 체크 되어 있도록 기본 세팅
  
  
• autofocus 자동 커서, 입력창에 마우스를 클릭하지 않아도 자동으로 입력 커서가 깜빡임
  
  
• size="창의 가로길이 조절" (기본 세팅은 20으로 되어 있음)
  type="text", "email", "password", "search","tel"등 에서 사용
• maxlength = "글자 개수 제한"
  한글의 경우 자음이나 모음 개수가 아닌 한 칸의 단어를 1개로 지정
  
  
  
  

🆔 text / password 타입

password 타입은 입력하는 내용이 ● ● ● 으로 가려짐
💡 placeholder="흐린 색상 미리보기 문구, 사용자 입력시 자동 지워짐"
💡 size="창의 가로길이 조절" (기본 세팅은 20으로 되어 있음)

<input type="text" placeholder="ID를 입력하세요" size="25">
<input type="password" placeholder="PASSWORD를 입력하세요" size="25"> 
<!--입력 내용이 ● 으로 가려짐-->

💡 autofocus 자동 커서, 입력창에 마우스를 클릭하지 않아도 자동으로 입력 커서가 깜빡임
💡 maxlength = "글자 개수 제한"

• 한글의 경우 자음이나 모음 개수가 아닌 한 칸의 단어를 1개로 지정

<input type="text" maxlength = "5" autofocus> <!--5글자 이상 입력 불가-->

0️⃣ number 타입

숫자를 직접 입력할 수도 있고, 입력창 옆에 ⬆︎⬇︎ 버튼이 생김
💡 value="기본 셋팅된 미리보기 문구"

<input type="number" value="0">

☑️ checkbox 타입

중복 체크 가능
💡 checked 체크 되어 있도록 기본 세팅

<input type="checkbox" checked> 1번 체크박스 <!-- 기본 셋팅이 체크되어 있음-->
<input type="checkbox"> 2번 체크박스 <!--기본으로 체크되어 있지 않음, 1번 체크박스와 중복 체크 가능-->

1번 체크박스 2번 체크박스

🔘 radio 타입

name이 같은 그룹 내 n개 중 1개만 선택
1번 라디오 선택시 2번 라디오 자동으로 체크 해제됨

<input type="radio" name="group"> 1번 라디오 <!--같은 name 중 1개만 선택 가능-->
<input type="radio" name="group" checked> 2번 라디오 <!--기본 값으로 check 되어 있음-->

1번 라디오 2번 라디오

📃 textarea 타입

<textarea> </textarea>

<textarea> 줄 바꿈이 
가능한 입력창
</textarea> 

▶️ button 타입

<button>버튼 이름</button>

<button>회원가입</button>

회원가입