checkbox 예제

이전 예제를 테스트한 경우 체크박스 옆에 텍스트를 넣을 수 있지만 여전히 두 가지 별도 항목입니다 . 이것은 사용자에게 정말 성가신 일이 될 수 있지만 다행히도 해결하기가 쉽습니다 : 레이블 요소를 사용하십시오! 차이점을 보여 주는 기본 예는 다음과 같습니다: 이 예제에서는 각 확인란에 동일한 이름을 지정한 것을 볼 수 있습니다. 두 확인란을 모두 선택한 다음 양식이 제출되면 다음과 같이 제출된 이름/값 쌍의 문자열인 interest=코딩&interest=음악을 받게 됩니다. 이 문자열이 서버에 도달하면 연관 배열이 아닌 다른 값을 구문 분석해야 하므로 마지막 값뿐만 아니라 관심 있는 모든 값이 캡처됩니다. PHP와 함께 사용되는 한 가지 기술의 경우 단일 서버면 변수가 있는 여러 확인란 처리를 참조하십시오. 이 예제에서는 확인란을 선택 하 고 폼을 서버에 제출 하는 경우 서버 양식 요소 “nameOfChoice”를 읽을 수 있을 것입니다 및 해당 값 1 됩니다. 확인란의 값을 나타내는 DOMString입니다. 클라이언트 측에서는 볼 수 없지만 서버에서는 확인란의 이름으로 제출된 데이터에 부여된 값입니다. 다음 예제를 예로 들자: 부트스트랩 확인란 구성 요소에 대한 기본 스타일 웹 페이지에서 확인란을 만들려면 아래와 같이 태그를 사용합니다. 아래 예제에서는 확인란을 만들고 “확인란 1” 텍스트 다음에 오는 확인란의 위의 예에서 코드를 사용하고 있습니다. 지금까지 모든 확인란은 간단한 스위치(예: 옵션 의 켜기 또는 끄기 여부)였습니다. 확인란은 이에 적합하지만 언급했듯이 사용자에게 가능한 옵션을 선택할 수 있도록 하는 데도 사용할 수 있습니다. 확인란은 지원 유효성 검사를 수행합니다 (모든 제공).

그러나 대부분의 유효성 상태는 항상 false입니다. 확인란에 필수 특성이 있지만 선택되지 않은 경우 ValidityState.valueMissing은 true입니다. 예를 들어 다음 데모에서는 사용자가 관심사를 선택할 수 있도록 여러 확인란을 포함합니다(예제 섹션의 전체 버전 참조). 확인란을 사용하면 단일 설정을 켜거나 끄거나 즐겨찾기 애완동물 예제와 같이 여러 선택을 허용하도록 사용자에 대해 선택 가능한 옵션을 설정할 수 있습니다. 사용자가 확인란을 조작할 때 더 큰 영역을 클릭할 수 있도록 확인란과 설명 텍스트를 함께 묶기 위해 레이블을 사용해야 합니다. 다른 DOM 요소와 마찬가지로 JavaScript를 사용하여 확인란을 조작할 수 있습니다. 이와 관련하여 확인란을 선택했는지 여부를 확인하고 사용자가 선택할 수 있는 옵션 수를 제어하는 몇 가지 논리를 추가하는 것이 흥미로울 수 있습니다. 이 작업을 수행 할 수있는 방법을 보여주기 위해, 나는 몇 가지 자바 스크립트 마법을 포함하도록 이전 예제 (“즐겨 찾기 애완 동물”선택기)를 확장했습니다 : 확인란 (확인란, 체크 박스, 체크 박스, 체크 박스)는 사용자가 바이너리 선택을 할 수 있도록 GUI 위젯입니다, 즉, 두 poss 중 하나를 선택 상호 배타적인 옵션을 제공합니다.