* 욕설, 비방, 광고, 도배질 글은 임의로 삭제됩니다.

[펌 강의] 27.Input Type Form (II) - Check B

페이지 정보

써니

본문





size="2">27.
Input Type Form (II) - Check Box, Radio Button


지난 강좌에서는 텍스트, 암호 그리고
submit, reset 버튼에 대해서 알아보았습니다. 여기서는 체크박스와
라디오 버튼이 어떻게 사용되는지 알아보도록 하겠습니다. 체크박스와
라디오 버튼 모두 Input Type의 한 종류입니다.


1) 체크 박스(Check Box) size="2">

 

bordercolorlight="black">



<INPUT type=" size="2" color="red">checkbox size="2">" name="이름"
value="값" checked>


체크박스는 많이 보셨죠? 그리고
input tag는 변함이 없네요. 단지 type이 checkbox 네요^^* 후후.. 여러분
어느 사이트에 가입하거나 설문할 때 취미가 뭐여요?(3 가지 중복 선택
가능) 이런 항목 보셨죠?


  • 체크박스(Checkbox)는 다중
    선택이 가능합니다. 이것이 뒤에 설명할 라디오 버튼(Radio Button)과
    다른 점이죠.

  • 체크박스(Checkbox)의 크기는
    앞에서 다룬 텍스트나 암호처럼 그 크기를 지정할 수가 없습니다.

  • name - 이름입니다. 담배를
    좋아하는 아버지가 아기를 낳았는데 첫째는 한갑, 둘째는 두갑...
    막내는 보루 라구 이름을 짓듯이 앞에 네모난 체크박스 달구 다니는
    이 넘두 이름을 줍니다.

  • value - 서버로 보내거나 실질적인
    연산을 할 경우 사용되는 값입니다. 앞에서 Submit, Reset 버튼에도
    value가 있었는데 요넘들은 버튼에 나타나는 텍스트를 나타냈었죠?
    기억이 안나신다구요? 저도 그거 설명한 거 기억 안납니다^^* 체크박스에서는
    각 value값을 다 다르게 줘야합니다.

  • checked - Default로 체크되게
    하고 싶을 경우 사용합니다. 밑의 예제에서 차가 젤 비싼 것 같아서
    거기다가 기본으로 체크해 뒀습니다.


<html>

<head>

    <title> 체크 박스 </title>

</head>

<body>

    <font size="2">

    당신이 좋아하는 음식을 모두 선택하세요?<p>

    <form action="hahaha.cgi" method="post">

        <input type="checkbox"
name="food" value="apple">

        사과&nbsp;

        <input type="checkbox"
name="food" value="banana">

        바나나 &nbsp;

        <input type="checkbox"
name="food" value="orange">

        오렌지&nbsp;

        <input type="checkbox"
name="food" value="pizza">

        피자

        <p>

        당신이 받고 싶은
선물을 모두 선택하세요?<p>

        <input type="checkbox"
name="present" value="doll">

        인형&nbsp;

        <input type="checkbox"
name="present" value="car" checked>

        자동차&nbsp;

        <input type="checkbox"
name="present" value="computer">

        컴퓨터

        <p>

        음.. 이제 서버로
자료를 보낼까요??<p>

        <input type="submit"
value="보내 버려^^*">

        &nbsp;&nbsp;&nbsp;

        <input type="reset"
value="다시 골라???">

    </form>

    </font>

</body>

</html>


당신이 좋아하는 음식을 모두 선택하세요?



value="apple"> 사과 
바나나  
오렌지  피자


당신이 받고 싶은 선물을 모두 선택하세요?


value="doll"> 인형  checked> 자동차 
컴퓨터


음.. 이제 서버로 자료를 보낼까요??



   



그런데 보니까 위에 보면 체크박스가
7개 있는데, 이름은 딸랑 두 개네요. 체크될 그룹마다 하나의 이름으로
주어야 합니다. 항목에 따라 적당히 이름을 주면 됩니다.


2) 라디오 버튼(Radio Button) size="2">

 

bordercolorlight="black">



<INPUT type=" size="2" color="red">radio size="2">" name="이름"
value="값" checked>


라디오 버튼도 많이 보셨죠? 주로
투표할 경우 많이 사용됩니다. 대부분 설명이 체크박스와 비슷합니다.


  • 라이오 버튼은 체크박스(Checkbox)와는
    달리 딱~ 한 개만 선택할 수 있습니다. 한 개라 함은 name이 같은
    것 중 하나만 선택할 수 있다는 것을 의미합니다. 이제 같은 name을
    여러 개의 체크박스나 라디오 버튼에 주는 이유를 좀 아시겠죠?

  • 라디오 버튼 역시 체크박스처럼
    크기를 앞에서 다룬 텍스트나 암호처럼 그 크기를 지정할 수가 없습니다.

  • name - 이름입니다. 체크박스와
    설명이 동일합니다.

  • value - 요넘두 체크박스와
    동일합니다.

  • checked - 요넘두 마찬가지입니다.
    그런데 체크박스에서는 여러 개에 Default로 Checked라는 옵션을
    줄 수 있지만 라디오 버튼에서는 한 개만 지정하세요^^* 두 세 개
    지정해도 첨에는 지정을 될런지도 모릅니다. 그런데 의미가 없습니다.


그럼 위의 예를 라디오 버튼으로
바꿔볼까요?


<html>

<head>

    <title> 체크 박스 </title>

</head>

<body>

    <font size="2">

    당신이 좋아하는 음식을 모두 선택하세요?<p>

    <form action="hahaha.cgi" method="post">

        <input type="radio"
name="food" value="apple">

        사과&nbsp;

        <input type="radio"
name="food" value="banana">

        바나나 &nbsp;

        <input type="radio"
name="food" value="orange">

        오렌지&nbsp;

        <input type="radio"
name="food" value="pizza">

        피자

        <p>

        당신이 받고 싶은
선물을 모두 선택하세요?<p>

        <input type="radio"
name="present" value="doll">

        인형&nbsp;

        <input type="radio"
name="present" value="car" checked>

        자동차&nbsp;

        <input type="radio"
name="present" value="computer">

        컴퓨터

        <p>

        음.. 이제 서버로
자료를 보낼까요??<p>

        <input type="submit"
value="보내 버려^^*">

        &nbsp;&nbsp;&nbsp;

        <input type="reset"
value="다시 골라???">

    </form>

    </font>

</body>

</html>


당신이 좋아하는 음식을 모두 선택하세요?



value="apple"> 사과 
바나나   오렌지 
피자


당신이 받고 싶은 선물을 모두 선택하세요?


value="doll"> 인형  checked> 자동차 
컴퓨터


음.. 이제 서버로 자료를 보낼까요??



   



후후.. 이제 체크박스나
라디오 버튼이 어떻게 사용되는지 이해가 가죠?

작성일2005-02-28 14:35

온라인카지노님의 댓글

온라인카지노
안녕하세요. 다양한정보 감사합니다. 온라인카지노 먹튀검증 보증업체 추천 온라인구조대 입니다. //
http://timespototo.com/토토보증놀이터
http://online-safer.com/카지노사이트
http://jusobada.com/링크모음
컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
96 써니님, brian님 너무 감사하구요 하나더 여쭤볼께요. 인기글 제키챤 2005-02-24 8242
95 [펌 강의] 23.프레임(Frame) 나누기 예제(III) 댓글[2] 인기글 써니 2005-02-24 12691
94 [펌 강의]22. 프레임(Frame) 나누기 예제(II) 댓글[1] 인기글 써니 2005-02-24 10552
93 [펌 강의] 21. 프레임(Frame) 나누기 예제(I) 댓글[1] 인기글 써니 2005-02-24 6246
92 [펌 강의] 20. 프레임(Frame) 나누기 (II) 인기글 써니 2005-02-24 6088
91 답변글 대단 합니다 써니님...... !! 댓글[1] 인기글 선달 2005-02-24 6818
90 답변글 컴이 말썽을 부릴땐 망치로 한대...... (SOS !) 댓글[1] 인기글 써니 2005-02-23 6453
89 컴이 말썽을 부릴땐 망치로 한대...... (SOS !) 댓글[1] 인기글 선달 2005-02-23 7279
88 sim 에 문제가 있어 프로그램을 종료해야 한다는데......??? 댓글[1] 인기글 So.Cal. 2005-02-23 6325
87 [펌 강의] 19. 프레임(Frame) 나누기 (I) 댓글[1] 인기글 써니 2005-02-22 7433
86 [펌 강의] 18. 프레임(Frame) tag 댓글[1] 인기글 써니 2005-02-22 6970
85 [펌 강의] 17. 프레임(Frame)이란 무엇일까? 인기글 써니 2005-02-22 8846
84 [펌 강의] 16. Table을 이용한 이력서 만들기 인기글 써니 2005-02-22 17667
83 [펌 강의] 15. Table 예제 몇 개 댓글[1] 인기글 써니 2005-02-22 5975
82 디지탈 카메라에 대해 댓글[1] 인기글 당췌모름 2005-02-21 7332
81 답변글 포맷변환에대해 댓글[1] 인기글 Simple 2005-02-21 7080
80 답변글 포맷변환에대해 댓글[1] 인기글 써니 2005-02-21 6944
79 포맷변환에대해 댓글[1] 인기글 막무가네 2005-02-21 6580
78 USB 드라이브에 중요한걸 저장해놨는데 댓글[2] 인기글 컴맹 2005-02-19 7364
77 Hangul for window xp 댓글[3] 인기글 John 2005-02-19 7329
76 싸이에 mp3 올릴수있나요? 댓글[1] 인기글 갈켜주세요 2005-02-19 7262
75 [정보] 동영상을 다운로드 하는 방법 댓글[4] 인기글 써니 2005-02-16 9017
74 답변글 Window screen got shrink??? 인기글 sonny 2005-02-16 8430
73 [펌 강의] 14. Table 안에 다른 Table 집어 넣기 인기글 써니 2005-02-16 8172
72 [펌 강의] 13. Table에 색상과 배경 넣기 인기글 써니 2005-02-16 9024
71 [펌 강의] 12. Table Tag에서 사용되는 옵션 댓글[1] 인기글 써니 2005-02-16 7100
70 [펌 강의] 11. Table의 이해와 Table Tag 댓글[1] 인기글 써니 2005-02-16 6912
69 [펌 강의] 10. HTML에 Image 넣기 댓글[1] 인기글 써니 2005-02-16 7921
68 답변글 Window screen got shrink??? 댓글[1] 인기글 써니 2005-02-16 7573
67 답변글 compusa 님 답글 감사합니다. 근데,여전히 문제가.. 댓글[2] 인기글 Compusa 2005-02-16 7527
게시물 검색
* 게시일 1년씩 검색합니다. '이전검색','다음검색'으로 계속 검색할 수 있습니다.
** 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.