HTML 수업

선택

예제

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/color.php">
            <h1>색상</h1>
            <select name="color">
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <h1>색상2 (다중선택)</h1>
            <select name="color2" multiple>
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

예제

 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/order.php">
            <p>
                <h1>색상(단일선택)</h1>
                붉은색 : <input type="radio" name="color" value="red">
                검은색 : <input type="radio" name="color" value="black" checked>
                파란색 : <input type="radio" name="color" value="blue">
            </p>
            <p>
                <h1>사이즈(다중선택)</h1>
                95 : <input type="checkbox" name="size" value="95">
                100 : <input type="checkbox" name="size" value="100" checked>
                105 : <input type="checkbox" name="size" value="105" checked>
            </p>
            <input type="submit">
        </form>
    </body>
</html>

 

댓글

댓글 본문
  1. 김지원
    20.11.21
    <form action="http://localhost/color.php">
    <h1>색상</h1>
    <select name="color">
    <option value="red">붉은색</option>
    <option value=black"">검은색</option>
    <option value="blue">파란색</option>
    </select>
    <input type="submit">
    </form>
    붉은색~검은색을 option태그 걸어서 각각 선택가능하도록 그리고 콤보박스를 만들기 위해 select로 묶어주기
    그리고 데이터를 전송하기 위해 submit버튼을 만들어주고 데이터를 전송할때는 이름이 반드시 필요하기 때문에 select태그에 이름을 만들어줌.
    우리눈에는 검은색 파란색이 보이지만 컴퓨터가 정보를 인식하도록 option에 value속성을 줌

    -<select name="color2" multiple> multiple속성을 주면 다중선택가능 이때 ctrl을 사용하여 다중선택하기때문에 잘 쓰이진 않음. 체크박스를 주요사용함

    - <input type="radio" 버튼이 한개 생김 이름을 동일시하게 주면 한개만 선택가능
    붉은색: <input type="radio" name="color">
    검은색: <input type="radio" name="color">
    파란색: <input type="radio" name="color">
    - 컴퓨터에 정보를 주기위해 value 속성을 사용
    붉은색: <input type="radio" name="color" value="red">
    검은색: <input type="radio" name="color" value="black">
    파란색: <input type="radio" name="color" value="blue">
    -다중버튼을 사용하기위해서는 checkbox를 사용
    -checked 속성을 넣으면 기본적으로 선택되어 있게 할 수 있음.

    요약 단일선택은 radio박스 다중선택은 checkbox로 사용
  2. 코딩에미치다
    2020.11.20 복습 완료
  3. 켄드릭
    2020.10.29(목) 09:56 1차 학습완료
  4. 10/24
  5. 1stclasscitizen
    2020.10.21
  6. hanjong
    완료!!!!
  7. 오석민
    완료
  8. wndals20
    20.09.17 이번 수업도 잘 들었습니다. 감사합니다!
  9. 여니여니
    20200909 완료
  10. switpotato
    20200817 완료_감사합니다!!
  11. 최희란
    20200812_완료!
  12. 김성곤
    20200713 감사합니다!
  13. 굴렁이
    radio : 동그란 선택창
    checkbox : 네모난 선택창 v표시
    다중선택시 checkbox가 더 나음
  14. 김예훈
    완료
  15. 한강
    좋은 아침입니다~!!!^^
    200520
  16. 열심히사는사람
    완료
  17. 노래하는프로그래머
    완료!
  18. Mongsil
    2020.03.31 완료 감사합니다 :)
  19. 김선경
    2020-03-22 완료
  20. 3.16.2020
  21. 최강최고
    20/3월13일 완료
  22. Charlie Kwon
    완료
  23. 2020.1.6 수업완료
  24. 2020.01.02
  25. gkgk
    </p>에 빨간색이 뜨는데 왜일까요...


    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <form class="" action="http://localhost/order.php" method="post">
    <p>
    <h1>색상 (단일선택)</h1>
    붉은색 : <input type="radio" name="color" value="red">
    검은색 : <input type="radio" name="color" value="black" checked>
    파란색 : <input type="radio" name="color" value="blue">
    </p>

    <p>
    <h1>사이즈 (다중선택)</h1>
    95 : <input type="checkbox" name="size" value="95">
    100 : <input type="checkbox" name="size" value="100" checked>
    105 : <input type="checkbox" name="size" value="105" checked>
    </p>
    <input type="submit">
    </form>
    </body>
    </html>
  26. Grigo
    완료
  27. FIRE
    20190803 완료
  28. 김세종
    2019-07-11 수강완료
  29. 김주엽
    공부완료
  30. kjy031104@gmail.com
    공부완료
  31. ella
    다중 선택 시 단 두개만 선택 가능하게 하려면 어떻게 하나요?
  32. steal
    20190124 완료
  33. 한승민
    160115 완료
  34. 릴라야
    20190112_완료
  35. 미완성
    20190107완료
  36. 김진욱
    완료!
  37. Gihoon Pomme Ryu
    완료. 고맙습니다.
  38. shcd
    clear!
  39. 김민영
    완료
  40. 신비
    감사합니다
  41. clear
  42. l
  43. 대략적으로 제가 이해한만큼~
    name은 말그대로 이름으로써
    구분자의 역할을 해주는것으로 보이고,
    value는 말그대로 값으로써
    그 값을 의미하는것같아요

    java로치면 name은 변수명 정도가 될것같고,
    value는 그 변수에 들어가는 값과 같은것이 아닐까싶네요
    대화보기
    • ㅅㅈㅎ
      감사합니다!!
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      감사합니다!
    • JN87
      171231 감사합니다!
    • 바실로마첸코
      html강의는 강의 하나당 10분 이내로 강의도 길지않고 내용도 어렵지 않아서 딱 좋은 것같네요 웹애플리케이션 만들기는 20분 30분짜리 강의가 연달아있어서 정말힘들었어요 ㅠㅠ
    • 푸른하늘
      6
    • Migyeong Kang
      감사합니다~
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기