BLOG main image
지식과 일상의 창고

오늘 HTML 이야기는 라이오 버튼을 구현하는 방법에 대한 것이다.


우선 개념적인 부분으로 사용자에게 정보를 받는 비슷한 형태 중에 라디오 버튼과 체크박스가 있다. 이 둘의 차이점은 중복 정보가 가능하냐 아니냐이다.


즉..


체크박스는 다중 선택이 가능한 것이고 HTML 라디오 버튼은 하나의 폼 안에서 여러 선택지 중 어느 하나만 선택이 가능한 형태다. 성별이나 나이대와 같이 중복정보를 받아서는 안되는 경우에 사용한다.


그 구체적인 구현 방식은 아래와 같다.


하나의 폼 태그 안에 input type을 radio로 입력한 각각의 라디오 버튼을 입력해 주면 되겠다.



여기서, 속성 값으로 name 값은 하나의 폼 태그 안에서는 서로 같아야 한다. 이는 하나의 정보단위로 서버에 전송이 되기 때문이다. 그리고 value 값은 하나의 정보단위 안에서 서로 다른 것을 구분하는 단위 입니다. 따라서, 이는 서로 달라야 한다.


그리고, 마지막으로..


checked 값이 있다. 이는, 처음 사용자가 웹 페이지를 로드할 때 어느 html 라디오 버튼 어느곳에 체크해 둘 지를 결정하는 속성값이다. 필자는 '락'에 체크되게 해 놨다.


당연히, 이 checked 값은 여러 라디오 버튼 중에 하나에만 사용해야 한다. 만일, checked 값이 주어지지 않는다면? 첫 로드시 체크가 되지 않은 상태로 구현이 된다. 바로 아래와 같이 말이다.



오늘은 간단하게 html 라디오 버튼 구현 방법에 대해 알아봤는데..


다음 태그 이야기에서는 오늘에 이어 다중 선택 툴인 체크박스에 대해 이어서 이야기를 풀어볼까 한다. 체크박스의 구동 방식은 기본적으로 html 라디오 버튼과 동일하다. 단지, input type만 달라지는 것일 뿐..

Posted by 노을

카테고리

분류 전체보기
일상
건강
경영
경제
여행
리뷰
법률
세금
직장
문법
재테크
포토샵
기타정보
인터넷IT

최근에 올라온 글

최근에 달린 댓글