폼태그<form>는 웹페이지에서의 입력 양식을 의미합니다.
웹 프론트단 개발시 로그인이나 등록화면에서 자주 사용하는데요
폼태그를 배울 때 중요한 것 중 하나는 폼태그의 method 속성을 이해하는 것입니다.
Method방식에는 get방식과 post방식이 존재합니다.
(1) GET 방식
parameter를 헤드에 붙여서 보내기 로서 URL에 노출되는 방법, 보안 취약
(예시)
http://localhost/login.php?id=turtlecoding&pswd=turtlecoding
(2) POST 방식
parameter를 바디에 붙여서 보내기 로서 URL에 안보임
(예시)
일반적인 태그 예시
<body>
<form action="register_query.php" method="POST" >
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<input type="submit" value="제출">
</p>
</form>
</body>
(3) 입력(input) 태그 개요
입력태그인 <input>태그 다양하게 폼(form)태그에 입력할 수 있는 것들을 제공합니다.
Input 타입으로 다양한 입력을 제공합니다.
다양한 속성을 가지고 있습니다.
(예시)
<body>
<form action="register.php" method="POST">
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
남<input type="radio" name="gender">
여<input type="radio" name="gender">
</p>
<p>
<strong>관심사</strong>
IT<input type="checkbox" name="checkbox1">
경제<input type="checkbox" name="checkbox2">
스포츠<input type="checkbox" name="checkbox3">
</p>
<p>
<input type="submit" value="제출">
</p>
</form>
</body>(결과)
강의 내용을 영상으로도 확인해 보세요
'테크노트 > html' 카테고리의 다른 글
| 크롬개발자도구를 알아보자 (0) | 2022.01.31 |
|---|---|
| html 테이블(table)태그와 리스트(list)태그를 알아보자 (0) | 2022.01.28 |
| 스크립트 선언방법 과 HTML파싱작업 ( ft.페이지로드가 느려지는 경우) (0) | 2022.01.26 |
| html에서 블록(block) 태그와 인라인(inline) 태그의 차이점 (0) | 2022.01.26 |
| HTML doctype tag 선언 방법 (html 4.01, xhtml 1.0, html 5) (0) | 2022.01.25 |
댓글