Multi Developer SuHo

HTML 레이블 태그(<label>), 라디오 버튼(radio), 체크박스(checkbox) 활용 본문

html5+CSS3

HTML 레이블 태그(<label>), 라디오 버튼(radio), 체크박스(checkbox) 활용

Dreaming Developer Student 2024. 2. 9. 16:30
SMALL

안녕하세요!  내용을 소개하기전에  모든분들 명절 잘 보내시고 행복한 날들만 가득하길 바라겠습니다. !!!
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


이번엔  레이블 태그와 라디오 버튼, 체크박스를 활용한 내용입니다. 먼저 레이블 태그에 대해 알아보겠습니다. 
HTML의 <label> 태그는 사용자 인터페이스 항목의 설명을 제공하는데 사용됩니다.
<label> 태그를 활용한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style></style>
</head>
<body>
 <label for="email"> 이메일 입력 </label>
    <!-- input 태그와 연결하기 위해서 "for" 속성에다가 연결하려는 input 태그의 아이디를 작성해줍니다.  -->
<input type="text" id="email" placeholder="이메일"> 
<!-- 레이블하고 연결하기 위해서 선택자 역할을 할 아이디 속성 추가 -->
</body>
</html>

 


"이메일 입력" 텍스트를 클릭하면 자동으로 연결된 창으로 커서가 가집니다.

다음은 라디오 박스와 체크박스 예제입니다.
(type= "radio") : 라디오 버튼은 한 그룹 내에서 한 번에 하나의 옵션만 선택할 수 있습니다. 즉, 단일 선택 옵션일 경우에는 라디오 버튼을 사용합니다.


라디오 버튼을 활용한 소스코드 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style></style>
</head>
<body>
    <label for="Yes">네</label>
    <input id ="Yes" type="radio" name="check" > 
    <label for="No">아니오</label>
    <input id ="No"  type="radio" name="check" >
    <!-- 2개의 라디오 버튼이 하나의 그룹임을 나타내기 위해 name 속성을 사용하여 똑같은 그룹으로 지정 -->
</body>
</html>

버튼에 대한 설명하기 위해 <label> 태그를 추가합니다.

다음은 체크박스를 활용한 소스코드 입니다. 체크박스도 라디오 버튼과 동일하게 해주시면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style></style>
</head>
<body>
  <label for="reading">독서</label>
  <input id="reading" type="checkbox" name="hobby">
  <label for="traveling">여행</label>
  <input id="traveling" type="checkbox" name="hobby">
  <label for="listen to music">음악 듣기 </label>
  <input id="listen to music" type="checkbox" name="hobby">
</body>
</html>

 

이렇게  레이블 태그, 라디오 버튼, for 속성, id 속성, name 속성을 활용하여 간단하게 실습을 해보았습니다. 
감사합니다!!
새해 복 많이 받으세요~

 

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS3가 웹 사이트에 미치는 영향, 주요 기능과 사용하는 이유  (0) 2024.02.11
HTML 시맨틱 태그,(Semantic Tag), 의미론적 태그  (0) 2024.02.10
HTML 폼(form) 태그 , <input>(위젯)  (0) 2024.02.05
HTML <div>, <span> 태그 & class and id  (0) 2024.02.04
HTML 이미지<img>, 비디오<video>, 오디오 태그<audio>  (0) 2024.02.03
'html5+CSS3' Related Articles more