본문 바로가기

html

[html&css]인풋 라디오 input radio

<label>
    <input type="radio" name="name">
</label>
<label>
    <input type="radio" name="name">
</label>



<!--같은 값-->

<input type="radio" id="id"  name="name">
<label for="id"></label>
<input type="radio" id="id"  name="name">
<label for="id"></label>

input id랑 label for맞춰서 묶어주기

 

(라디오의 경우)input name으로 어떤 것이 택1이 될지 묶어주기 - 그룹화

 

 

2번으로 작성할 경우 인풋을 클릭해도 라벨에 체크 연동이 됨

포지션 등으로 사용하지않아도 따로 떨어뜨려서 디자인 가능

 

(1번으로 작성할 경우 한 셋트가 되어버림 input id와 label for를 안써줘도 자동 연동됨)


label,input,
input:checked,
input:focus{appearance: none; margin: 0; padding: 0; border: none; background: none; outline: none;}

/*
input[type="radio"] 등으로 개별 설정 가능
*/
label, input 데코 리셋
 
 
 
<form>
	<input type="text"  required>
</form>

input작성후 required작성 할 경우 필수입력란이 되어 작성 혹은 체크가 되지 않을 시

다음으로 넘어가지못함

 

radio의 경우 그룹당 하나의 input에만 required작성해주면 됨


top