radio button 예제

라디오 단추는 제약 조건 유효성 검사에 참여하지 않습니다. 제한할 실제 값이 없습니다. 사용자가 웹마스터에게 이메일을 보내는 양식을 제출한다고 가정해 보겠습니다. 사용자는 라디오 단추에서 원하는 색상을 선택하고 제출 단추를 클릭합니다. 웹마스터는 다음과 같은 이메일을 수신할 수 있습니다: 이전 예제를 테스트한 경우 라디오 단추 옆에 텍스트를 넣을 수 있지만 여전히 두 가지 별도 항목입니다 – 라디오 단추를 트리거하기 위해 텍스트를 클릭할 수 없습니다. 이것은 사용자에게 정말 성가신 일이 될 수 있지만 다행히도 해결하기가 쉽습니다 : 레이블 요소를 사용하십시오! 다음은 차이점을 보여 줄 수 있는 기본 예입니다: 라디오 버튼을 사용하면 사용자가 하나만 선택할 수 있는 옵션 목록을 설정할 수 있습니다. 라디오 단추와 설명 텍스트를 함께 연결하려면 레이블을 사용하여 사용자가 라디오 단추를 조작할 때 더 큰 영역을 클릭할 수 있도록 해야 합니다. 다음은 라디오 단추의 두 그룹입니다. 각 그룹의 라디오 버튼이 이름을 공유한다는 것을 다시 한 번 알 수 있습니다. 첫 번째 그룹에는 „preferred_color“의 이름이 있고 두 번째 그룹에는 „preferred_item“의 이름이 있습니다. 이 페이지에는 HTML 라디오 단추를 만들기 위한 코드가 포함되어 있습니다.

또한 라디오 버튼에 대한 설명도 제공합니다. 자유롭게 코드를 복사하여 자신의 웹 사이트 또는 블로그에 붙여 넣을 수 있습니다. 어쨌든, 여기에 라디오 버튼을 만드는 코드와 몇 가지 정보가 있습니다. 참고: 확인된 특성을 두 개 이상의 라디오 단추에 넣으면 이후 인스턴스가 이전 속성을 재정의합니다. 즉, 마지막으로 확인된 라디오 단추가 선택된 버튼이 됩니다. 이는 그룹의 라디오 단추 하나만 한 번에 선택할 수 있으며 사용자 에이전트는 새 단추를 선택된 것으로 표시할 때마다 자동으로 다른 단추를 선택 해제하기 때문입니다. 단일 선택 동작을 활성화하려면 라디오 단추 그룹을 만들려면 이름 속성의 동일한 값을 각 요소로 설정해야 합니다. 참고: 라디오 그룹은 그룹으로 처리될 동일한 이름(이름 특성값)을 공유해야 합니다.

라디오 그룹이 만들어지면 해당 그룹의 라디오 단추를 선택하면 동일한 그룹의 다른 선택된 라디오 버튼이 자동으로 선택 해제됩니다. 각 그룹에 고유한 이름이 있는 한 페이지에 원하는 만큼 라디오 그룹을 가질 수 있습니다. `라디오 단추`는 사용자가 여러 옵션 중에서 단일 선택을 할 수 있도록 하는 데 사용되는 구성 요소입니다(확인란은 여러 옵션을 선택하는 데 사용됩니다). 그런 다음 일부 JavaScript를 추가하여 사용자가 „제출“ 단추를 클릭할 때 전송되는 제출 이벤트에 이벤트 리스너를 설정합니다 . 이 양식에서 생성된 데이터를 검사할 수 있도록 예제에 약간의 코드를 추가해 보겠습니다. HTML은 양식 데이터를 출력하는

 블록을 추가하도록 수정되었습니다: 값 특성은 라디오 단추의 값을 포함하는 DOMString입니다. 값은 사용자 에이전트에 의해 사용자에게 표시되지 않습니다. 대신 그룹의 어떤 라디오 단추를 선택하인지 식별하는 데 사용됩니다. 위의 양식을 라디오 단추를 선택하여 제출하면 양식의 데이터에 연락처=value의 항목이 포함됩니다.

예를 들어 사용자가 "전화" 라디오 버튼을 클릭한 다음 양식을 제출하면 양식의 데이터에 회선 연락처=전화가 포함됩니다. 아래 예제에서는 각 입력에 이름="groupOfDefaultRadios"를 설정합니다. 라디오 단추는 사용자가 항목 그룹에서 하나만 선택해야 하는 경우에 사용됩니다. for 특성은 사용자 지정 라디오 단추를 입력과 바인딩하는 데 필요합니다. 입력 ID를 레이블의 for 특성 값으로 추가합니다. 저장 버튼을 클릭하면 코드가 저장되고 다른 사용자와 공유할 수 있는 URL이 표시됩니다.