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