라디오버튼 예제

다음은 라디오 단추의 두 그룹입니다. 각 그룹의 라디오 버튼이 이름을 공유한다는 것을 다시 한 번 알 수 있습니다. 첫 번째 그룹에는 “preferred_color”의 이름이 있고 두 번째 그룹에는 “preferred_item”의 이름이 있습니다. 라디오 단추는 사용자에게 두 개 이상의 옵션 중에서 선택할 수 있도록 할 때마다 사용해야 합니다. 그들은 확인란처럼 많이 보이지만 옵션 그룹 내에서 0 또는 여러 선택을 허용하는 대신 라디오 버튼을 사용하여 하나만 선택해야합니다. 가장 간단한 형태로 라디오 단추는 단순히 입력 요소와 같은 라디오속성이 라디오로 설정됩니다. 라디오 그룹이 설정되면 해당 그룹의 라디오 단추를 선택하면 동일한 그룹에서 현재 선택된 라디오 단추를 자동으로 선택 해제합니다. 참고: 확인란은 라디오 단추와 비슷하지만 중요한 차이점: 라디오 단추는 세트에서 하나의 값을 선택하도록 설계되었지만 확인란을 사용하면 개별 값을 켜고 끌 수 있습니다. 여러 컨트롤이 있는 경우 라디오 단추를 사용하면 모두 선택할 수 있는 반면 확인란에서는 여러 값을 선택할 수 있습니다. 우리는 이미 위의 라디오 버튼의 기초를 다루었습니다. 이제 알아야 할 다른 일반적인 라디오 단추 관련 기능과 기술을 살펴보겠습니다. 재질 라디오 단추에 적합한 커서 스타일을 제공하려면 비활성화된 특성을 설정하는 것 외에도

다음 예제에서는 문서 전체에서 본 예제의 약간 더 철저한 버전과 몇 가지 추가 스타일 및 특수 요소를 사용하여 설정된 더 나은 의미 체계를 보여 주어집니다. HTML은 다음과 같습니다: 위의 양식이 라디오 단추를 선택하여 제출되면 양식의 데이터에 연락처=value 양식의 항목이 포함됩니다. 예를 들어 사용자가 “전화” 라디오 버튼을 클릭한 다음 양식을 제출하면 양식의 데이터에 회선 연락처=전화가 포함됩니다. 그러나 모든 입력 요소와 마찬가지로 이름을 사용할 수 있도록 이름을 정의해야 합니다. 또한 값을 설정하려고 합니다 – 라디오 단추가 선택된 경우 서버로 전송되는 값입니다. 다음은 이 라디오 단추가 그룹에서 현재 선택된 버튼임을 나타내는 부울 특성입니다. 사용자가 웹마스터에게 이메일을 보내는 양식을 제출한다고 가정해 보겠습니다. 사용자는 라디오 단추에서 원하는 색상을 선택하고 제출 단추를 클릭합니다. 웹마스터는 요소의 모든 상위 요소에 .custom-control-inline 클래스를 추가하여 동일한 가로 행의 기본 라디오 단추 또는 확인란을 그룹화하는 전자 메일을 받을 수 있습니다. 여기서 가장 주목할 만한 것은 -moz 모양 속성(일부 브라우저를 지원하는 데 필요한 접두사 사용)의 사용입니다. 기본적으로 라디오 단추(및 확인란)는 이러한 컨트롤에 대한 운영 체제의 기본 스타일로 스타일이 설정됩니다.

모양: 없음을 지정하여 네이티브 스타일을 완전히 제거하고 고유한 스타일을 만들 수 있습니다.

Comments are closed.


Iron Age Tattoo Aftercare

Iron Age Piercing Aftercare

Iron Age Notary Form
We cannot display this gallery
RE-LOADABLE GIFT CARDS AVAILABLE NOW!
Iron Age Gift Cards
Iron Age on Facebook
Iron Age on Instagram
Iron Age on Twitter