웹 상에서, 특정 값을 입력하여 서버나 DB로 값을 보내 처리하는 등의 동작을 위해서는 여러 가지 입력 폼(form)을 사용하게 됩니다. 아마 html에 조금 익숙하신 분들이라면 <input> 태그를 가장 먼저 떠올리실 분들이 많을 텐데, 일단 여기서는 간단하게 기본 폼 태그인 <form>에 대해서 살펴보면서 기본적인 내용을 먼저 익히도록 하겠습니다.
기본 <form> 태그의 유형은, <form> </form> 태그 사이에 속성과 폼 관련 요소들을 삽입하는 형태로 구성됩니다.
<form {속성="value"}>폼 요소</form>
위에서 기술된 '속성'은 몇 가지 대표적인 속성들이 있습니다. 하나씩 살펴보도록 하겠습니다.
○ name
이 속성은 JS로 폼을 제어하는 경우에 사용할 폼의 이름을 의미합니다.
○ action
<form> 태그의 내용을 처리할 서버 프로그램을 지정합니다. 예를들어 해당 폼을 실행했을 경우 서버로 내용이 전송되고 서버의 account_register.php가 실행된다고 가정하면 다음과 같이 적용합니다.
<form action="account_register.php">
/* 내용 */
</form>
○ target
<a> 태그에서 사용한 기능과 비슷합니다. 위 action 속성에서 지정한 파일을 현재 윈도우나 탭이 아닌 다른 위치에서 열어야 할 때 사용하게 됩니다.
○ autocomplete
기본적으로 입력 폼에서 자동완성 기능은 on으로 취급합니다. 하지만 중요 개인 정보나 일회성 입력 verifying code와 같은 경우에는 off 해야 하므로 다음과 같이 적용합니다.
<form action="" autocomplete="off">
/* 내용 */
</form>
○ method
사용자가 입력한 내용을 서버로 전달할 때의 프로토콜 종류를 지정합니다. 이와 관련된 내용은 추후 상세히 다루어 볼 예정이니, 간단하게 이러한 내용이 있다는 정도만 기억해 둡니다.
- get : 데이터를 256 ~4,096byte까지만 전달이 가능하며, url에 사용자 입력이 그대로 노출됩니다.
- post : 입력한 내용이 노출되지 않고, 길이의 제한 역시 없습니다.
지금부터는 <form>과 관련해 사용하는 몇 가지 중요 태그들에 대해서 살펴보겠습니다.
○ <fieldset>, <legend> - 폼 요소 그룹화
위 태그들은, 하나의 폼 요소 안에서 몇 가지 구획을 나누어 관리할 필요가 있을 때 사용하는 태그입니다. 예를 들어 한 개의 폼 안에서 "계정 정보"와 "배송 정보"를 구분하는 등의 경우입니다. 사용 예시는 다음과 같습니다.
<fieldset {속성="value"}>
<legend>그룹 명칭</legend>
</fieldset>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>계정 정보</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
</body>
</html>
○ <label> - 폼 요소에 레이블 부여하기
레이블(label)태그는 앞으로도 굉장히 자주 사용하게 되며, input 등의 주요 태그와 함께 사용하게 되는 중요 태그 중 하나이니, 내용을 잘 익혀두도록 합시다. 일단 기본적으로 레이블 태그를 사용하게 되면 [레이블 텍스트]와 [폼 요소]가 서로 연결됩니다. 레이블 텍스트와 폼 요소를 연결하는 방식은 두 가지가 있는데 하나씩 살펴보겠습니다.
1. 레이블 태그 안에 폼 요소 삽입하기
레이블 태그 내에 직접 폼 요소를 삽입하는 형태입니다.
<label>레이블명칭<input></label>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<label>아이디<input type="text"></label>
</form>
</body>
</html>
2. 레이블 태그에 id 속성 부여하기
이 방식을 사용하게 되면 입력 폼에 id라는 속성을 별도로 부여하게 되고, 레이블 태그에 for 속성 쪽에 해당 id를 전달하여 두 개의 태그를 연결하게 되는 방식입니다.
<label for="{id}">레이블명칭<input id="{id}"></label>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<label for="userid">아이디</label>
<input type="text" id="userid">
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 2 (0) | 2023.03.06 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 1 (0) | 2023.03.06 |
| 2. 내용 입력하기(6) - 하이퍼링크 삽입 (0) | 2023.03.03 |
| 2. 내용 입력하기(5) - 오디오/비디오 삽입 (0) | 2023.03.02 |
| 2. 내용 입력하기(4) - 이미지 삽입 (0) | 2023.03.01 |
