-
Tag - form 관련 3프론트엔드/HTML 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>'프론트엔드 > HTML' 카테고리의 다른 글
Tag - form 관련 2 (0) 2020.08.20 Tag - form 관련 (0) 2020.08.20 Tag - 링크 관련 (0) 2020.08.19 Tag - 이미지(image) 관련 (0) 2020.08.19 Tag - 테이블(table) 관련 4 (0) 2020.08.19