이 문서에서는 실제 예제를 통해 HTML 라디오 버튼을 만드는 방법을 안내합니다.
HTML에 라디오 버튼을 추가하는 방법?
HTML에 라디오 버튼을 추가하려면 아래 제공된 구문을 따르십시오.
< 입력 유형 = '라디오' 이름 = '' 값 = '' >
명시된 구문에 대한 설명은 다음과 같습니다.
- ' 유형 ”: 이 속성은 텍스트, 라디오, 확인란 등과 같이 만들려는 입력 유형을 지정합니다. 라디오 버튼을 생성하기 위해서는 속성 값을 “radio”로 설정해야 합니다.
- ' 이름 ” : 입력 요소의 이름을 정의합니다. 이 속성은 라디오 버튼 목록에 대해 동일해야 합니다.
- ' 값 ”: 라디오 버튼이 선택된 것으로 표시될 때 서버로 보낼 값을 지정합니다.
예: HTML에 라디오 버튼 추가
이 예제에서는 입력 라디오 버튼을 사용하여 HTML에 라디오 버튼을 추가하는 절차에 대해 설명합니다. ~ 안에
1단계: HTML 파일 생성
먼저 HTML 파일에
태그를 추가합니다.
< div > div >
생성된
내부:
< 피 > 가장 좋아하는 색은 무엇입니까? 피 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '빨간색' 체크 >
< 상표 ~을 위한 = '라디오1' > 빨간색 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '푸른' >
< 상표 ~을 위한 = '라디오1' > 푸른 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '초록' >
< 상표 ~을 위한 = '라디오1' > 녹색 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '자주색' >
< 상표 ~을 위한 = '라디오1' > 보라 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '다른' >
< 상표 ~을 위한 = '라디오1' > 기타 상표 >
배경색: #8197f0;
테두리: 5px 점선 #13023a;
패딩: 20px 100px;
글꼴 크기: 20px;
font-family: 필기체;
}
- 먼저 ' ” 태그를 사용하여 페이지의 제목을 지정합니다.
- 그 다음에 ' ” 단락 또는 텍스트 줄에 대한 태그입니다.
- 그런 다음 입력 태그에 '라는 속성이 추가됩니다. 유형 '가치가 있는' 라디오 ”, 이름은 select로 설정하고, “ 값 ' 처럼 ' 빨간색 '. 이름이 같은 라디오 버튼마다 다른 값이 부여됩니다. 같은 이름은 같은 그룹이나 목록을 나타냅니다.
- 기본적으로 선택된 것으로 표시된 버튼을 추가하려면 속성 ' 체크 ” 버튼에.
- 마지막으로 “ <레이블> ” 각 라디오 버튼의 요소는 캡션을 추가하는 데 사용됩니다. 또한 더 나은 접근성을 제공합니다.
아래 코드는 위의 시나리오를 해석한 것입니다.
< h1 > HTML 라디오 버튼 h1 >< 피 > 가장 좋아하는 색은 무엇입니까? 피 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '빨간색' 체크 >
< 상표 ~을 위한 = '라디오1' > 빨간색 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '푸른' >
< 상표 ~을 위한 = '라디오1' > 푸른 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '초록' >
< 상표 ~을 위한 = '라디오1' > 녹색 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '자주색' >
< 상표 ~을 위한 = '라디오1' > 보라 상표 >
< 브 >
< 입력 유형 = '라디오' 이름 = '선택 색상' 값 = '다른' >
< 상표 ~을 위한 = '라디오1' > 기타 상표 >
라디오 버튼이 성공적으로 생성된 것을 볼 수 있습니다.
아래에 언급된 CSS 코드를 따라 위에서 생성한 라디오 버튼에 스타일을 적용할 수도 있습니다.
2단계: HTML에 스타일 적용
“ div ”는 HTML 파일에서 생성한 div 태그를 나타냅니다.
- 먼저 ' 배경색 ' 속성은 ' #8197f0 '.
- ' 국경 ' 속성은 ' 5px 점선 #13023a ”에서 5px는 테두리의 너비를 나타내고, 점선은 선의 종류를 나타내며, next는 테두리의 색상을 나타냅니다.
- “ 심 ”는 “로 설정 20픽셀 100픽셀 ” 여기서 20px는 위쪽과 아래쪽의 패딩을 지정하고 100px는 왼쪽과 오른쪽의 패딩을 나타냅니다.
- 글꼴 스타일을 지정하려면 ' 글꼴 모음 ' 속성 값 ' 필기체 '.
CSS
div {배경색: #8197f0;
테두리: 5px 점선 #13023a;
패딩: 20px 100px;
글꼴 크기: 20px;
font-family: 필기체;
}
div 요소의 스타일이 성공적으로 지정되었음을 알 수 있습니다.
그게 다야! HTML 라디오 버튼에 대해 자세히 설명했습니다.
결론
라디오 버튼은 항상 둘 이상의 옵션 그룹으로 표시되는 입력입니다. 이 그룹에서 사용자는 하나의 옵션만 선택할 수 있습니다. HTML에서 라디오 버튼은 ' <입력> ” 값이 있는 속성 유형을 갖는 태그 라디오 '. 이 블로그는 HTML에 라디오 버튼을 추가하는 방법을 보여주었습니다.