다양한 선택지를 선택할 수 있는 드롭박스를 생성하는 태그
Input
태그와 같이 사용자로부터 값을 입력받는 대화형 필드 입니다.
Option
태그를 사용하여 선택지를 제공할 수 있습니다.
<select>
<!-- option 태그는 선택지를 제공합니다 -->
<option> html </option>
<option> css </option>
<option> java </option>
</select>
⭐
option
태그를 사용하지 않으면, 드롭박스에 문구가 적용되지 않습니다
사용자가 두 개 이상의 선택지를 복수로 선택할 수 있는 옵션을 제공하는 속성
Windows OS
에서는 CTRL
SHIFT
키를 사용하여 여러 옵션을 선택할 수 있으며,
MAC OS
에서는 COMMAND
키를 사용해 여러 옵션을 선택할 수 있습니다.
<select multiple>
<!-- option 태그는 선택지를 제공합니다 -->
<option> html </option>
<option> css </option>
<option> java </option>
</select> <br>
value
속성을 사용하지 않고 서버에 제출하면, 사용자가 어떤 요소를 선택 했는 지
알 수 없습니다. 서버에 실제 데이터를 전송하기 위해 속성을 사용 해봅시다.
<h3> Dinner Cooking Select </h3>
<form action="/root">
<label for="dinner">Cooking Choice :</label>
<select id="dinner" name="dinner">
<!-- optin 요소에는 따로 name 속성을 지정해주지 않아도 됩니다 -->
<option value=""> -Please Choice- </option> <-- 보여주기(더미) 옵션 -->
<option value="pasta">Pasta</option>
<option value="meat">Meat</option>
<option value="salad">salad</option>
</select>
<button> submit </button>
</form>
⭐ 옵션중에 요소 하나를 미리 선택되게 만드려면,
selected
속성을 사용하면 됩니다.
여러 줄의 요소를 입력할 수 있는 대화형 필드
Input
태그는 한 줄만 입력할 수 있습니다.
우측 하단의 빗금을 이용해서 입력 필드의 크기를 수정할 수 있습니다.
<textarea id="id" placeholder="여러줄을 입력 해보세요"></textarea>
입력필드의 크기보다 많은 양의 문자를 입력하면 자동으로 줄 바꿈이 되고, 빗금을 통해서
입력필드의 크기도 자유롭게 수정할 수 있습니다.
rows
, cols
속성을 사용해서 텍스트창의 행과 열의 크기를 조정할 수 있습니다.
<h3> Typing Text ! </h3>
<form action="/root">
<label for="text"> Anything Typing </label>
<br>
<textarea name="basic_request" id="text" cols="40" rows="10" placeholder="typing..."></textarea>
<button> submit </button>
</form>
placeholder
속성을 사용해서 기본 안내문구도 넣을 수 있습니다.
사용할 때 유의해야 할 점은, input
요소와는 다르게 닫는태그가 필요 합니다.