본문 바로가기

CODING/WEB

[HTML] 데이터 목록 & 다양한 form 요소들

by 밍톨맹톨 2020. 10. 17.

728x90

📌<optgroup></optgroup> 태그

- 여러 항목을 그룹으로 묶을 때 사용

- label 속성을 사용해 그룹 제목을 붙임

- [<select> ➡️ <optgroup> ➡️ <option>] 순으로 목록 만들면 됨

        <select id="class">
            <optgroup label = "공과대학">
                <option value="archi">건축공학과</option>
                <option value="mechanic">기계공학과</option>
                <option value="indust">산업공학과</option>
                <option value="elec">전기전자공학과</option>
                <option value="computer">컴퓨터공학과</option>
                <option value="chemical">화학공학과</option>
            </optgroup>
            <optgroup label="인문대학">
                <option value="history">사학과</option>
                <option value="lang">어문학과</option>
                <option value="philo">철학과</option>
            </optgroup>
        </select>

📌<datalist></datalist> 태그

- 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨

- 데이터 목록 id를 이용해 이름을 붙이고, <input> 태그 list 속성에 id 값을 넣어줌

        <input type="text" id="interest" list="choices">
        <datalist id="choices">
            <option value="grammer" label="문법"></option>
            <option value="voca" label="어휘"></option>
            <option value="speaking" label="회화"></option>
            <option value="listening" label="리스닝"></option>
            <option value="news" label="뉴스청취"></option>
        </datalist>

입력전

입력후

📌<textarea></textarea> 태그

- 텍스트 영역 - 여러줄의 텍스트 입력

ex) 게시판의 게시물 입력창

<textarea cols="50" rows="5">안녕하세요 뭐라고 써야할지 모르겠어요</textarea>

📌<button></button> 태그

- 다양한 형태의 버튼 삽입

- 화면 낭독기에서 버튼임을 정확히 전달할 수 있음

- css를 이용해 원하는 형태로 꾸밀 수 있음

        <form>
            <button type="submit" class="subm">
                <img src="images/미소의 세상.jpg" alt=""> 전송하기
            </button>
        </form>

<body> 안

        <style>
            .subm {
                display: block;
                background-color: azure;
                border: 1px solid #dedede;
                cursor: pointer;
                padding: 5px 10px 6px 7px;}
            .subm img{
                border:0; /* 테두리 없음*/ 
                padding:0; /* 패딩 없음 */ 
                width:16px; /* 가로 크기 */ 
                height:16px; /* 세로 크기 */
            }
            .subm:hover{
                background-color: chocolate ;
                border: 1px solid #dffd22;
                color: cornsilk;
            }
        </style>

<head> 안에서 스타일 지정

평소 상태

마우스를 올려놨을 때 css로 설정가능

[ 다양한 폼 요소들 ]

📌<output></output>태그

- 계산 결과를 브라우저에 표시

        <form oninput="result.value = parseInt(num1.value) * parseInt(num2.value)">
            <input type="number" name="num1" value="0"> 
            *<input type="number" name="num2" value="0"> 
            =<output name="result" for="num"></output>
        </form>

📌<progress></progress>태그

- 작업 진행 상태를 브라우저에 표시

- 값에 특별한 단위는 없고 표시하지 않음

[ 속성 ]

🔎 value - 현재 값 ➡️ 0~max값의 사이에 값이 있어야함

🔎 max - 최대 값

        <label>10초 남음</label>
        <progress value="50" max="60"> </progress>
        <label>진행률 30%</label>
        <progress value="30" max="100"></progress>

📌<meter></meter>태그

- 전체 크기 중에서 얼마나 차지하는지 표현할 때 사용

ex ) 하드 디스크 사용량, 유권자 투표율 등

[ 속성 ]

🔎 min, max - 최솟값, 최댓값

🔎 value - 현재 값

🔎 low, high - 이 값들을 넘어가면 적거나 많다는 걸 표시할 수 있는 값

🔎 optimum - 이정도면 적당하다고 할 정도의 범위 이 값이 high보다 크면 value값이 클수록 좋고 low보다 작으면 value값이 작을수록 좋다.

        <label>점유율 0.8 </label> 
        <meter value="0.8"></meter>
        <label>사용량 64%</label>
        <meter min="0" max="100" value="64"></meter>
        <label>트래픽 초과</label>
        <meter min="1024" max="10240" low="2048" high="8192" value="9213"></meter>
        <label>적절한 트래픽</label>
        <meter value="0.5" optimum="0.8" high="0.7"></meter>

저작자표시

'CODING > WEB' 카테고리의 다른 글

[CSS] 그라데이션 효과 (0)	2020.11.09
[CSS] 글꼴 & 텍스트 스타일 (0)	2020.10.27
[HTML] < input > 태그의 속성 & type의 속성값 (0)	2020.10.10
[HTML] 링크 만들기 & 폼 만들기 (0)	2020.10.01
[HTML] 표 만드는 태그& 이미지 (0)	2020.09.24

댓글

티스토리툴바