textarea 태그
<body> <label for="name">포켓몬 이름</label><br> <textarea name="username" id="name" cols="30" rows="10"></textarea> </body>label은 이전 포스트 처럼 이름을 붙이기 위해 사용되었고 for를 통해 textarea의 id와 맞춰주어 연결하였다.
아래의 사진들은 각각 cols = 30 rows = 10 / cols = 50 rows = 10 / cols = 50 rows = 20을 통해 차이점을 비교해 보았다.사용예시
select
select를 이용해서 어떠한 값들을 선택할 수 있게 만들 수 있다.
그 중 option 태그를 이용해서 드랍다운 방식으로 한 선택지를 만들 수 있다.
예시를 보자<body> <label for="name">스타팅 포켓몬 이름</label><br> <select name="username" id="name"> <option value="치코리타" selected>치코리타</option> <!--기본값 치코리타가 선택되게 설정--> <option value="브케인">브케인</option> <option value="리아코">리아코</option> </select> </body>실행결과
해당 코드에서는 selected옵션을 한 option태그에 부여해서 아무것도 선택 안한 상태여도 기본값으로 선택되어있게 해보았다.
optgroup
이전 select과 조금 비슷하지만 이번에는 option들을 그룹화해서 보여준다.
예시를 보고 이해해보자<body> <label for="name">스타팅 포켓몬 이름</label><br> <select name="username" id="name"> <optgroup label="불타입"> <option value="fire1">브케인</option> <option value="fire2">파이리</option> </optgroup> <optgroup label="풀타입"> <option value="grass1">치코리타</option> <option value="grass2">이상해씨</option> </optgroup> <optgroup label="물타입"> <option value="aqua1">리아코</option> <option value="aqua2">꼬부기</option> </optgroup> </select> </body>실행결과
optgroup로 설정된 불타입 풀타입 물타입은 선택이 불가능하고 각각의 optgroup들의 옵션들을 보여준다. 물론 선택은 전체에서 하나지만 옵션의 그룹에 대한 간략하게 설명이나 이름을 붙여주는 용도로 쓸 수 있을 듯하다. 또 다른 예를들자면 한식 중식 양식..?
datalist
input타입에 따라 입력을 받을 수 있지만 datalist를 사용하여 연결하면 추천하는 목록을 보여줄 수 있다. 예시를 보자<body> <label for="name">트레이너 이름</label><br><br> <input type="text" id="name" list = "trainname"> <datalist id="trainname"> <option value="jiwoo">지우</option> <option value="chiko">치코</option> <option value="kochi">코치</option> </datalist> </body>실행결과
위의 input태그는 text타입으로 입력받게 설정되었다 하지만 datalist의 id와 input의 list를 똑같이 설정해주면 연결되어 아무것도 입력되지 않은 상태에서 클릭해보면 사진처럼 추천 리스트를 보여주고 클릭 시 해당 input태그에 입력된다.
option 속성 multiple
multiple : select 태그에서 사용되며, 다중 선택을 가능하게하고 해당 속성사용 시 드랍다운 대신 상자로 표시한다.<body> <label for="name">스타팅 포켓몬 이름</label><br> <select name="username" id="name" multiple> <option value="fire1">브케인</option> <option value="grass1">치코리타</option> <option value="aqua1">리아코</option> </select> </body>실행결과
