[ HTML ] select, option, textarea, datalist... 다양한 폼 요소

< 목차 >

select & option	여러 개의 옵션 중 하나 또는 여러 개 선택 가능
multiple 속성	select 태그에서 다중 선택을 가능하게 함
textarea	여러 줄의 텍스트 입력을 받을 때 사용
fieldset & legend	관련된 입력 요소를 그룹화하고 그룹명을 설정
datalist	사용자가 입력을 하면서 선택할 수 있도록 제안 목록 제공
input + datalist	입력과 자동완성 기능을 동시에 제공

 

<select> 태그와 <option> 태그

• 여러 개의 옵션 중에서 하나 또는 여러 개를 선택할 수 있도록 하는 태그
• 기본적으로 하나만 선택 가능하지만, multiple 속성을 사용하면 다중 선택이 가능함
• 다중 선택(multiple)은 Ctrl(Windows) 또는 Command(Mac) 키를 눌러야 선택할 수 있어 사용자 경험(UX)이 좋지 않아 실제로는 거의 사용되지 않음

     - 장점 -

• 옵션이 많을 때 유용함 (ex. 국가 선택)
• 라디오 버튼이나 체크박스보다 공간을 적게 차지함

     - 단점 -

• 옵션 개수가 적을 때는 라디오 버튼이나 체크박스가 더 직관적임

<label for="region">살고 있는 지역은?</label>
<select id="region">
    <option value="02">서울</option>
    <option value="051">부산</option>
    <option value="064">제주</option>
</select>

 

select 태그

<label for="">살고 있는 지역은?</label>
<select id="multi-region" multiple>
    <option value="02">서울</option>
    <option value="051">부산</option>
    <option value="064">제주</option>
</select>

select-multiple 태그

<textarea> 태그

• 여러 줄의 텍스트를 입력할 수 있는 입력 필드
• cols(열)와 rows(행)를 설정할 수 있지만, 이는 화면에서 보이는 크기일 뿐 입력 가능한 텍스트의 제한은 아님
• style="width: 100%;"을 사용하여 가변적인 너비를 줄 수 있음

<div>
    <textarea name="" id="" style="width: 100%;" rows="10"></textarea>
</div>

textarea 태그

<fieldset> & <legend> 태그

• 관련된 입력 필드를 그룹화할 때 사용됨
• fieldset은 여러 개의 입력 요소를 묶어주는 역할
• legend는 그룹을 대표하는 제목 역할을 함

<fieldset>
        <legend>개인정보</legend>
        <div>
            <label for="name">이름</label>
            <input type="text" name="" id="name">
        </div>
        <div>
            <label for="tel">전화번호</label>
            <input type="tel" name="" id="tel">
        </div>
</fieldset>

fieldset & legend 태그

<datalist> 태그

• <select>와 유사하지만, 사용자가 직접 입력도 가능한 태그
• 문자를 입력받을 수 있는 인풋 박스인데 <select>의 기능이 같이 복합적으로 들어가 있음
• <input>과 함께 사용되며, 입력 시 관련 옵션이 자동 완성 형태로 나타남

    - 장점 -

• 입력을 도우면서도 직접 입력할 수도 있음
• 대량의 옵션 중 원하는 값을 빠르게 찾을 수 있음
• 하나의 <datalist>를 여러 <input>에서 재사용할 수 있음
• 한 화면에 여러군데 옵션 정보를 줘야할때 유용

  - 단점 -

• 사용자가 실수로 다른 문자를 입력하거나 원래있던 문자를 지울 수 있음
• 데이터 저장 시 JavaScript로 검증이 필요함

<div>
    <input list="browsers" id="browsers1">
    <datalist id="browsers">
        <option value="safari">safari</option>
        <option value="chrome">chrome</option>
        <option value="firefox">firefox</option>
        <option value="explorer">explorer</option>
    </datalist>
</div>

datalist 태그