HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)-HTML 튜토리얼-php.cn

HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)

青灯夜游

풀어 주다： 2018-09-12 11:16:45

원래의

17281명이 탐색했습니다.

양식을 사용하여 데이터를 제출할 때 일부 사용자 작업을 줄이기 위해 선택 상자를 사용하는 것이 좋습니다. 이 장에서는 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>

로그인 후 복사

렌더링:

#🎜🎜 #

HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예) 위의 예에서 볼 수 있듯이:

type="radio"인 경우 선택 상자는 라디오 버튼으로 정의됩니다. #🎜🎜 #

name 속성: 라디오 버튼의 이름을 정의합니다. 동일한 그룹의 라디오 옵션은 동일한 이름을 사용해야 합니다.

value 속성: 값을 정의합니다. 라디오 버튼을 사용하려면 동일한 그룹 내에서 필드 값이 달라야 합니다.

checked="checked"가 설정되면 이 옵션은 라디오 버튼이든 체크박스이든 기본적으로 선택됩니다(예: 라디오 버튼):

HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)

3. HTML 체크박스 스타일

체크박스는 주로 다음과 같은 용도로 사용됩니다. 웹 페이지 시청자는 일련의 옵션 내에서 동시에 여러 옵션을 선택할 수 있습니다. 각 확인란은 독립적인 요소이며 고유한 이름을 가져야 합니다.

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>

로그인 후 복사

렌더링:

가능하다면 위의 예에서 볼 수 있습니다: HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)

type="checkbox"일 때 선택 상자는 확인란으로 정의됩니다.

name 속성: 확인란의 이름을 정의합니다. in 동일한 그룹의 확인란은 다른 이름을 사용하지만 동일한 이름(배열)으로 정의할 수도 있습니다. 예: name[]

value 속성: 확인란의 값을 정의합니다. , 그룹의 동일한 필드 값은 달라야 합니다.

4. 선택 상자의 이름 속성 버튼(라디오) 또는 체크박스 집합(체크박스)에는 이름 속성이 포함되어야 합니다. 이는 처리 페이지의 양식에서 전달된 값을 쉽게 얻을 수 있도록 하기 위한 것입니다.

라디오 버튼 그룹(라디오): name 속성의 값이 동일하므로 하나만 선택할 수 있으며, $_GET['와 같이 처리 페이지에서 직접 얻을 수 있습니다. name'];# 🎜🎜#체크박스 세트(checkbox): 일반적으로 name 속성의 값은 name[]으로 설정됩니다. 선택하면 배열 name[에 요소가 추가됩니다. ]. 처리 페이지는 다음과 같이 얻어집니다. 값:

if(!empty($_POST[&#39;name&#39;])){
for($i=0; $i< count($_POST[&#39;name&#39;]); $i++){
echo $array[$i].&#39;<br />&#39;;
}
}

로그인 후 복사

이렇게 하면 양식 체크박스(체크박스)에 전달된 여러 다른 데이터를 수집할 수 있습니다.

위 내용은 HTML에서 양식의 선택 상자 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 및 다중 선택 상자 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!