일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- vscode
- 이탈리아
- js
- Maven
- windows
- table
- Eclipse
- html
- Java
- Button
- ArrayList
- json
- input
- Files
- string
- 자바스크립트
- IntelliJ
- Array
- CMD
- 테이블
- 이클립스
- list
- 자바
- 배열
- 문자열
- CSS
- date
- javascript
- Visual Studio Code
- 인텔리제이
- Today
- Total
어제 오늘 내일
[HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 본문
사용자로부터 선택 입력을 받을 수 있는 콤보박스(드롭다운 박스)를 만드는 방법을 알아보도록 하겠습니다.
기본 콤보박스 만들기
See the Pen select by anna (@hianna) on CodePen.
HTML에서 콤보박스를 만들기 위해서는 <select>, <option>을 사용합니다.
<select> 태그 안에 <option> 태그를 포함시키고, 선택할 값들을 <option> 태그 안에 지정해 줍니다.
기본값(default) 지정
See the Pen select by anna (@hianna) on CodePen.
기본값을 지정하지 않으면 가장 위에 있는 값이 기본으로 선택됩니다.
특정한 값 하나를 기본값(default)으로 지정하고 싶으면,
위와 같이 기본으로 지정하고 싶은 값의 <option> 태그에 'selected'라고 지정해주면,
해당 항목이 기본값으로 지정이 되고,
화면을 열었을 때 그 값이 자동으로 선택되게 됩니다.
콤보박스 비활성화
See the Pen select by anna (@hianna) on CodePen.
사용자가 콤보박스의 값을 수정하지 못하도록 콤보박스를 비활성화해야 할 때가 있습니다.
그럴 때는 <select> 태그에 'disabled'라고 써주면,
콤보박스가 비활성화 되고, 사용자가 콤보박스의 값을 변경할 수 없게 됩니다.
특정한 항목만 비활성화 하기 (특정 항목 선택 금지 시키기)
See the Pen select by anna (@hianna) on CodePen.
콤보박스에 나타나는 여러 항목 중, 특정한 항목을 선택할 수 없게 만들기 위해서는
해당 항목의 <option>에 'disabled'라고 써주면
해당 항목은 콤보박스 리스트에 보여지지만, 선택은 할 수 없게 됩니다.
특정한 항목만 목록에서 안보이도록 하기
See the Pen select by anna (@hianna) on CodePen.
특정한 항목을 콤보박스의 리스트에서 보여지지 않도록 해야 할 때는
<option>에 'hidden'이라고 지정해 줍니다.
그러면, 해당 항목은 콤보박스 목록에서 보여지지 않게 되고,
당연히 사용자는 그 항목을 선택할 수도 없게 됩니다.
여기까지 HTML에서 콤보박스를 만들고 활용하는 방법을 알아보았습니다.
다음 번에는 계속해서, 콤보박스의 크기를 늘리는 방법, 카테고리를 구분하는 방법 등을 알아보도록 하겠습니다.
'IT > HTML&CSS' 카테고리의 다른 글
[HTML] input type='file' 속성 알아보기 ( 파일 입력 ) (0) | 2020.06.08 |
---|---|
[HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정 (0) | 2019.07.30 |
[HTML] 툴팁(Tooltip) 만들기 (0) | 2019.07.28 |
[HTML] 사용자로부터 색깔 입력받기 (0) | 2019.07.25 |
[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 (3) | 2018.12.03 |