Appia의 IT세상

[초보HTML배우기 13]HTML - Form, Checkbox만들기(input) 본문

Programming/HTML&CSS

[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)

Appia 2020. 8. 4. 07:26
반응형

[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)

 

앞서 포스팅에서는 텍스트를 입력 받는 공간을 만들어봤습니다. 이전 포스팅에서는 일반 적인 한줄 텍스트 박스, Password를 입력할 수 있는 텍스트 박스, 그리고 여러줄을 입력할 수 있는 텍스트 박스를 생성해봤습니다. 이번 포스팅에서는 체크 박스를 생성을 해보도록 하겠습니다. 

 

그럼 간단하게 다음 코드를 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>브라우저를 선택하세요</p>
    <form >
        <input type = "checkbox" name = "google" value = "on"> 구글
        <input type = "checkbox" name = "naver" value = "on"> 네이버
     </form>
</body>
</html>
cs

위의 코드를 바탕으로 생성된 html파일을 브라우저에서 읽으면 다음과 같은 형태로 나타납니다. 

html에 체크 박스 생성한 결과 

위의 바탕으로 생성하는 부분들을 살펴봤는데, 앞선 포스팅에서 봤던 input을 재사용합니다. 단, type = 'checkbox'로 설정 해주셔야 합니다. 그럼 먼저, 속성에 대해서 살펴보겠습니다. 

type input을 바탕으로 사용하기 때문에, checkbox를 사용할 경우 속성으로 checkbox를 입력.
name 위의 form 객체에 대한 name, 외부 코드 및 서버등에서 호출시 사용 
value 체크 박스가 선택될 때 사용될 값
checked 만약, 최초 설정이 선택된 것으로 하기 위해서 사용할 값. 

 

일단, checked 박스에 경우데 대해서 다음과 같이 위의 코드를 수정해보도록 하겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>브라우저를 선택하세요</p>
    <form >
        <input type = "checkbox" name = "google" value = "on" checked> 구글
        <input type = "checkbox" name = "naver" value = "on"> 네이버
     </form>
</body>
</html>
cs

위의 코드를 적용해보니, 다음과 같이 브라우저 화면이 달라집니다. 

html에 체크 박스의 checked 속성 추가 화면 

위와 같이 체크 박스의 체크가 추가된 것을 볼 수 있었습니다. 간다하게 적용이 가능합니다. 

 

이번 포스팅에서는 [초보HTML배우기 13]HTML - Form, Checkbox만들기(input)라는 주제로 간단하게 브라우저상에 체크박스를 생성하는 방법에 대해서 살펴봤습니다. 혹시 궁금하시거나, 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글남겨주시길 바랍니다. 감사합니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)  (1) 2020.08.10
[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)  (0) 2020.08.07
[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)  (0) 2020.07.31
[초보HTML배우기 11]HTML - 이미지를 배경 설정하기  (0) 2020.07.29
[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)  (0) 2020.07.27
'Programming/HTML&CSS' Related Articles more
Comments