HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)
- 青灯夜游원래의
- 2018-09-12 11:16:4517249검색
양식을 사용하여 데이터를 제출할 때 일부 사용자 작업을 줄이기 위해 선택 상자를 사용하는 것이 좋습니다. 이 장에서는 HTML에서 양식의 선택 상자 효과를 구현하는 방법을 소개합니다. 라디오 버튼 및 체크박스 구현(코드 예시) 라디오버튼 코드와 체크박스 코드 예제를 통해 어느 정도 참고할만한 가치가 있는 라디오버튼 스타일과 다중선택박스 스타일을 구현해 놓았으니 참고하시면 좋을 것 같습니다.
1. 선택 상자의 유형 및 구문
html에는 두 가지 유형의 선택 상자가 있습니다. 즉, 라디오 선택 상자와 확인란의 차이점은 사용자가 라디오 단추 상자에서 하나의 옵션만 선택할 수 있는 반면, 확인란에서는 사용자가 여러 옵션 또는 심지어 모든 옵션을 선택할 수 있다는 것입니다.
문법:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
2. HTML 라디오 버튼 스타일
# 🎜🎜#html 라디오 버튼 코드:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单选框</title> </head> <body> <form name="form" method="post" action=""> 你是否喜欢运动？<br /> <input type="radio" name="radio" value="喜欢"/>喜欢 <input type="radio" name="radio" value="不喜欢"/>不喜欢 <input type="radio" name="radio" value="无所谓"/>无所谓 </form> </body> </html>렌더링:
#🎜🎜 #
위의 예에서 볼 수 있듯이:
type="radio"인 경우 선택 상자는 라디오 버튼으로 정의됩니다. #🎜🎜 #
name 속성: 라디오 버튼의 이름을 정의합니다. 동일한 그룹의 라디오 옵션은 동일한 이름을 사용해야 합니다. value 속성: 값을 정의합니다. 라디오 버튼을 사용하려면 동일한 그룹 내에서 필드 값이 달라야 합니다. checked="checked"가 설정되면 이 옵션은 라디오 버튼이든 체크박스이든 기본적으로 선택됩니다(예: 라디오 버튼): "153671643175698HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)")
체크박스는 주로 다음과 같은 용도로 사용됩니다. 웹 페이지 시청자는 일련의 옵션 내에서 동시에 여러 옵션을 선택할 수 있습니다. 각 확인란은 독립적인 요소이며 고유한 이름을 가져야 합니다.
html 체크박스 코드:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框</title> </head> <body> <form name="form" method="post" action=""> 你喜欢什么运动？<br /> <input type="checkbox" name="checkbox" value="跑步" checked="checked"/>跑步 <input type="checkbox" name="checkbox" value="羽毛球"/>羽毛球 <input type="checkbox" name="checkbox" value="乒乓球"/>乒乓球 <input type="checkbox" name="checkbox" value="乒乓球"/>登山 </form> </body> </html>렌더링:
가능하다면 위의 예에서 볼 수 있습니다: 
라디오 버튼 그룹(라디오): name 속성의 값이 동일하므로 하나만 선택할 수 있으며, $_GET['와 같이 처리 페이지에서 직접 얻을 수 있습니다. name'];# 🎜🎜#체크박스 세트(checkbox): 일반적으로 name 속성의 값은 name[]으로 설정됩니다. 선택하면 배열 name[에 요소가 추가됩니다. ]. 처리 페이지는 다음과 같이 얻어집니다. 값: if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
} 이렇게 하면 양식 체크박스(체크박스)에 전달된 여러 다른 데이터를 수집할 수 있습니다.
위 내용은 HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!