폼 삽입하기

폼

사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이다.
텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정보는
ASP나 PHP, JSP 같은 서버 프로그래밍을 사용한다.

form의 기본 형태

<form 속성="속성값">여러가지 폼 요소</form>

• 속성
  method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘길것인가를 지정한다.
  (자세한 공부 더 필요함!)
  name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
  action : form태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
  ex) 폼에 내용을 입력한 뒤 서버로 전송할 때 서버에 있는 Jinwoo.php를 실행하는 코드

<form action="Jinwoo.php">
대충 겁나 어려운 여러 폼 요소들
</form>

target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
autocomplete : 예전에 입력한 내용을 자동으로 표시해 주는 '자동 완성 기능'

fieldset, legend

이러한 폼에서 여러 구역을 나누어 표시할 때 fieldset 태그를 사용한다.
조금 더 UI/UX면에서 더 나은 경험을 주기 위하여 사용한다.
예를 들어 주문서의 개인 정보와 배송 정보를 나누면 입력하기도 편하고 화면도 깔끔하다.
그리고, 나누는 구역의 제목을 지을때는 legend 태그를 사용한다.
(UI/UX면에서 중요!)

fieldset, legend의 기본 형태

<form action="Jinwoo.php" autocomplete="off">
	<fieldset>
    	<legend>개인 정보<legend>
    </fieldset>
    <fieldset>
    	<legend>배송 정보<legend>
    </fieldset>
</form>

label

label 태그는 input 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.
레이블은 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다.

label의 기본 형태 중 for="~"사용문

<label for="id입력">아이디</label>
<input type="text" id="id입력">

빠른 이해를 위한 이미지