html form 태그로 웹 폼 기본 구성 해보기
네 안녕하세요, 이번 포스팅에서는 html 웹 폼에 대한 글을 한 번 적어볼까 합니다.
웹 폼이란 우리가 웹 페이지를 이용하는 사용자에게 정보를 입력을 받을 때 사용하는 것을 말합니다.
이를테면 우리가 로그인을 하거나, 그 외에 검색이라던지,
그 외 어떤 정보를 입력하여 찾아내거나 등록을 할 때 많이 씁니다.
우리가 흔히 보는 검색 창이나 로그인 화면에 보이는 문자 입력 칸이 바로 그러한 웹 폼을 만드는 태그로 만들어집니다.
이 폼을 만들기 위해서 정말 다양한 태그들이 이용이 됩니다.
그러한 태그들에 대해서는 추후에 올라올 포스팅에서 다루기로 하고,
이번에는 간단하게 웹 폼에 대해서 맛을 좀 보는 시간을 가져보겠습니다.
1. 웹 폼을 만드는 태그 : form 태그
우리가 웹 폼을 작성할 때 가장 기본이 되는 태그입니다.
이 form 태그 안에서 여러 가지 속성들,
그리고 추가적인 태그들을 달아서 디테일한 것들을 만들어내며,
특히, 이 form 태그는 서버 통신을 할 때 쓰이는 태그이기 때문에,
이를테면 파일 업로드 등에 두루두루 쓰입니다.
그렇기 때문에 정말 중요한 요소이므로,
이 폼을 자유자재로 다룰 줄 안다 그러면 웹에 대해서는 한 70% 정도는 알고 계신다 봐도 됩니다.
아래 코드는 form 태그에 쓰이는 속성들입니다.
<form action="웹 서버 응용 프로그램의 url"
enctype="데이터의 인코딩 타입"
method="get/post"
name="폼의 이름"
target="윈도우의 이름">
여러개의 폼 요소 및 디테일에 대한 부분들을 작성
</form>이런 식으로 form 태그 안에 다양한 속성들을 집어넣어서 기본 기능들을 구현을 하고,
추가적인 태그들을 입력을 해서 그 구색을 갖춥니다.
그럼 이 form 태그 안에서 쓰는 각각의 속성에 대하여 한 번 알아볼까요?
- action : 폼 데이터 처리를 할 웹 서버 응용 프로그램을 지정하는 속성, 버튼 클릭 시 사용자가 입력한 정보와 함께 action 속성에 지정이 된 웹 서버에 연결 및 웹 서버 응용 프로그램 실행을 지시함.
- enctype : 폼 데이터를 웹 서버로 전송할 때 사용할 암호와 방식을 지정해 주는 속성
- method : 폼 데이터를 웹 서버로 전송하는 형식을 지정하는 속성, 대표적으로 get과 post를 사용.
- target : 웹 서버 응용 프로그램으로부터 전송받은 데이터를 출력을 할 창의 이름을 지정해 주는 속성
- name : 폼의 이름을 지정하는 속성이며, 자바스크립트에서 사용을 하는 속성
이 중에서 제일 핵심적인 속성은 name, action, method 속성입니다.
최소한 이 3가지의 속성이 있어야 기본적인 기능을 합니다.
그러면 이 웹 폼에서의 정보 입력과 출력까지는 어떻게 이루어지는지 한 번 자세히 알아볼까요?
1. 사용자가 검색을 하고자 하는 것을 검색창에 입력한다.
2. 검색 버튼(submit 버튼)을 누르면 브라우저는 그 검색어에 상응하는 url을 만든다.
3. 브라우저는 웹 서버에 접속을 하고 웹 서버 응용 프로그램의 실행을 요구한다.
4. 웹 서버에서 search. 웹 서버의 이름(naver, google, daum, zum... etc) 응용 프로그램이 실행이 되고,
검색 결과를 브라우저에 전송을 한다.
5. 브라우저는 웹 서버로부터 받은 결과를 창에 띄워 출력을 한다.
이 5가지의 과정이 그 짧은 순간에 다 이루어져서 정보 입력과 출력이 이루어집니다.
아래는 네이버 검색창이 어떤 식으로 만들어져 있는가에 대한 코드입니다.
<form name="sform" action="https://search.naver.com.search.naver" method="get">
<input name="query" type="text">
<input type="submit" value="검색"> //검색 버튼
</form>이건 네이버 검색창이 어떤 식으로 구성이 되어있는지 코드로써 표현을 한 건데요,
이런 식으로 구성이 되어있습니다.
일단 우리가 검색을 하기 위해서는 웹 서버 응용프로그램 중에서 search라는 것이 작동을 해야 하기 때문에
action 속성을 이용해 그 속성이 작동하도록 지정을 해줬고요,
우리가 검색을 해서 어떤 결과를 출력하기 위해서는 데이터베이스에 일단 저장이 되어야 하므로
input 태그의 이름은 쿼리(데이터베이스를 다루는 곳)이며,
구성이 되는 타입은 우리는 문자를 입력하기 때문에 텍스트로 지정을 해줍니다.
그리고 이 모든 과정이 우리가 검색어를 입력하고 검색 버튼을 눌렀을 때 작동이 되므로
검색 버튼도 추가적으로 만들어줬습니다.
그리고 검색이 된다는 것은 일단 정보의 입력이 허용이 되어야 하며,
어떤 값을 출력하는 것이므로 타입은 submit,
값을 상징하는 value 속성에는 검색을 한 것을 받을 수 있게 했습니다.
이런 식으로 보통 생겼습니다.
그럼 우리도 간단하게 웹 폼을 짜보는 연습을 해봐야겠죠?
제가 간단한 예제 코드를 준비를 했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 시멘틱 태그</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<form name="fo" method="get">
사용자 ID : <input type="text" size="15" value=""><br>
비밀 번호 : <input type="password" size="15" value="">
<input type="submit" value="완료">
</form>
</body>
</html>이렇게 코드를 짜게 되면 id와 비밀번호를 입력할 수 있는 창이 하나 만들어집니다.
그럼 결과 화면을 통해서 같이 보실까요?
이런 식으로 id, 비밀번호 입력창, 그리고 입력 완료 버튼이 만들어집니다.
여기에 직접 글자도 입력할 수 있습니다.
응용 프로그램 처리는 자바스크립트에서 이루어지는데,
자바스크립트에 대한 부분은 나중에 다룰 예정이고,
이번에는 간단한 구조만 보여드리겠습니다.
여기까지 웹 폼에 대하여 간단히 알아보는 시간을 가졌는데요,
다음 포스팅에서는 직접 여러 가지 폼을 입력하여 만들어보는 시간을 가져볼 겁니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 폼 만들기 2 - datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기 (0) | 2023.03.03 |
|---|---|
| html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 (0) | 2023.03.03 |
| html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 (0) | 2023.03.03 |
| html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 (0) | 2023.03.02 |
| html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 (0) | 2023.03.02 |
댓글