1. 그룹을 만들어주는 태그; label
label태그는 그룹을 지어주기위한 태그로 label의 for 속성과 하위태그의 id를 맞춰주어 그룹에 포함시킬 수 있다. 그룹에 포함되면 마크업이 가능하게 되고, 특히 읽어주는 기능등에서는 끊기지 않고 의미상 연결이 가능하게 된다.
아래는 label이 하위태그를 두지 않았으나, 하나의 그룹으로 취급하고 싶을때 for와 id를 마춰준 경우이다.
<label for="address">나머지 주소: </label>
<input type="text" id="add" name="address">만약 포함하고자하는 태그를 label 태그 내에 속하도록 한다면, for과 id를 맞춰주지 않아도 된다. 아래는 기본 label태그가 하위 3개의 optgroup을 가지고 있는 모양으로 모두 label태그 내에있어 하나의 그룹을 볼 수 있다.
<label>지역구:
<select name="city">
<optgroup label="서울시">
<option>양천구</option>
<option>동작구</option>
<option>강남구</option>
</optgroup>
<optgroup label="부산시">
<option>해운대구</option>
<option>동래구</option>
<option>부산진구</option>
<option>동래구</option>
</optgroup>
<optgroup label="제주도">
<option>제주시</option>
<option>서귀포시</option>
</optgroup>
</select>
</label>각각 활용용도에 따라 사용하면된다.
- 그룹을 만드는 방법에는 name속성을 사용하는 것도 있는데, 그룹하길 원하는 태그에 같은 name속성값을 주면됨
2. 선택창을 만들어주는 태그; select
select태그는 하위 태그를 통해 선택창을 제공하는데, 아래 두가지 하위태그를 사용할 수 있다.
2-1. 옵션 값을 주는 태그; option
option 태그의 경우 구분없이 선택지를 제공하는 태그이며,
옵션태그의 속성값으로 selected="selected" 주게되면, 해당 값이 기본값으로 초기설정 되게 된다.
2-2. 선택의 그룹을 만들어주는 태그; optgroup
다음과 같이 optgroup을 이용하면, option태그를 특성별로 묶어 출력함으로써 사용자의 선택을 돕는다.
<optgroup label="서울시">
<option>양천구</option>
<option>동작구</option>
<option>강남구</option>
</optgroup>3. 데이터 전송 태그; form
form은 사용자가 웹사이트로 정보를 보내는 요소를 의미한다.
form은 다음과 같이 사용된다.
<form action="" method="post" enctype="multipart/form-data">속성
- action : 태그안의 내용을 처리해줄 서버상의 프로그램지정
- method : 사용자가 입력한 내용을 서버에 넘겨주는 방식 >> get,post
- enctype : enctype는 post로 method를 결정한경우 지정해야한다.
여기서 method는 사용자의 입력내용을 서버에 넘겨주는 방식을 지정하는 것인데, 그 방법은 2가지가있다.
전송은 그 방법에따라 정보의 노출차이가 있다.
get의 경우 입력정보를 주소표시줄에 모두 나타내고, post는 나타내지않는다.
1) get 방식
get방식은 사용자가 입력한 정보를 주소값에 노출시킨다.
그러므로 개인정보를 사용하는데에는 적합하지 않다. get은 넘겨주는 데이터의 용량 제한이 있다.(256바이트~4096바이트)
어떠한 방식을 지정하지 않는다면, default값은 get이다.
2) post 방식
반면 post방식은 입력한 정보를 노출시키지 않아 주로사용된다.
더불어 데이터 용량 제한이 없어 이미지나 동영상을 전송할때 적합하다.
4. 사용자값을 입력받는 태그; input
사용자가 값을 입력하는 경우 input태그를 사용하면되는데, 그 방식에따라 속성이다르다.
type 속성
- submit : 제출하기 > 입력을 완료하고 제출하는 버튼(다른 문서로 넘어가겠지?)
- reset : 제거하기 > 입력된 모든 글을 리셋하는 버튼
- button : 기능이 없는 버튼 > 형태만 버튼 (js에서사용)
- image : 이미지를 입힌 버튼
- radio : 동그라미 박스 > value를 입력하지 않으면, on이라고 출력됨
- checkbox : 체크박스
- text : 텍스값 입력창
- number : 산술연산이 필요한 경우 지정
- hidden : 사용자는 몰라도 되지만 서버에는 필요한 정보
- file : 첨부파일불러오기
value 속성 : 버튼 내에 들어갈 텍스트를 값으로 전달한다.
기타 속성
- autofocus : 커서 초기 위치 넣어두기
- required ="required" : 빈칸 사절
- placeholder : 빈칸에 기본적으로 적혀지는 안내문
- checked="checked" : 기본 체크(체크박스옵션)
5. 텍스트를 입력하는 태그; textarea
텍스트 박스를 만들어 사용자가 입력하도록하는 태그이다.
속성인 cols과 rows는 행렬값으로 박스의 크기를 설정하는 것이다.
태그내에 글을 쓰면 박스가 채워져서 출력되기때문에 기능상 채우지 않는 편을 권장한다.
<textarea name="intro" id="intro" cols="100" rows="10"></textarea>