코드 여행 일기

주요 태그 3 <입력 양식 2> 본문

HTML

주요 태그 3 <입력 양식 2>

할짝개발자 2023. 7. 24. 04:49
728x90
반응형

 

 

결과선택

<select>

 

<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>

 

<select> 선택 상자 생성

<option> 선택 상자 옵션 집어 넣기

<option value="black"> 전송되는 이름을 black 으로 보냄

<select multiple> (ctrl + 클릭) 으로 다중선택 가능

2가지 다중 선택 됨

 

결과

 

 

 

type = “radio” & type = “checkbox”

 

<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>

type="radio" 단일 선택만 가능

검은색 : <input type="radio" name="color" value="black" checked>

checked 처음부터 선택 되어 나옴

type="checkbox" 다중 선택 가능

 

위 글은 생활코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'HTML' 카테고리의 다른 글

주요 태그 3 <입력 양식 4>  (0) 2023.07.24
주요 태그 3 <입력 양식 3>  (0) 2023.07.24
주요 태그 3 <입력 양식 1>  (0) 2023.07.15
주요 태그 2 <표>  (0) 2023.07.13
주요 태그 1 <p> <br> <img>  (1) 2023.07.12
'HTML' Related Articles more