form 이란?
백엔드나 다른 페이지에 정보, 요청을 보낼 수 있는 기능을 가진 태그. form안의 데이터들을 요청과 함께 전송할 수 있는데, 예를 들면 회원가입 페이지, 로그인 페이지, 주문 페이지 등 .
우리가 설문조사, 정보 취합 때 자주 쓰는 naver form , google form의 기능을 생각하면 이해가 쉽다.
다음 예시코드를 보자.
<body>
<!--action: 요청을 보낼 url 지정. form을 submit하게 되면 지정된 url로 요청을 보내게 되는데
form태그안에 있는 데이터들도 함께 전송된다.-->
<!--method: 요청을 보내는 방식 지정, get과 post중 하나를 선택해서 지정한다.-->
<form action="/board/search" method="post">
<input type="text" name="searchKeyword" placeholder="검색어를 입력하세요.">
<input type="submit" value="검색">
</form>
</body>action은 form에 입력받은 데이터를 전송할 서버 스크립트의 경로를 지정하고
method는 get post방식 중 하나를 택하여 지정한다.
- get방식 :
사용자가 입력한 검색결과를 브라우저에 노출, 보안 취약
쿠키와 같은 작은 데이터 전송 할때 쓰이며 사용자가 입력한 정보가 노출되어도 괜찮을 때 사용된다.
-
post 방식 :
데이터 추가, 수정, 삭제
사용자가 입력한 정보가 노출되지 않아야할 때(로그인 등) -
name : 하나의 웹 문서안에 여러 개의 폼이 있을 수 있으므로 폼을 식별하기위해 폼의 이름을 임의로 지정한다.
- fieldset : 태그의 영역들을 그룹화 시키기 위해 외곽선을 그려주는 역할을 한다. 하나의 폼에서 여러 구역을 나눠서 표시할 때 사용. 예를들면 쇼핑몰 사이트 주문서 폼에서 사용자 정보와 배송 정보, 주문 정보를 분리해서 표시할 때 주로 사용할 수 있다.
-legend : 는 fiedlset안에 제목을 붙여주는 역할로 , 디자인에 따라 외곽선이 필요 없을 시 fieldset에 스타일을 주지 않고 외곽선이 안보이게 제목으로 사용 가능하다.
-label : 입력창(input 태그)옆에 아이디나 비밀번호같은 텍스트를 붙여주는 태그
<lable 태그로 iput태그를 감싸는 방식>
<label>아이디 <input type="text"> </label>
input 태그의 아이디를 label 태그의 for 속성으로 지정하는 방식
<label for="userId">아이디</label> <input id="userId" type="text">
form 태그를 활용한 예시
<body>
<form action="">
<!--fieldset: form태그 안의 태그들의 영역을 지정. 외곽선을 그려주는 태그-->
<fieldset>
<!--legend: 영역으로 구분된 fieldset에 제목을 붙여주는 태그-->
<legend>주문자 정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name" value="홍길동">
</li>
<li>
<label for="tel">연락처</label>
<input type="text" id="tel">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
<label for="receiveName">받는 사람 이름</label>
<input type="text" id="receiveName">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address">
</li>
</ul>
</fieldset>
</form>
</body>위 코드로 출력된 화면 이미지는 다음과 같다.
주문자 정보- 이름
- 연락처
- 받는 사람 이름
- 주소
