라디오 버튼

Programming/HTML 2017. 12. 11. 23:57

라디오 버튼은 여러개의 항목 중에서 하나만을 선택할 수 있도록 제한하는 컨트롤이다.

 

문법

<input type="radio" name="값의 이름" value="값" checked="checked">

 

예제

  - radiobuttonexample.html
<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                    관심사 : <br />
                    <input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />
                    <input type="radio" name="interest" value="design" /> 디자인<br />
                    <input type="radio" name="interest" value="planning" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>

 

  - example_receive_single.php

<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
        당신의 관심사는? <?=$_POST['interest']?>
    </body>
</html>

 

예제 설명

해당 예제는 웹서버를 구성해야 가능하다.(apm을 활용) 예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

프로그래밍에 checked 옵션이 있으므로 프로그래밍에 체크되어있다. 만약 다른곳에 checked 옵션이 있다면 그곳에 체크 되어있었을 것이다. 제출 버튼을 누르면 체크한 정보가 example_receive_single.php 파일에 전송되어 아래와 같은 화면이 출력된다.

 

 

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

체크박스  (0) 2017.12.12
콤보 박스  (0) 2017.12.12
비밀번호, hidden data, textarea  (0) 2017.12.11
폼(form), 텍스트 입력  (0) 2017.12.11
head, meta, title  (0) 2017.12.11
블로그 이미지

꼴통보안인

,