만약 이메일과 비밀번호를 로그인하는 창을 만들려고 한다면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script src="../js/bootstrap.bundle.min.js"></script>
</head>head 문구에는 부트스트랩에서 css와 js파일을 걸어놓았다.
<body>
<div class="container mt-5">
<form action="/login" method="post">
<div class="form-floating mb-3">
<input
type="text"
id="email"
name="member_email"
placeholder="이메일을 입력해주세요"
class="form form-control"
/>
<label for="email">email</label>
</div>
<div class="form-floating">
<input
type="password"
name="member_password"
placeholder="비밀번호를 입력해주세요"
class="form form-control"
/>
<label for="password">password</label>
</div>
<input type="submit" value="login" class="btn btn-primary mt-3" />
<!-- http://127.0.0.1:5500/login?member_email=asdfasdf -->
<!-- http://127.0.0.1:5500/login?member_email=aaa&member_password=1234 -->
</form>
</div>
</body>
</html>사용자로부터 입력을 받아서 어딘가(서버)로 보낼 때 사용한다
- action : 목적지(보통 서버에서 처리할 주소를 작성한다.
- method : 전송방식을 지정한다.
- get : 입력값이 주소창에 노출된다. ( 기본 )
- post : 입력값이 노출되지 않는다.
- mt는 margin top이며 , me , ms , mb 등이 사용될 수 있다.
<input> 태그는 입력을 받는 태그이다. 종료태그는 사용하지 않는다.
label에 대해서
- label은 폼의 양식에 이름 붙이는 태그이다.
- 주요 속성은 for이며 label의 for의 값과 양식의 id의 값이 같으면 연결된다.
- label을 클릭하면 연결된 양식에 입력할 수 있도록 하거나 , 체크를 하거나 , 체크를 해제한다.
간단하게 만들어 볼 수 있었다.
'Visual Studio Code > Visual Studio Code icia 33일차' 카테고리의 다른 글
| Visual Studio Code form에 대해서 - 2 (0) | 2023.04.07 |
|---|---|
| Visual Studio Code Buttons에 대해서 (0) | 2023.04.07 |
| Visual Studio Code Grid에 대해서 (0) | 2023.04.07 |
| Visual Studio Code MediaQuery에 대해서 (0) | 2023.04.07 |
| Visual Studio Code float로 layout 지정하기 (0) | 2023.04.07 |
