Coding

선택

토픽 Coding > 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. kdb5869
    select 태그 - 콤보박스를 생성
    - multiple 속성: 다중 선택
    option 태그 - 옵션 메뉴를 제공하는 드롭다운 리스트
    - value 속성: 서버에 전송할 값

    input type
    - radio: 단일 선택
    - checkbox: 다중 선택


    24.04.23
  2. 마우스오른쪽버튼
    완료
  3. 굿모닝
    감사합니다.
  4. 미래도비
    1.4
  5. JiHyun
    23. 12. 16 수강 완
  6. hyper text
    dropdown list
  7. DreamBoy
    2023.09.07. HTML - 입력양식 - form - 선택 파트 완료했습니다.
  8. HTML로 개발하는거 좋아해요
    12-12 학습완료!
  9. AgainstartJH
    2022년 11월 12일 토요일 학습완료!
  10. yuyu
    220922
  11. vigorously27
    2022년 7월 13일 수요일 학습완료!
  12. 이슬유치원
    22.6.20 선택만 보면됨.
  13. eunbee
    22-05-06
  14. G.I.R.O
    22.04.12 완료
  15. INJE
    22/03/06
  16. 우주소년AtOm
    완료
  17. pmxsg
    2021.12.30. 2번째 수강
  18. jjy_lee2468
    21.12.29 수강완료
  19. syh712
    2021-12-21
    <form action="http://localhost/food.php">
    <h1> 무슨 음식을 먹고 싶으세요? (다중선택)
    <select name= "food2" multiple>
    <option value="Japanese food" >일본음식</option>
    <option value="Russian food">러시아음식</option>
    <option valuse="Chinese food">중국음식</option>
    <option value="Korean food">한국음식</option>
    </select>
    <input type="submit">
    </form>
  20. 코딩혁명
    2021.11.13.수강완료.감사합니다.
  21. 드림보이
    2021.11.04. 선택 파트 수강완료
  22. 황금아가리
    211002
  23. 김큼이
    20210915완료
  24. overmatch
    20210821 완료
  25. 란찬
    =)
  26. 두드
    2021.07.20 완료
  27. 2021.07.17 완
  28. 오뉴오뉴
    2021.7.7
  29. 감자먹는넘
    감자
  30. barozaqu
    20210513.
  31. GelandeWagen
    210511 ok
  32. 무탕
    2021. 4. 26 완료 갑자기 난이도가 확 올라간 느낌이네요..
  33. 짜rr
    감사히 잘봣습니다
  34. yogg
    다중선택은 뭔지 모르겠네요 ~
  35. loveahav
    완료!
  36. Minint
    2021.02.04
  37. 이현수
    2021.02.03(수)
  38. 임태경
    완료했어요 감사해요
  39. 엘리심
    1/25 완료 감사합니다 :)
  40. 스마일가이
    2021.01.24.완료 감사합니다
  41. 아루미
    1 22 완 감사합니당
  42. 201209
  43. 김지원
    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로 사용
  44. 코딩에미치다
    2020.11.20 복습 완료
  45. 켄드릭
    2020.10.29(목) 09:56 1차 학습완료
  46. 10/24
  47. 1stclasscitizen
    2020.10.21
  48. 오석민
    완료
  49. wndals20
    20.09.17 이번 수업도 잘 들었습니다. 감사합니다!
  50. 여니여니
    20200909 완료