로그인 페이지 만들기

로그인 페이지 만들기 - html

dreamaccomplirar 2022. 11. 3. 23:34

html을 가지고 로그인 페이지를 만들려고 한다.

지난번 만들었던 것과 조금 수정을 하여 만들어보았다.

태그 별로 어떤 것을 의미하는지 알아보면 좋을것 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹페이지 구축</title>
    <style>
        .wrap {text-align: center;}
    </style>
</head>
<body>
<form method="post" action="page1.php">
<div class="wrap">
        <h1>Hi! This is HJ World</h1>
        <h5>Please enter your ID and PW</h5>
        <p>ID: <input type="text" name="id"></p>
        <p>PW: <input type="password" name="pw"></p>
        <p> <input type="submit" value="login">&nbsp&nbsp<input type="submit" value="register"</p>
</div>
</form>
</body>
</html>

!DOCTYPE html : 어떤 버전의 html로 작성되었는지
meta charset="UTF-8" : 어떻게 인코딩 할것인지
text-align: center : 텍스트 정렬 방향(중앙)
form method="post" : 서버에 데이터를 어떤 방식으로 전달할 것인지 (보통 get/post 중 선택)
자세한 설명 참고 : http://www.tcpschool.com/html-tag-attrs/form-method
action="page1.php" : 데이터를 어디로 보낼것이지
h : 제목에 해당됨 (h1 ~ h6 있으며, 숫자가 높을 수록 글자 크기가 작아진다.)
p : 문단 구분
intput type : 입력받을 데이터 타입
자세한 설명 참고 : http://jun.hansung.ac.kr/cwp/htmls/HTML%20Input%20Types.html
&nbsp : 띄어쓰기

위와 같이 완성 하였는데, 여기서 눈에 보이는 동작만 생각해서 login 과 register 부분을

<button> 태그를 사용하면 나중에 입력받은 ID와 PW의 정보를

다음 페이지인 page1.php로 전달하지 못하니 주의하길 바랍니다.