Appia의 IT세상

[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input) 본문

Programming/HTML&CSS

[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)

Appia 2020. 8. 7. 07:07
반응형

[초보HTML배우기 14]HTML -

Form, 라디오 버튼(radio button)만들기(input)

 

이번 포스팅에서는 여러개의 버튼중을 하나를 선택할 수 있는 라디오 버튼(radio button)을 만드는 방법에 대해서 이야기 해보고자 합니다. 먼저 라디오 버튼(radio button)은 여러개의 메뉴중에 하나만 선택할 수 있게 해주는 버튼입니다. 간단히 예를 들면 다음과 같은 버튼이라고 할 수 있습니다. 

라디오 버튼(radio button) 예제

위의 부분과 같은 부분에 대한 코드를 한번 작성해보도록 하겠습니다. 

<!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>
   <form>
      <input type = "radio" name = "subject" value = "appia1"> 앱피아1
      <input type = "radio" name = "subject" value = "appia2"> 앱피아2
      <input type = "radio" name = "subject" value = "appia3"> 앱피아3
      <input type = "radio" name = "subject" value = "appia4"> 앱피아4
   </form>
</body>
</html>
cs

위의 HTML로 작성한 부분을 저장하여 html을 브라우저로 보면 다음과 같습니다. 

라디오 버튼(radio button)

그럼 간단히 위의 부분에 대한 속성에 대해서 한번 살펴보도록 하겠습니다. 

속성 설명 속성 설명
type input에 대한 속성, radio button의 경우 "radio"로 입력
name 서버등에서 사용될 객체의 이름
value 라디오 버튼이 선택될 때 사용될 값
checked 초기 설정될 부분에 속성 추가

 

위와 같은 형태로 작성하시면 간단히 라디오 버튼을 생성할 수 있습니다. 그럼 위의 속성에서 checked만 한번 이용해보도록 하겠습니다. body 부분을 다음과 같이 수정해보도록 하겠습니다. 

<body>
   <form>
      <input type = "radio" name = "subject" value = "appia1"> 앱피아1
      <input type = "radio" name = "subject" value = "appia2"> 앱피아2
      <input type = "radio" name = "subject" value = "appia3"> 앱피아3
      <input type = "radio" name = "subject" value = "appia4" checked> 앱피아4
   </form>
</body>
cs

위의 코드가 반영된 html로 나타나면 다음과 같습니다. 

checked 적용 예시 

이렇게 초기값이 설정된 라디오 버튼(radio button)을 생성해 봤습니다. 

오늘은 [초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)라는 주제로 간단히 라디오 버튼(radio button)을 생성해봤습니다. 감사합니다. 

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

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

[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)  (0) 2020.08.13
[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)  (1) 2020.08.10
[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)  (0) 2020.07.31
[초보HTML배우기 11]HTML - 이미지를 배경 설정하기  (0) 2020.07.29
'Programming/HTML&CSS' Related Articles more
Comments