form
여러 입력 양식을 하나로 묶어주는 태그. 예를들어 로그인이나 회원가입
배송지 입력과 같은 다양한 입력양식들을 묶어서 서버로 보내는 태그이다.
form태그에는 서버에 내용을 보내기 위해 다양한 속성들을 함께 사용한다.
form태그는 block속성을 가진다.[속성]
- name
: 폼 양식의 이름을 지정한다. 한 문서안에 여러개의 form태그가 있을 경우
폼들을 구분하기 위해 사용한다. class이름 짓듯이 지으면 된다.
- action
: 입력데이터들의 전달 위치를 지정한다. 보통 서버주소가 들어가고,
만약 서버가 준비되지 않았다면 #(임시경로)를 넣는다.
- method : 입력 데이터를 전달하는 방식.
1. get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시되고,
256~4096byte까지의 데이터만 서버로 전송할 수 있다.
보안에 취약하고 서버 전송속도가 굉장히 빠르다.
보통 광고성 수신문자같은 내용을 보낼때 사용한다.
2. post★ : 대부분의 방식에 사용되며 사용자의 입력을 표준입력으로 전송하여
입력 내용 길이에 제한받지 않고 사용자가 입력한 내용을 주소표시줄에
노출하지 않는다.[기본형]
<form name="폼이름" action="서버주소" method="post" id="아이디값">
입력양식들
</form>label
폼 요소에 레이블(이름표)을 붙일때 사용하는 태그이다.
input태그끼리 서로 구분하는 용도로 사용된다.
for속성은 해당 폼요소를 서버로 넘길때 어떤 input과 세트인지 알려주는 역할을 한다.
또한 브라우저에서 세트인 input을 구별할때도 사용한다.
이때 for에 붙인 이름과 input에 있는 name속성값이 동일해야한다.
lable태그는 inline속성이다.[기본형]
1. <label for="폼요소 이름">
레이블 텍스트(폼요소 이름)
<input type="값" name="폼요소 이름"/>
</label>
2. <label for="폼요소 이름">레이블 텍스트(폼요소 이름)</label>
<input type="값" name="폼요소 이름"/>fieldset,legend
form 양식을 만들때 각 요소들을 그룹으로 묶어주는
<fieldset>태그와 해당 영역의 이름을 붙여주는 <legend>태그가 있다.
예를 들어 쇼핑몰 사이트의 주문서 양식을 만들때 작성하는 폼에서
'사용자 정보'와 '배송지 정보'를 구분해 표시하면 입력하기 편하고 깔끔하게 정리할 수 있다.[기본형]
<fieldset>
<legend>사용자 정보</legend>
</fieldset>
Hi