HTML - Select , Textarea TAG

MJ·2022년 7월 5일
0

HTML 

목록 보기
25/27
post-thumbnail

1. Select TAG

  • 다양한 선택지를 선택할 수 있는 드롭박스를 생성하는 태그

  • Input 태그와 같이 사용자로부터 값을 입력받는 대화형 필드 입니다.

  • Option 태그를 사용하여 선택지를 제공할 수 있습니다.

 <select> 
   <!-- option 태그는 선택지를 제공합니다 -->
	<option> html </option>
	<option> css </option>
	<option> java </option>
</select>

option 태그를 사용하지 않으면, 드롭박스에 문구가 적용되지 않습니다


1.1 Multiple 속성

사용자가 두 개 이상의 선택지를 복수로 선택할 수 있는 옵션을 제공하는 속성

Windows OS 에서는 CTRL SHIFT 키를 사용하여 여러 옵션을 선택할 수 있으며,
MAC OS 에서는 COMMAND 키를 사용해 여러 옵션을 선택할 수 있습니다.

   <select multiple> 
            <!-- option 태그는 선택지를 제공합니다 -->
             <option> html </option>
             <option> css </option>
             <option> java </option>
    </select> <br>


1.2 value 속성을 사용

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 속성을 사용하면 됩니다.



2. Textarea TAG

  • 여러 줄의 요소를 입력할 수 있는 대화형 필드
    Input 태그는 한 줄만 입력할 수 있습니다.

  • 우측 하단의 빗금을 이용해서 입력 필드의 크기를 수정할 수 있습니다.

<textarea id="id" placeholder="여러줄을 입력 해보세요"></textarea>


입력필드의 크기보다 많은 양의 문자를 입력하면 자동으로 줄 바꿈이 되고, 빗금을 통해서
입력필드의 크기도 자유롭게 수정할 수 있습니다.


2.1 열, 행의 크기 조정하기

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 요소와는 다르게 닫는태그가 필요 합니다.

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글