select,option
보통 쇼핑몰에서 물건의 옵션을 선택할때 주로 사용하는 태그로 사용자가
여러 데이터중에서 하나를 선택하거나 다중선택하게 할때 사용한다.
select태그는 option태그를 활용하여 옵션을 나열할 수 있고
형식은 기본값 1개만 선택이 가능하지만 multiple속성을 함께 쓰면 다중선택하게 만들 수 있다.
다중 선택할때는 ctrl키를 누른 상태에서 다중 선택한다.
selected속성을 사용하면 사용자에게 맨처음 보여줄 데이터를 지정할 수 있다.
disabled를 사용하면 option중 선택이 불가한 항목을 지정할 수 있다.[기본형]
<select>
<option>데이터1</option>
<option>데이터2</option>
<option>데이터3</option>
</select>[속성]
- multiple
: 데이터를 다중선택하게 만들때 사용한다.
select태그안에 속성으로 선언한다.
- selected
: 사용자의 편의를 위해 옵션을 미리 선택하여 보여준다.
option태그에 속성으로 선언하여 사용한다.textarea
장문의 글을 입력할때 사용하는 입력칸. 이메일양식에서 메일 내용을
적거나 블로그 포스트처럼 긴 글을 작성할때 텍스트에디터에 들어있는 태그이다.
<textarea>태그를 쓸때는 태그 사이에 아무런 내용도 넣지 않아야 한다.
만약 공백이나 글자가 들어가면 pre태그처럼 그대로 보여준다.
글자수를 제한하고 싶다면 minlength,maxlength속성을 이용할 수 있다.
여기에 적힌 숫자만큼만 글자를 입력할 수 있다.
length는 '총 개수'를 뜻한다.[속성]
- cols
: 영문 소문자를 기준으로 텍스트 영역의 넓이를 지정한다.
여기에 쓰여진 숫자만큼 영역의 넓이가 결정됨.
- rows
: 줄을 기준으로 텍스트 영역의 높이를 지정한다. 지정한
줄보다 글자가 많아지면 스크롤바가 생긴다.
- wrap
: 폼 데이터가 서버로 제출될때 입력된 텍스트의 줄바꿈 방식을 지정한다.button ★
기본 기능은 <input type='submit'>과 동일하다.
버튼 태그를 이용하면 다양한 기능을 만들 수 있다.
예를들면 버튼을 클릭했을때 화면에서 창이 뜬다던가
어떤 '기능'을 해야 할 경우 해당 태그를 사용한다.
button태그는 뒤에 닫는 태그가 있어 내용자리에 이미지나 텍스트
이모지등을 넣을 수 있어 더 예쁘게 디자인된 버튼을 만들 수 있다.
button태그도 type속성에 의해 기능이 결정된다.[기본형]
<button type='기능'>버튼이름</button>
<input type='image' src='경로' />
제출버튼대신 사용할 이미지를 지정할 수 있다.
src로 이미지를 불러오면 해당 이미지가 제출 버튼의 기능을 한다.[속성]
- submit
: 기본기능으로, 폼요소를 서버에 제출한다.
- reset
: 초기화 버튼
- button
: 아무런 기능이 없는 버튼.(=깡통버튼)
자바스크립트로어떤 기능을 연동할때 사용한다.
Hi