CSS form과 input, 라벨 클릭시 체크

1. from 태그

• input태그는 닫지 않습니다.

<form>
  <input>
</form>

 

 

- input의 type

<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit">
<select>
  <option>옵션</option>
</select>
<textarea></textarea>

 

 

- input의 속성

• placeholder 배경 글자
• value 미리 입력된 값
• name 인풋의 이름

<input placeholder="값" value="값" name="age">

 

 

- HTML의 속성으로 CSS셀렉터를 사용

input[type=email] {
  color : grey
}

 

 

- 전송버튼

• form 태그 안에 있어야지 작동

<button type="submit">전송</button>
<input type="submit">

 

 

2. 라벨 클릭시 체크 되는 방법

 

- label 태그와 for 속성

• label과 for 속성을 적절히 활용
• input대신 label을 눌러도 input을 선택이 가능
  • input의 id == label의 for 속성

<input type="checkbox" id="subscribe">
<label for="subscribe">subscribe</label>

Subscribe 클릭해도 체크박스가 체크가 됩니다.