들어가기 전에
이전 강의에 이어 폼 요소의 종류인 <select>, <textarea>, <button>에 대해 알아보도록 하겠습니다.
핵심키워드
- select
- textarea
- button
학습하기
12) 폼 요소 3
<select>
<select>는 선택 목록 상자 또는 콤보박스라고도 합니다.
몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다. (multiple 속성을 사용하면 다중 선택도 가능합니다.)
<select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
...
</select>
<select>내부의 <option>으로 각 항목을 나타냅니다.
<option>의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다.
<textarea>
한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용합니다.
<textarea rows="5" cols="30">
...
</textarea>
<textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있습니다.
- cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않습니다.)
- rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)
<button>
버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있습니다.
<button type="submit|reset|button">ㅇㅇㅇ</button>각 버튼은 이전에 배웠던 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼입니다.
다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능합니다.
참고링크
- HTML elements reference
https://developer.mozilla.org
- This page lists all the HTML elements, which are created using tags.
comment
완료
감사합니다.
1.5
<!DOCTYPE html>
<html>
<head>
<title>폼 요소3</title>
</head>
<body>
<select>
<!-- 선택 목록 상자 또는 콤보박스라고도 한다.
몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를
선택할 수 있게 하는 태그이다.(multiple 속성을 사용하면 다중 선택도 가능) -->
<option>서울</option>
<option>경기</option>
<option>강원</option>
...
</select>
<textarea rows="5" cols="30">
<!-- <textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있다.
cols : 가로 크기를 조절하는 속성
rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수) -->
...
</textarea>
<button type="submit|reset|button">ㅇㅇㅇ</button>
</body>
</html>
--- Form 닫는 태그
<select> 선택 목록 상자/콤보 박스
아래로 펼쳐지면서 선택할수 있는 항목 (두 개 이상의 옵션을 동시에 선택 - <select multiple>
multiple속성, CTRL이나 SHIFT키를 사용하여 여러 옵션 선택 가능)
부모태그 <select>
자식태그 <option>항목
selected : 미리 선택되어 나타나게될 옵션 (checked와 같은 기능)
---
<textarea> 여러 줄의 텍스트 입력 상자
cols 한 줄에 들어가는 글자의 수
rows 화면에 보여지는 줄 수
---
<button>
type : submit, reset, button 3가지
<form>
<button type="submit, reset, button">
<span>
</span>
</button>
</form>
<button>에 <span>과 같은 자식태그를 추가할 수 있음.
button의 장점 : 자유로운 스타일 가능, 이미지 검색엔진 최적화
*** <button> 태그의 기본 타입이 "submit"이므로 <button type="button">버튼</button>으로 명시
*** <input tpye="submit, reset, button"> 스타일 제약
2023.01.12
자기소개: <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요"></.textarea><br>
<select>
<option>서울</option>
<option>경기</option>
<option selectied>강원 </option>
</select>
select : 선택목록상자
option : select tag 내부의 선택지
selected : 첫 화면에 선택되어 노출됨, checked와 같은 기능
<textarea rows="5" cols=:30">
</textarea>
textarea : 여러 줄 텍스트 입력
rows : 세로크기 조절
cols : 가로크기 조절
<button type="submit|reset|button">ㅇㅇㅇ</button>
button : 내용 없는 빈 버튼
submit : 제출(전송)
reset : 초기화
select : 선택 목록상자(콤보박스)
option : select tag의 자식 tag
selected : checked와 같은 기능
textarea : 여러 줄 텍스트 입력 상자
cols : 가로 글자 수
rows : 세로 문장 수
button : 버튼을 만들 때 사용. submit, reset, button 3가지 타입이 있음.
*button태그는 input태그와 등록,취소,버튼 기능은 동일하나 좀더 자유로운 활용가능
셀렉트 요소(Select)
= 선택 목록 상자, 콤보 박스
<form>
<h1>과일 선택</h1>
<select>
<option>배</option>
<option>오렌지</option>
<option selected>사과</option>
<option>토마토</option>
</select>
</form>
<select> 태그 내 <option>으로 리스트화
selected 속성으로 기본값 설정 가능
텍스트영역 요소(Textarea)
<form>
<textarea cols="50" rows="10" placeholder="원하시는 메시지를 입력해주세요."></textarea>
</form>
사용자로부터 여러 줄의 텍스트 값을 입력받을 때 사용
화면에 보이는 텍스트 박스 사이즈 조절 : cols로 가로 길이, rows로 세로 길이 조절 가능(영문 기준)
버튼 요소(Button)
<form>
<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">회원가입</button>
</form>
type : submit, reset, button 3가지로 구성
input 과는 달리 빈 태그가 아니기 때문에 좀 더 자유로운 스타일 적용 가능
*button태그는 input태그와 등록,취소,버튼 기능은 동일하나 좀더 자유로운 활용가능
4/27
textarea 태그를 사용하는 경우 입력창과 옆 글씨의 높이는 어떻게 맞출 수 있나요?
12/21 완료
11-02일 ! 열심히 하자 응수야
21.7.8.
0708
21.07.01
21.04.12