form 태그
웹 페이지에서는 form 태그를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 태그를 사용합니다.
<form action="abc/def/ghi" method="get|post"></form>action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다.
method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠집니다.
GET
GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다. 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입니다. 따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용합니다.
POST
POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다. 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없습니다. 따라서 보안성 및 활용성이 GET 방식보다 좋습니다.
input 태그
input 태그를 사용하여 사용자로부터 입력을 받을 수 있습니다.
- text : 텍스트 입력
- password : 비밀번호 입력
- radio : 라디오 버튼
- checkbox : 체크박스
- file : 파일 선택
- select : 선택 입력
- textarea : 문장 입력
- button : 버튼 입력
- submit : 전송 버튼
- fieldset : 필드셋
실습
실습 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 태그</title>
</head>
<body>
<!-- <form action=""></form> <img alt="" src=""> -->
<!-- 필수 속성 -->
<!-- <table></table><table border="1"></table> -->
<!-- 옵션 속성 -->
<!-- <form action="어떤 페이지로 form안의 데이터를 전송할지 경로"> -->
<form action="test12.html" method="post">
<!-- 어떤 데이터를 무슨 이름으로 보낼지 -->
<!-- type default 속성 text -->
<input type="text" name="apple" placeholder="아이디를 입력" required><br>
<input type="text" name="banana" value="비밀번호를 입력" readonly><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image"><br>
<input type="number" max="3" min="1"><br>
<input type="password"><br>
<input type="button" value="버튼"><br>
<input type="range"><br>
<!-- 데이터 전송 버튼 -->
<input type="submit" value="데이터 전송">
</form>
</body>
</html>
실습 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radio 버튼</title>
</head>
<body>
<form action="test12.html">
<table border="1">
<tr>
<td>이름</td>
<td><input type="text" name="name" placeholder="이름을 작성하세요." required></td>
</tr>
<tr>
<td>성별</td>
<td>남<input type="radio" name="gender" value="m" checked>여<input type="radio" name="gender" value="f"></td>
</tr>
<tr>
<td>성별</td>
<td>남<input type="checkbox" name="gender" value="m" checked>여<input type="checkbox" name="gender" value="f"></td>
</tr>
<tr align="right">
<td colspan="2"><input type="submit" value="데이터 전송"></td>
</tr>
</table>
</form>
</body>
</html>
실습 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 박스</title>
</head>
<body>
<form action="test12.html" method="post">
<select name="product">
<option>셔츠</option>
<option>바지</option>
<option selected>운동화</option>
<option>구두</option>
<option>모자</option>
</select>
<input type="submit" value="데이터 전송">"
</form>
</body>
</html>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
