HTML - form 폼 입력 양식
form 폼 입력 양식
- <form method="get or post" action="서버파일주소">
- form태그안의 입력양식 자료는 서버로 전달된다.
- method속성은 자료를 서버로 전달하는 법을 지정한다. 전달하는 방법에는 get과 post가 있다.
- get 방식: method속성을 생략하면 기본값이 get 방식이다. get방식은 서버로 전달되는 자료값이 웹브라우저 주소창에 노출되어 보안성이 좋지 않다. 그리고 서버로 보내는 자료 길이 제한도 있다.
- post 방식: 자료 노출이 되지않아 보안성이 뛰어나며, 서버로 전달되는 자료길이 제한이 없다. 대부분 post방식을 사용한다.
- action속성값에는 서버 파일이 들어간다.
- </form>
<form></form>
form태그는 입력양식을 작성할 때 사용되는 태그이다. form태그 안의 입력양식 자료는 서버로 전달된다.
inpyt type 속성값 중 submit을 사용해서 자료를 서버로 보내는 버튼을 생성한다. 해당 버튼을 누르면 지정한 action속성값으로 자료가 전달된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 입력폼</title>
</head>
<body>
<form method="post" action="#">
<!-- 1.form태그안에 입력한 자료는 서버로 전달할 수 있다.
method속성에 서버로 보내는 방법을 지정할 수 있다.
get 방식은 서버로 보내는 자료길이 제한이 있고,
웹주소창에 서버로 전달되는 자료가 노출된다. 그래서 보안성이 좋지 않다.
하지만 post 방식은 본문내용속에 포함되어져서 서버로 자료가
전달되기 때문에 자료 노출이 없고 보안성이 우수하다.
서버로 보내는 자료 길이 제한도 없다. 대부분 post방식을 사용한다.
2.method속성을 생략하면 기본값이 get 방식이다.
파일을 첨부해서 서버로 업로드하는 자료실 기능은 post방식에서 가능하다.
3.action속성값에 서버파일경로를 지정한다.
#을 설정하면 서버로의 이동통로를 막았다는 뜻이다.-->
<table border="1">
<tr><!-- 행 -->
<th>아이디</th>
<td><input type="text" size="14"/></td> <!-- 열 -->
<!-- text는 한줄 입력박스를 만든다. size속성은 입력박스 길이를 설정한다.
입력박스 size가 클수록 길이가 길어진다. -->
<th rowspan="2"> <!-- rowspan="2" 2개행을 합침 -->
<input type="submit" value="로그인"><!-- submit은 자료를 서버로 전달하는 버튼을 생성 -->
</th>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" size="14"/></td> <!-- password는 입력박스 값을 암호화시킴. -->
</tr>
<tr>
<th colspan="3"><!-- colspan="3" 3개열을 합침. -->
<input type="button" value="아이디/비번찾기" />
<input type="button" value="회원가입"/>
</th>
</tr>
</table>
</form>
</body>
</html>
action속성값을 #으로 설정했기 때문에 input type="submit" 인 로그인 버튼을 눌러도 서버로의 이동통로를 막아서 이동되지 않는다.
<fieldset></fieldset>
fieldset태그는 입력양식들을 그룹화 할 때 사용하고, 그룹의 경계선을 만들어 준다.
<legend></legend>
legend태그는 그룹의 제목을 붙인다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="#">
<fieldset>
<!-- fieldset은 입력양식들을 그룹화 할 때 사용하고, 그룹의 경계선을 만들어 준다. -->
<legend>인적사항입력</legend> <!-- legend는 그룹의 제목을 붙인다. -->
이름: <input type="text" name="name" size="14"/><br/><br/>
폰번호: <input type="text" name="phone" size="20"/><br/><br/>
주소: <input type="text" name="address" size="36"/><br/><br/>
<input type="submit" value="저장" />
<input type="reset" value="취소"/>
</fieldset>
</form>
</body>
</html>
'언어공부 > HTML' 카테고리의 다른 글
| HTML - input type 속성값 (0) | 2021.07.12 |
|---|---|
| HTML - div와 span (0) | 2021.07.10 |
| HTML - iframe (0) | 2021.07.09 |
| HTML - 태그 정리 (2) (0) | 2021.07.08 |
| HTML - 태그 정리 (1) (0) | 2021.07.07 |
