웹에서 자주 만나는 폼

우리는 웹에서 폼을 자주 만납니다.한 페이지 안에서도 여러 가지 폼이 사용되죠.
아이디와 비밀번호를 입력하거나 로그인 버튼,회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼이라 할 수 있습니다.

<form>태그

<form>태그는 폼을 만드는 가장 기본적인 태그로<form>태그와</form>태그 사이에 여러 폼 요소와 관련된 태그를 넣습니다.

form 태그의 속성

• <form>태그는 몇 가지 속성을 통해 사용자가 일정한 자료들을 어떤 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정합니다.

1.method: 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.
👉get-주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte-4096byte까지의 데이터만 서버로 넘길 수 있습니다.
👉post-대부분 이 방식을 사용합니다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않습니다.

2.name: 폼의 이름을 지정합니다. 한 문서 안에 여러 개의<form>태그가 있을 경우, 폼들을 구분하기 위해 사용합니다.

3.action: <form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다.

4.target: action속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치로 열도록 지정합니다.

• <form>태그를 이용해 폼이 들어갈 부분을 만들었다면 <form>태그와</form>태그 사이에 여러 폼 태그들을 삽입하면서 원하는 폼 형태를 만들 수 있습니다.
  (예를 들어 폼에 내용을 입력하고 전송 버튼을 눌렀을 때 register.php를 실행한다면 아래와 같이 사용합니다.)

<form action="register.php">
  ~여러 폼 요소~
</form>

• 다음 예제는 검색 창을 만드는 폼입니다. 폼에서는 사용자가 내용을 입력하는 필드를 삽입할때나 버튼을 삽입할때 <input>태그를 사용합니다.<form>태그에서 action="search.php"로 지정했기 때문에 사용자가 검색할 내용을 입력하고 [검색]버튼을 클릭하면 그 값이 웹 서버에 있는 search.php 파일로 전송되어 검색이 처리됩니다.그리고 그 결과가 다시 웹 브라우저로 전달되어 화면에 표시됩니다.

autocomplete 속성- 자동완성

검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 이기능을 '자동완성기능'이라고 하며 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우,이전에 입력했던 내용을 힌트로 보여줍니다.

• 이 기능은 autocomplete속성을 이용하는데 기본값은 "on"입니다.
• 유출되면 곤란한 비밀번호나 일회용 인증번호를 입력할 때는 자동 완성 기능을 꺼야합니다.

<form action="register.php" autocomplete="off">
  ...
</form>

<label>태그-폼 요소에 레이블 붙이기

<label>태그는 폼 요소에 레이블을 붙이기 위한 것입니다.레이블이란 입력 창 옆에 '아이디','비밀번호'처럼 붙여 놓은 텍스트를 말합니다.

• 1.<label> 태그 안에 폼 요소를 넣는 방법

<label>아이디(6자이상)<input type="text"...></label>

• 2.<label>요소와 폼 요소르 따로 사용하고 <label>태그에서는 for속성을 이용하고 폼 요소에서는 id 속성을 이용해 서로 연결하는 것입니다.
  (다시말해 id 속성 값을 <label>태그의 for 속성에게 알려주는 방법)

<label for="user-id">아이디(6자이상)</label>
<input type="text" id="used-id">

👉이 방법은 폼 요소의 앞뒤에 <label>태그와</label>태그를 붙이는 첫 번째 방법 보다 복잡한것 같아 보이지만 <label>태그를 사용한 텍스트 부분과 사용자 입력을 받는 <input>소스가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있습니다.

라디오 버튼과 체크박스에서 사용하는<label>태그

스마트폰 처럼 화면이 작은 기기에서 라디오 버튼이나 체크박스부분을 정확히 터지하는 것은 쉽지 않은 일입니다.그럴떄 <label>태그를 이용해 버튼이나 체크박스에 텍스트를 연결해 놓았다면 텍스트만 터치해도 선택되어 사용이 훨씬 쉬워집니다.

<form>
		<h3>수강 분야(다수 선택 가능)</h3>
		<ul>
			<li><input type="checkbox" value="grm">문법	</li>
			<li><input type="checkbox" value="wr">작문</li>
			<li><input type="checkbox" value="rd">독해</li>
		</ul>
		<h3>수강 과목(1과목만 선택 가능)</h3>
		<ul>
			<li>
				<label><input type="radio" name="subject" value="eng">영어회화</label>
			</li>
			<li>
				<label><input type="radio" name="subject" value="ch">중국어회화</label>
			</li>
			<li>				
				<label><input type="radio" name="subject" value="jp">일어회화</label>
			</li>
		</ul>
	</form>

• 수강 분야 부분에서는 <label>태그를 사용하지 않았기 때문에 텍스트만 클릭하면 체크박스 버튼이 선택되지 않습니다.
• 수강 과목 부분에서는 <label>태그를 사용했기때문에 텍스트만 클릭해도 왼쪽 라디오 버튼이 선택됩니다.
• 다수선택이 가능할 버튼은 <ul>1개,<li>1개 이렇게 만들어야 한다.
  

<fieldset>,<legend>태그 -폼 요소 그룹으로 묶기

쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 '배송 정보'를 나누어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있습니다.
이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려고할 때 <fieldset>,<legend>태그를 사용합니다.

• <fieldset>태그는 <fieldset>와</fieldset>태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려준다.
• <legend>태그는 <fieldset>태그로 묶은 그룹에 제목을 붙여줍니다.
• 다음 예제는 사용자가 입력해야 하는 정보를 <fieldset>태그를 이용해 '개인정보'와'로그인 정보'로 묶은 것입니다.

<form>
 <fieldset>
  <legend>개인 정보</legend>
	<ul>
	<li>
		<label for="name">이름</label>
		<input type="text" id="name">
	</li>
	<li>
		<label for="mail">메일 주소</label>
		<input type="text" id="mail">
	</li>
	</ul>
</fieldset>		
<fieldset>
	<legend>로그인 정보</legend>
	<ul>
	<li>
		<label for="id">아이디</label>
		<input type="text" id="id">
	</li>
	<li>
		<label for="pwd">비밀번호</label>
		<input type="text" id="pwd">
	</li>
	</ul>
</fieldset>
</form>