[HTML] input

📍 input, label 연결하기

• input 요소의 id와 label 요소의 for 속성을 사용하는 방법
• label 요소 안에 input 요소를 삽입하는 방법

// input 요소의 id와 label 요소의 for 속성을 사용하는 방법
<input type="text" id="username">
<label for="username">유저명:</label>

// label 요소 안에 input 요소를 삽입하는 방법
<label>유저명: <input type="text"></label>

📍 그룹 형성하기 - name

• 동일한 name 속성을 부여한다.

<!-- checkbox 타입 -->
<form>
  <input type="checkbox" name="group2" value="option1"> 옵션 1
  <input type="checkbox" name="group2" value="option2"> 옵션 2
  <input type="checkbox" name="group2" value="option3"> 옵션 3
</form>

<!-- radio 타입 -->
<form>
  <input type="radio" name="group1" value="option1"> 옵션 1
  <input type="radio" name="group1" value="option2"> 옵션 2
  <input type="radio" name="group1" value="option3"> 옵션 3
</form>

📍 체크 상태

• 초기값 설정하는 방법: input 태그에 checked 속성을 설정
• 상태 변경하는 방법: JavaScript/jQuery로 구현

1) 초기값 설정하는 방법

<!-- html -->
<input type='checkbox' checked> 

2) 상태 변경하는 방법

// JavaScript
document.getElementById("cat").checked = true; // 체크 상태를 true로 변경
document.getElementById("cat").checked = false; // 체크 상태를 false로 변경

//jQuery
$("#cat").prop("checked", true); // 체크 상태를 true로 변경
$("#cat").prop("checked", false); // 체크 상태를 false로 변경