이제, 사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그를 살펴보겠습니다.
사용자와 웹 사이트 간 서로 상호 작용하는 것에서 중요한 것으로 사용자가 웹 사이트에 정보를 전송하는 것을 허용하는 태그인 form태그에 대해 정리하겠습니다.
form태그는 중첩 태그로 많이 사용이 되며 <input> 태그, <textarea></textarea> 태그, <select></select> 태그 <option></option> 태그에 대한 태그와 여러 가지 속성 지정이 존재합니다.
입력 양식 : <form></form> 태그
우선, form태그를 만들기 위해 사용자로부터 정보를 입력받을 수 있는 것을 만듭니다. 입력받는 태그는 input 태그가 사용되는데 type 속성의 값을 text로 지정하여 문자를 입력받을 수 있는 창을 만듭니다. type 속성의 값을 password로 하여 문자가 입력되면 *로 출력되도록 만들 수 있기도 합니다.
입력받는 창을 모두 만들었다면 입력한 정보를 서버로 전송할 수 있도록 <input type="submit"> 태그로 제출 버튼을 생성하여 사용자의 정보를 제출하는 버튼을 만듭니다.
이러한 정보들을 어디로 전송될 것인지에 대해 설정하기 위해 form태그를 사용합니다. form태그에 action속성 값을 어떠한 행위를 하는 파일로 전송하는 것을 설정해야 합니다.
값이 입력된 정보가 구분이 안되기에 각각의 컨트롤에 이름을 지정해야 합니다. name속성에 값을 지정하여 이름으로 지정할 수 있습니다.
사용자가 입력하기 전에 기본값을 설정하도록 할 수 있는데 input 태그에 value속성 값을 지정하여 사용하면 됩니다.
텍스트의 입력이 많아 여러 줄로 텍스트를 입력받을 때는 textarea태그가 사용됩니다. textarea태그는 크기를 조정할 수 있는데 높이를 조정하기 위해 cols속성에 값을 지정하면 되고, 폭을 조정하기 위해 rows속성 값을 지정하면 지정한 만큼의 크기로 변환됩니다.
여기서, textarea태그의 기본값은 속성으로 지정하는 것이 아닌 태그와 태그 사이에 문자를 입력하면 그것이 기본값이 됩니다.
이제 선택을 할 수 있는 방법인 select태그입니다.
선택 방법 중 Dropdown List방식을 먼저 살펴보겠습니다. 사용자들이 여러 가지 선택지 중 하나를 선택할 수 있는 form태그입니다. 제한된 공간에서 여러 가지 선택을 할 수 있는 기능으로 선택 기능을 사용하는 태그는 option태그입니다.
option태그만 사용하면 줄 바꿈만 되고 선택 기능은 없는데 선택 기능을 활성화하기 위해 option태그를 select태그로 묶어 표현해주어야 Dropdown List방식의 선택문이 만들어집니다.
이러한 선택 결과를 서버로 전송하기 위해 선택한 값을 form태그로 묶어 action속성 값을 이용하여 저장 가능하도록 지정해야 합니다. 서버로 전송하기 위해 select태그에 이름을 지정해야 하기에 name속성을 이용해 값을 지정해야 하고, 다중 선택을 하려면 multiple속성 값 없이 지정하면 됩니다. 또한, option에 value속성 값을 주어 해당 값들이 컴퓨터에 저장될 때의 어떠한 값인지 알려주는 것이 좋습니다. multiple을 이용하여 다중 선택을 하도록 만들었다면 ctrl을 누르면 다중 선택이 가능합니다.
두 번째 선택 방식으로 Radio button형식과 체크박스가 있습니다. 같은 형식끼리 같은 이름으로 묶어놔야 하며 Radio button방식은 input 태그에 type속성 값으로 radio를 지정하면 됩니다. 그리고, radio방식은 하나만 선택되는 방식이기에, 여러 개의 선택 방식으로 체크박스가 있습니다.
체크박스는 input 태그에 type속성 값으로 checkbox를 지정하면 되고 기본적으로 체크가 되어있기를 원한다면 input 태그에 값이 없는 checked속성을 지정하면 됩니다.
submit값으로 버튼을 만든 것을 활용하는 방법입니다.
input 태그에 type속성 값을 submit으로 지정하면 제출 버튼이 생성되는데 제출 글자를 바꾸고자 한다면 값을 지정한 value속성으로 지정하여 표현할 수 있습니다.
다른 버튼도 사용할 수 있는데 type속성에 button을 값으로 지정해주면 되고, 이 버튼은 UI만 있기에 JSP와 같은 것을 이용하여 활용하여야 합니다.
다음 버튼은 reset버튼으로 type값을 reset으로 지정하여 클릭하면 사용자가 입력하였던 값을 초기화하여 다시 입력할 수 있도록 하는 기능을 가지고 있습니다.
데이터를 숨겨서 전송하는 hidden field입니다.
서버에 정보를 전송해야 하는데 UI가 필요 없거나 몰래 정보를 전송하는 경우 input 태그에 hidden값을 가진 type속성과 value에 값을 지정하여 값을 전송하면 됩니다.
이번에는 컨트롤의 제목을 나타내 주는 label 태그입니다.
각각의 컨트롤에 이름이 지정되어 있는데 HTML에서는 이 이름들을 label을 사용하여 이름을 지정하는 것을 권장합니다.
태그 앞에 있는 문자들이 태그에 대한 레이블 즉, 이름입니다. 이러한 태그 앞에 있는 문자가 레이블이라는 것을 알리기 위해 <label></label> 태그로 지정합니다. 또한 레이블이 어떤 태그를 가지고 있는지 알리기 위해 label태그로 같이 묶기도 하고, label태그와 따라오는 태그에 for속성과 id속성 값을 같게 하여 묶을 수 있습니다.
레이블을 활용하면 해당 묶여있는 문자를 클릭하면 입력해야 하는 값으로 이동하게 됩니다.
method와 file upload
기본적으로 form태그는 get방식을 이용하여 서버 쪽으로 데이터를 전송하였습니다. get방식은 url뒤에 ?마크를 통해 url 끝을 알리고, 데이터 표현 시작점을 알립니다. 데이터 표현 시 url에 정보들을 붙여 서버에 요청하기에 정보들이 그대로 노출될 수 있습니다.
그렇기에 정보를 전달할 때 감춰서 전달하는 방식이 존재하는데 그것이 post방식입니다.
post방식은 데이터 전송을 기반으로 body에 데이터를 넣어 보냅니다. form태그에서 적용방법은 form태그에 post값을 가진 method속성을 지정하여 전송 타입을 post로 변경할 수 있습니다.
form을 이용하여 정보를 전송할 때 post방식을 이용하는 것이 좋습니다. 여기서, 보안 측면으로 get방식 post 두 방식 모두 암호화를 진행하여야 합니다.
파일 업로드
업로드는 파일 전송받은 서버에서 해야 할 것이 많기에 HTML에서 해줘야 하는 것이 한정적입니다.
파일을 선택해주는 태그는 input 태그에 type속성을 file로 지정하여 file을 전송할 수 있는 UI를 만들 수 있습니다.
어디로 전송할지 지정하기 위해 form태그를 활용하여 사용자가 업로드한 파일을 주소의 파일이 받아서 서버에 저장하도록 합니다. 여기서 전송을 하기 위해 속성을 method와 enctype속성을 지정해야 합니다.
method는 값을 post로 지정하고, enctype는 multipart/form-data로 지정해야 합니다. 파일을 업로드하는 기능이 하나라도 있다면 이 속성 값을 지정해야 하며, 파일을 선택한 input 태그의 이름 name속성의 값은 서버 개발자가 요청하는 데로 설정해주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>
이어서 마지막 주요 태그에 대해 알아보겠습니다.
'TeamH4C_ProjectH4C > 프로그래밍 언어' 카테고리의 다른 글
| [TeamH4C_C언어] C의 시작 (0) | 2021.02.21 |
|---|---|
| [TeamH4C_HTML] 주요 태그-3 (0) | 2021.02.13 |
| [TeamH4C_HTML] 주요 태그-1 (0) | 2021.02.13 |
| [TeamH4C_HTML] 간단한 웹 페이지 만들기 (0) | 2021.02.13 |
| [TeamH4C_HTML] 기본 문법과 소개 (0) | 2021.02.10 |