지난 글에서 HTML 기본 구조에 대해 알아보았다.
이번 글에서는 HTML 문서에 폼을 작성해 아이디를 받아내는 폼 , 비밀번호를 받아내는 폼 , 로그인 버튼을 만들어
간단하게 실제로 동작하진 않지만 뼈대만을 생성해 그럴싸한 로그인 페이지를 만들어보겠다.
여기서 폼(Form) 이란?
웹 페이지에서 사용자로부터 정보를 입력받아 서버로 보내 처리하거나 클라이언트에서 처리해주는 도구이다.
HTML의 폼(form) 요소는 다음과 같은 구조를 가진다.
<form action="서버스크립트URL" method="HTTP메소드">
<!-- 입력 필드, 버튼 등의 폼 요소 -->
</form>action - 사용자로부터 입력받은 정보를 어떤 서버스크립트나 웹페이지로 전송할지 지정해주는 요소이다.
method - HTTP 요청 메서드를 설정한다. 일반적으론 "GET" 이나 "POST"를 사용한다.
GET은 데이터를 URL에 추가하여 전송하고 POST는 요청 본문(body)에 작성하여 전송한다.
<!DOCTYPE html>
<html>
<head>
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인</h1>
<form action="login.php" method="post">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="userpw">비밀번호:</label>
<input type="text" id="userpw" name="userpw" required><br><br>
<input type="submit" value="로그인 버튼입니다"
</form>
</body>
</html>label - 사용자에게 해당 공간이 어떤 입력을 위한 공간인지 설명하기 위한 라벨이다.
for - 해당 라벨은 무엇을 위한 라벨인지 연결시켜 명확하게 구분 지어주는 역할을 한다.
따라서 <label for="username">아이디:</label> 라인은
입력받을 공간에 아이디: 라는 라벨이 붙어있고 사용자가 입력하기 위해 해당 공간을 클릭하면 사라지며 입력받을 준비를 한다.
input - 입력받는데 사용되며 바로뒤에 type 태그에 text를 붙여 해당 공간을 텍스트 형식으로 입력받는것을 설정해주었다
id - HTML 요소를 고유하게 식별하기위해 설정해주는 태그. "username" 으로 설정해주었기때문에
해당 공간의 id는 username으로 식별되며 CSS를 설정하거나 JS 코드에서 해당 공간을 조작하려면 고유의 id 를 사용하면 된다.
name - 해당 공간의 이름은 id로 설정되지 않고 name으로 설정된다. id는 단순히 식별자로 취급하고 이름은 name으로 취급. 또 name이 해주는 역할은 입력받은 데이터를 웹 서버로 보낼때 사용된다. 웹 서버에서는 name으로 해당 공간에 입력받은 데이터를 찾아낼 수 있다.
required - 해당 공간은 필수 입력 칸이라는걸 나타낸다. 사용자가 해당 칸을 비우고 제출할 수 없다.
br - 줄바꿈
submit - 버튼 형태의 폼이다. 해당 버튼을 누르면 사용자가 입력한 데이터들을 서버로 보낸다.
value - 버튼안에 값을 넣어주는 역할
로그인
'과제' 카테고리의 다른 글
| JS (Javascript) 기본 구조 (0) | 2023.09.10 |
|---|---|
| HTML , CSS 로 메인 페이지와 로그인 페이지 만들기 (0) | 2023.09.09 |
| HTML 문서 작성 연습 (0) | 2023.09.06 |
| HTML , JS , CSS (0) | 2023.09.06 |
| 플라스크 (Flask) 코드 해석 (1) | 2023.07.31 |