Tag - form 관련 3

프론트엔드/HTML

Tag - form 관련 3

ksge7 2020. 8. 20. 03:47

옵션 선택하기

기존 폼 요소들은 <input>을 이용해 한 줄짜리 폼만 이용했다.

그러나 <option> 태그를 사용하면 다양한 항목 중에 옵션을 선택하는 폼 요소를 생성할 수 있다.

<select>,<option>, <optgroup>

<select> 태그 안에서 <option> 태그를 쓰면 다양한 요소를 선택할 수 있는 옵션을 사용할 수 있다.

그리고 <option>은 <optgroup>로 묶어서 그룹을 만들어줄 수 있다.

<body>
    <fieldset>
        <legend> 학과 선택 </legend>
        <select id="class">
            <optgroup label="공과대학">
                <option value="ac">건축공학과</option>
                <option value="ma">기계공학과</option>
                <option value="pc">컴퓨터공학과</option>
            </optgroup>
            <optgroup label="문과대학">
                <option value="his">사학과</option>
                <option value="lang">어문학부</option>
                <option value="ph">철학</option>
            </optgroup>
        </select>
    </fieldset>
 </body>

<datalist>

<select> 이외에도 옵션으로 선택 가능한 태그가 있다.

<datalist> 태그를 이용하면 <input> 태그의 텍스트가 들어갈 항목에 옵션으로 대신 넣을 수 있는 텍스트를 지정할 수 있다.

<body>
    <fieldset>
        <legend> 학과 선택 </legend>
        <input type="text" id="school" list="class">
        <datalist id="class">
                <option value="ac">건축공학과</option>
                <option value="ma">기계공학과</option>
                <option value="pc">컴퓨터공학과</option>
                <option value="his">사학과</option>
                <option value="lang">어문학부</option>
                <option value="ph">철학</option>
        </datalist>
    </fieldset>
</body>

<textarea>

<textarea> 태그를 이용하면 여러 줄 입력하는 텍스트 영역을 만들 수 있다.

<textarea> 태그 내에 cols와 row를 이용해서 텍스트 영역의 가로 너비와 세로 줄 단위를 지정할 수 있다.

<body>
    <fieldset>
        <legend> 자기 소개 </legend>
        <textarea name="intro" cols="60" row="5">
    </fieldset>
</body>