안녕하세요, HTML의 <form>을 정리해보려 합니다.
슬슬 HTML의 끝에 다 와가는 것 같아 기분이 좋으면서도 두렵습니다. 올해 안에 꼭 프런트엔드 기초 및 지식을 습득하여 프로젝트를 만들 수 있기를!
나중에 보았을 때 이해를 더 빨리 직관적으로 하기 위해 코드를 작성한 상태에서 분해하면서 정리해보겠습니다.
<form>은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
form 태그의 속성으로는 action, name, target, method, autocomplete 등이 있습니다.
여러 사이트에서 로그인 화면을 보면 아이디와 비밀번호를 입력받아 로그인 버튼을 클릭하여 로그인하는 구조로 되어있습니다. form을 이용하여 이러한 형태 틀을 만들 수 있는데요, 아래 예시를 보며 정리해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
</body>
</html>
위와 같은 코드가 있다고 가정하고 상기 코드의 html 파일을 실행하면 아래와 같이 나오게 됩니다.
여기서 임의의 이메일과 비밀번호를 입력한 후 로그인 버튼을 눌러보겠습니다! (상단에 주소에 집중해 주세요!)
입력을 하였는데도 페이지는 변한 게 없습니다..
하지만! 주소를 보시면 제가 입력한 이메일과 패스워드가 추가된 것이 보입니다!
그럼 작성한 코드에서 form태그의 action의 값으로 "love"라는 값을 넣은 후 동일한 이메일 패스워드 입력 후 로그인!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="/love">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
</body>
</html>
드디어 화면이 바뀌었습니다! 그리고 주소를 보시면 5500 뒤에 love가 나오면서 이메일과 패스워드 정보가 나옵니다!
이처럼 action은 form 내부의 데이터들을 어디로 보내줄지 정해주는 역할을 합니다. 여기서 실제로 /love라는 주소는 없기 때문에 화면에는 Cannot GET /love라고 나오게 됩니다.
GET을 사용하였을 때는 위와 같이 주소에 사용자가 입력한 정보(이메일/비밀번호)가 노출이 됩니다. 이것을 줄이기 위해서는 form 태그의 method 속성을 알 필요가 있습니다. method는 기본적으로 GET값으로 되어있어 위 코드에서 method를 정의 안 했어도 Cannot GET /love라고 나오게 됩니다.
GET을 POST로 바꾸게 되면 밑 사진과 같이 주소에 사용자가 입력한 값이 안 나오게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="/love" method="POST">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
</body>
</html>
즉 정리하자면 GET은 URL 주소에 사용자가 입력한 이메일과 비밀번호가 포함되어 전송이 되는 것이고,
POST는 URL 주소에는 정보들이 포함되어 있지 않지만 숨겨져 있다고 생각하면 될 것 같습니다.
보내려는 데이터가 개인정보가 포함되거나 보안이 중요한 경우 POST를 사용해야 합니다.
(하지만 이것도 완벽히 숨기는 것이 아니므로 암호화를 해줄 필요가 있습니다!)
나머지 form 속성들은 간략히 효과만 정리하고 넘기겠습니다.
autocomplete : 이름 그대로 자동완성 기능입니다! ( on/ off)
validate : 타당성 검사를 해주는 속성입니다. (boolean 값으로 validate/novalidat가 있으며 기본적으로 validate입니다)
'Web 개발 > HTML.CSS' 카테고리의 다른 글
| HTML/CSS - button (0) | 2021.05.29 |
|---|---|
| HTML/CSS - input (0) | 2021.05.28 |
| HTML/CSS - Inline/block (0) | 2021.05.22 |
| HTML/CSS - Position (0) | 2021.05.18 |
| HTML/CSS 가운데 정렬 정리 (0) | 2021.05.16 |
댓글