[HTML] Form 태그
2023. 3. 14. 13:00ㆍ기술 창고/HTML
728x90
SMALL
Form 태그는 생성한 폼 안에 있는 정보들을 원하는 주소로 전달한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<h1>Join Form</h1>
<form action="#" method="post">
<p>
<label for="username">Name:</label>
<input type="text" id="username" required>
</p>
<p>
<label for="useremail">Email:</label>
<input type="email" id="useremail" required>
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" required>
</p>
<p>
<!-- <input type="submit" value="가입하기"> -->
<!-- <button type="submit"><img src="images/iconfinder_tick_red_619540.png" alt="가입하기"></button> -->
<input type="image" src="images/iconfinder_tick_red_619540.png" alt="가입하기">
</p>
</form>
</body>
</html>
<!--
# <input> : 입력할 수 있는 형식을 만드는 태그
# type 속성 : input 태그의 속성을 지정하는 속성
text - 텍스트를 입력받는 유형
password - 비밀번호를 입력받는 유형, 입력한 비밀번호를 암호화해서 보여준다.
email - 이메일을 입력받는 유형, 만약 이메일 형식으로 입력하지 않으면 이메일 형식이 아니라는 에러 메세지가 나온다.
submit - 버튼 같이 클릭하여 데이터를 전송하는 유형
image - 이미지를 입력받는 유형. img 태그와 동일하게 src 속성과 alt 속성으로 이미지를 지정하거나 대체 텍스트를 나오게 할 수 있다.
# <label> : 라벨을 붙여주는 태그
# for 속성 : 라벨을 붙이고자하는 태그의 id 값을 넣는 속성. 라벨을 붙이고 라벨을 클릭하면 해당 태그에 포인터가 이동된다.
# <button> : 버튼을 생성하는 태그. 기본적으로 submit 타입을 가지고 있으며, 누르면 정해놓은 동작이 수행된다.
# <form> : 특정한 폼을 지정하는 태그. 해당 폼 안에 있는 데이터들을 전달시킬 수 있는 폼을 생성한다.
# action 속성 : 해당 폼에 있는 데이터를 전달시킬 주소를 지정하는 속성
# method 속성 : 데이터를 전달할 때 전달되는 방식을 지정하는 속성.
get - 읽기 타입. url에 전달할 데이터가 ? 이후에 기입되어 전달된다.
post - 기본적으로 생성 타입. url에 전달할 데이터가 기입되지 않고 숨겨져서 전달된다.
! 즉, 중요한 정보를 전달할 때는 post 방식을 사용한다.
-->
- <input> : 입력할 수 있는 형식을 만드는 태그
- type 속성 : input 태그의 속성을 지정하는 속성
- text - 텍스트를 입력받는 유형
- password - 비밀번호를 입력받는 유형, 입력한 비밀번호를 암호화해서 보여준다.
- email - 이메일을 입력받는 유형, 만약 이메일 형식으로 입력하지 않으면 이메일 형식이 아니라는 에러 메세지가 나온다.
- submit - 버튼 같이 클릭하여 데이터를 전송하는 유형
- image - 이미지를 입력받는 유형. img 태그와 동일하게 src 속성과 alt 속성으로 이미지를 지정하거나 대체 텍스트를 나오게 할 수 있다.
- <label> : 라벨을 붙여주는 태그
- for 속성 : 라벨을 붙이고자하는 태그의 id 값을 넣는 속성. 라벨을 붙이고 라벨을 클릭하면 해당 태그에 포인터가 이동된다.
- <button> : 버튼을 생성하는 태그. 기본적으로 submit 타입을 가지고 있으며, 누르면 정해놓은 동작이 수행된다
- <form> : 특정한 폼을 지정하는 태그. 해당 폼 안에 있는 데이터들을 전달시킬 수 있는 폼을 생성한다.
- action 속성 : 해당 폼에 있는 데이터를 전달시킬 주소를 지정하는 속성
- method 속성 : 데이터를 전달할 때 전달되는 방식을 지정하는 속성.
- get - 읽기 타입. url에 전달할 데이터가 ? 이후에 기입되어 전달된다.
- post - 기본적으로 생성 타입. url에 전달할 데이터가 기입되지 않고 숨겨져서 전달된다.
! 즉, 중요한 정보를 전달할 때는 post 방식을 사용한다.
[실행한 결과]
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] 인스타그램 API 연동 및 데이터 크롤링 (1) | 2023.12.06 |
|---|---|
| [HTML] 구글 맵 위치 수정 (0) | 2023.11.28 |
| [HTML] 원하는 섹션으로 이동 (0) | 2023.03.09 |
| [HTML] 이미지 태그 (0) | 2023.03.09 |
| [HTML] anchor 태그 이동 경로 설정 파악 (0) | 2023.03.09 |