폼(form) 이란?
폼이란, 사용자가 뭔가를 입력하는 형태의 것을 말한다. 로그인창에서 아이디와 비밀번호를 입력하는 박스가 이에 해당된다.
로그인 폼을 예시로 폼의 작동 방식에 대해 설명해 보겠다.
사용자가 아이디와 비밀번호를 입력하고 '로그인' 버튼을 누르면 입력한 내용이 웹 서버로 보내진다.
서버에서는 데이터베이스를 뒤져서 사용자가 보낸 아이디와 비밀번호가 서로 일치하는지 확인하고 그 결과를 브라우저로 보낸다.
이처럼 폼과 관련된 대부분의 작업은 데이터베이스를 기반으로 한다. 텍스트 박스나 버튼과 같은 폼의 형태는 HTML 태그를 이용하고, 그 폼에 입력된 사용자 정보를 처리하는 것은 PHP, ASP, JSP 같은 서버 프로그래밍을 이용한다.
폼 만들기 - <form> 태그
<form 속성="속성 값"> 폼 요소들 </form><form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다.
<from> 태그에서 사용하는 속성들은 아래와 같다.
| 속성 | 설명 | |
| method | 사용자가 입력한 내용들을 서버로 어떻게 넘길지 지정 | |
| 속성 값 | get: 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남. 256 byte ~ 4096 byte 까지의 데이터만 넘길 수 있음 | |
| post: 사용자의 입력을 standard input으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고, 사용자가 입력한 내용이 드러나지 않음 (대부분 이 방식을 사용함) | ||
| name | 폼의 이름을 지정함. 한 문서 내에 여러 개의 <form> 태그가 있을 때 폼들을 구분하기 위해 사용함 | |
| action | <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정함 | |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치로 열리게 지정함 | |
그리고 사용자가 내용을 입력하는 필드 또는 버튼은 <input> 태그를 사용한다.
<input> 태그는 다음 글에서 자세히 설명하도록 하겠다.
사용 예시)
<form action="search.php" method="post" target="_blank" autocomplete="off">
<label for="search">검색을 누르세요</label>
<input type="text" title="검색">
<input type="submit" value="검색">
</form>
폼에 내용을 입력하고 '검색' 버튼을 눌렀을 때 입력한 내용이 search.php 파일로 전송된다.
그리고 다음 글에서 설명하겠지만, <input> 태그에 title 속성으로 "검색"을 넣어 폼 위에 마우스 커서를 올리면 '검색'이라고 뜬다.
<form> 태그 맨 뒤에 있는 autocomplete 속성은 자동 완성 기능을 다룬다. autocomplete="off"라면 자동 완성 기능이 꺼지고, 기본값은 "on"이다.
참고로 자동 완성 기능이란 검색 창이나 로그인 창에서 내용을 입력할 때 이전에 입력했던 내용이 뜨는 것을 말한다.
<label> 태그 - 레이블 만들기
레이블(label)이란, 입력 창 옆에 붙어 있는 텍스트를 말한다.
레이블의 기본형은 다음과 같다.
<label 속성="..."> 레이블 이름 <input ...> </label>
또는
<label for="id_이름"> 레이블 이름 </label>
<input id="id_이름" 속성="...">
위처럼 <label> 태그는 두 방법으로 사용할 수 있다. 첫 번째 방법은 <label> 태그 안에 폼 요소(input 등)를 넣는 것이다.
두 번째 방법은 <label> 태그와 폼 요소를 따로 사용하고 id 속성을 이용해 연결시키는 것이다.
이때 연결시킬 폼 요소는 <label> 태그에서 for 속성에 적은 id를 id 속성으로 똑같이 적어줘야 한다.
사용 예시)
<label for="user_id">아이디</label>
<input type="text" id="user_id">
<label for="user_pw">비밀번호</label>
<input type="password" id="user_pw">
결과)
이 두 번째 방식을 이용하면 <label> 태그 부분과 <input> 소스가 떨어져 있어도 쉽게 연결할 수 있다는 장점이 있다.
그리고 <label> 태그를 이용하면 사용자가 라디오 버튼과 체크 박스를 선택할 때 보다 쉽게 누를 수 있도록 해줄 수 있다.
라디오 버튼은 여러 개의 버튼 중 하나만 선택할 수 있는 버튼이고, 체크 박스는 여러 개를 한 번에 선택할 수 있는 버튼이다.
원래는 버튼을 정확히 클릭해야 선택이 되지만 <label> 태그 안에 라디오 버튼과 체크 박스를 넣으면 옆의 텍스트를 클릭해도 버튼이 선택되어 사용자가 사용하기 더 편리해진다.
<fieldset> 태그와 <legend> 태그
여러 개의 폼들을 묶어 화면에서의 구역을 나눌 수도 있다. 이럴 때는 <fieldset> 태그와 <legend> 태그를 사용한다.
<fieldset> 태그와 </fieldset> 태그 사이에 폼 코드를 넣어주면 해당 폼들을 둘러싸는 외곽선이 표시되고, <legend> 태그와 </legend> 태그 사이에 텍스트를 작성하면 <fieldset> 태그로 만들어진 외곽선에 묶은 그룹의 제목이 표시된다.
사용 예시)
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" name="이름" id="name">
</li>
<li>
<label for="mail">메일 주소</label>
<input type="email" id="mail">
</li>
<li>
<label>테스트</label>
<input type="datetime-local" value="2023-08-15 09:00" id="테스트">
</li>
<li>
<label>리셋</label>
<input type="reset">
</li>
</ul>
</fieldset>
결과)
