일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 날짜지정팝업
- html기초
- 오버라이딩
- 2020정보처리기사실기요약
- crud게시판
- 프로그래머스 MYSQL
- 스프링게시판만들기
- 오라클설치
- 스프링 CRUD게시판
- spring crud
- 스프링 crud
- js datepicker
- 프로그래머스 쿼리문
- Oracle기초
- jsp 날짜팝업
- 2020정보처리기사실기정리
- 정처기실기정리
- 2020정보처리기사실기
- jsp 팝업띄우기
- 자바배열예제
- PLSQL
- 프로그래머스 SQL
- 자바기초
- jsp게시판만들기
- CRUD게시판만들기
- 정보처리기사실기정리
- 자바 정규표현식 예제
- spring crud게시판
- 게시판만들기
- 자바연산자
Archives
- Today
- Total
영보의 SystemOut.log
[HTML] <select > <option> 셀렉트 박스 넣기 본문
반응형
# <select> 태그
- html/css 코드에서 사용되는 쉽고 간단한 다중 값 입력 폼
- 화살표를 통해서 선택이 가능
# 예제
1
2
3
4
5
|
<select name="웹 스터디">
<option value="React">React</option>
<option value="JPA">JPA</option>
<option selected="selected" value="웹 스터디">웹 스터디</option>
</select>
|
cs |
→ 웹 스터디를 기본 값으로 설정 하였다.
→ 예제코드 위 참조.
# 실전 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class="section-top-border">
<h3 class="mb-30">채용공고</h3>
<div class="list_option" style="text-align: right;">
<form method="post" style="display: inline;">
<select class="selectpicker" onchange="window.open(value,'_self');"
style="display: inline; width: 50px; height:10px; font-size:10px;">
<option>태그 선택</option>
<option value="listByTag.do?tag=서울">서울</option>
<option value="listByTag.do?tag=경기">경기</option>
<option value="listByTag.do?tag=인천">인천</option>
<option value="listByTag.do?tag=부산">부산</option>
<option value="listByTag.do?tag=대구">대구</option>
<option value="listByTag.do?tag=광주">광주</option>
<option value="listByTag.do?tag=대전">대전</option>
<option value="listByTag.do?tag=강원">강원</option>
<option value="listByTag.do?tag=제주">제주</option>
<option value="listByTag.do?tag=전국">전국</option>
</select>
</form>
</div>
</div>
|
cs |
- 실제제 웹 프로젝트르 하면서 셀렉트 박스가 있는 코드를 가지고 와 보았다.
비루하지만 출력 화면
반응형
'Web > HTML CSS' 카테고리의 다른 글
[HTML] href 태그 새창에서 열기 (0) | 2021.08.10 |
---|---|
[HTML/CSS] CSS기초 익히기 (0) | 2020.09.19 |
[HTML] HTML의 기본 태그들 / HTML 기초 (2) | 2020.08.18 |
[HTML] HTML이란 / HTML 기본구조 (0) | 2020.08.14 |