FlowerBombs

입력양식 태그 (2) 드롭다운 / 파일첨부하기 /데이터 전송하기 본문

HTML&CSS/HTML5

입력양식 태그 (2) 드롭다운 / 파일첨부하기 /데이터 전송하기

CitronLemon 2019. 3. 15. 16:07

드롭다운


기본형식


1
2
3
4
5
<label for="id값 연결">...내용... </label>
<select name="웹 프로그램 식별값" id="고유 식별값" [multiple]>
    <option [value="선택시 값"] [selected]>화면 표시 내용</option>
    ...option태그 반복 사용...
</select>
cs



<예시>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
    <form>
        <fieldset>
            <legend>이동통신사 선택하기</legend>
            <div>
                <!-- 드롭다운(싱글타입) -->
                <label for="telecom">이동통신사 선택</label>
                <select name="telecom" id="telecom">
                    <option value="SKT">SKTelecome</option>
                    <option value="KT">KT</option>
                    <option value="U+">LG U+</option>
                </select>
            </div>
        </fieldset>
        
        <br />
 
        <fieldset>
            <legend>스마트폰 운영체제 선택하기</legend>
            <div>
                <!-- 드롭다운(멀티타입-복수선택가능) -->
                <label for="smartphone">스마트폰 운영체제</label>
                <select name="smartphone" id="smartphone" multiple>
                    <option value="android">안드로이드</option>
                    <option value="iOS">iOS</option>
                    <option value="window">Window</option>
                </select>            
            </div>
        </fieldset>
    </form>
</body>
cs



<결과>





파일 첨부하기

1
2
3
4
5
<body>
    <form enctype="multipart/form-data">
        <input name="이름(영어)" id="식별자(영어)" type="file" />
    </form>
</body>
cs



<예시>

1
2
3
4
5
6
7
8
9
10
11
<body>
    <form enctype="multipart/form-data">
        <fieldset>
            <legend>파일첨부</legend>
            <div>
                <label for="photo">사진선택</label>
                <input type="file" name="photo" id="photo" />
            </div>
        </fieldset>
    </form>
</body>
cs




<결과>




데이터 전송하기




저작자표시 비영리 변경금지

'HTML&CSS > HTML5' 카테고리의 다른 글

입력양식 태그 (1)  (0) 2019.03.15
기본 입력 양식  (0) 2019.03.13
멀티미디어 (이미지/  (0) 2019.03.13
페이지 이동처리 (링크)  (0) 2019.03.08
문장이나 단어 강조하기  (0) 2019.03.08
'HTML&CSS/HTML5' Related Articles more
Comments