HTML에서 RadioButton을 구현하는 방법-HTML 튜토리얼-php.cn

HTML에서 RadioButton을 구현하는 방법

不言

풀어 주다： 2018-12-10 09:23:29

원래의

9783명이 탐색했습니다.

HTML에서 HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법을 구현하는 방법을 HTML로 구현하려면 input 태그를 사용해야 하며, 여기서 유형은 radio로 지정됩니다. 자세한 내용은 다음 글에서 다루도록 하겠습니다.

HTML에서 HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법을 구현하는 방법

먼저 입력 태그의 형식을 살펴보겠습니다.

<input id="(id)" name="(组名称)" type="radio"></input>

로그인 후 복사

참고: 검색된 값은 양식 제출 또는 JavaScript를 사용하여 얻을 수 있습니다.

구체적인 예를 살펴보자

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">单选按钮 元素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">单选按钮 元素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">单选按钮 元素3</label><br />
  </form>
  <div id="output"></div>
</body>
</html>

로그인 후 복사

실행 결과

#🎜🎜 #위 HTML 파일을 웹브라우저로 열면 아래와 같은 효과가 나타납니다.

HTML에서 HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법을 구현하는 방법

라디오 버튼의 선택 상태를 변경하려면 클릭하세요

HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법

여러 그룹에서 HTML에서 HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법을 구현하는 방법을 사용하는 경우

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <form name="form1" action="">
    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio1" name="group01" type="radio" /><label for="Radio1">单选项目1</label><br />
      <input id="Radio2" name="group01" type="radio" /><label for="Radio2">单选项目2</label><br />
      <input id="Radio3" name="group01" type="radio" /><label for="Radio3">单选项目3</label><br />
    </div>
    <div id="output1"></div>
    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio4" name="group02" type="radio" /><label for="Radio4">单选项目4</label><br />
      <input id="Radio5" name="group02" type="radio" /><label for="Radio5">单选项目5</label><br />
      <input id="Radio6" name="group02" type="radio" /><label for="Radio6">单选项目6</label><br />
    </div>
    <div id="output2"></div>
  </form>
</body>
</html>

로그인 후 복사

지침:

라디오를 변경하려면 버튼 여러 그룹으로 나누려면 각 그룹의 이름 속성을 다른 이름으로 설정하세요. 위의 예에서 Radio 1, Radio 2 및 Radio 3의 이름 속성은 그룹 1입니다. Radio 4, Radio 5 및 Radio 6의 이름 속성은 그룹 2입니다.

실행 결과

위 HTML 파일을 웹 브라우저로 열면 아래와 같은 효과가 나타납니다.

HTML에서 HTML에서 RadioButton을 구현하는 방법을 구현하는 방법