계발하는 개발자

[HTML] <form>태그를 활용한 로그인창 만들기 본문

📌 Language/HTML

[HTML] <form>태그를 활용한 로그인창 만들기

dev_genie 2022. 12. 1. 16:06

우리가 특정 사이트에 로그인 할때, 해당 계정의 접속을 위해 아이디와 비밀번호를 입력하라는 로그인 관문을 맞닥뜨리게 된다.

내가 기존에 가입한 사이트는 데이터베이스 서버로 나의 계정 정보를 이미 가지고 있기 때문에,

나의 아이디 & 비밀번호를 입력해서 서버에 내 정보와 일치하면 로그인을 할 수 있다.

이때 웹페이지에서 서버로 내 계정 정보를 보내야 되는데 이때 사용되는 HTML의 태그가 FORM 이다! 

 

📂 FORM(폼) 태그란?

사용자로부터 입력받은 양식 전체를 감싸는 태그로,

form태그 내부에 있는 input 태그에 회원가입이나 로그인, 글 작성에 필요한 정보들을 입력 후 제출하면

웹사이트에서 받은 사용자 정보를 바탕으로 사용자에게 할당된 데이터를 서버(=백엔드)로 전송한다.

 

Form 속성
Form 태그의 속성 설명
method 전송 방식 선택

- get : 256~4096 byte까지만 전송 가능, 브라우저에 의해 저장되기 때문에 '보안의 취약점'이 존재
- post : 입력 내용의 길이에 제한 X, 브라우저에 의해 저장되지 않기 때문에 '보안성'이 높음
name form의 이름
서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action form을 전송할 서버 쪽의 script 파일을 지정
전송되는 서버 url 또는 html 링크
target action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete 자동 완성.
on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과
비슷한 값들을 드롭다운 옵션으로 보여준다.
enctype 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시

- application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함. 
- multipart/form-data 모든 문자를 인코딩하지 않음을 명시함.
  이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함. 
- text/plain 공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시함.
novalidate 폼 데이터(form data)를 서버로 제출할 때 해당 데이터의 유효성을 검사하지 않음을 명시

 

Form 요소 (input)

사용자가 정보를 입력해야 하는 부분을 만들어야 할 때 사용하며, 

form 태그는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

<body>
<!-- form action은 정보를 어디서 보내서 어디서 받을 것인지 경로쓰는 것-->
    <form action="ok.php">
        <input type="text" id="id" name="id" placeholder="아이디" title="아이디">
<!-- br: 인라인 요소를 한 줄 내려쓰기-->
        <br>
        <input type="password" id="pw" name="pw" placeholder="비밀번호" title="비밀번호">
        <br>
        <input type="email" id="email" name="email" placeholder="이메일" title="이메일">
        <br>
        <input type="submit" value="로그인">
    </form>
</body>

 

Input 속성
input 속성 설명
readonly 읽기 전용 필드로 만들기
placeholder 힌트 표시(필드 클릭시 내용 사라짐)
autofocus 페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것
autocomplete 자동완성 설정
max / min <input> 필드의 최대값과 최소값 지정
maxLength 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
step 숫자의 간격 설정
<input> 이 date, datetime, datetime-local, month, week,time, number, range일 경우만 사용가능
required 필수 입력 필드 지정(빈칸이면 안 넘어감)
type input 태그의 타입을 지정 (바로 다음에서 자세히)
단순히 텍스트입력창인지 이메일, 전화번호 양식 혹은 파일첨부, 동영상 첨부 인지

 

대표적인 input type 요소는 다음과 같다.

  • input type="text" : 아이디
  • input type="password" : 비밀번호
  • input type="submit" value="로그인"

 *양식의 제출을 뜻하는 submit 유형의 경우, 반드시 특정 value 값을 지정해줘야 한다

 

Input type 속성 
input type 속성 설명
hidden 서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 X)
text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
<input type="text" value="write email or phone number" size="10" maxlength="5" />
search 검색상자
(크롬이나 사파리에서만 사용 가능하며 크로스브라우징이 안되기에 잘 사용하지는 않는다.)
tel 전화번호 입력 필드
<input type="tel" />
url URL 주소를 입력 필드
<input type="url" />
email 메일주소 입력 필드
'@' 가 들어간 이메일 형식인지 검사해준다.
<input type="email" id="useremail" name="useremail" />
password 비밀번호 입력 필드
<input name="password" required type="password" placeholder="Password" />
number 숫자를 조절할 수 있는 화살표
range 숫자 범위를 조절할 수 있는 슬라이드 막대
min 과 max로 범위를 지정하고 step 으로 증가 값을 세팅할 수 있다.
참고로 기본 세팅은 파란색으로 되어있는데, CSS로 커스터마이징을 할 수 있다.
다만 각 브라우저마다 가능한 정도가 다르니 확인할 필요가 있다.
<input type="range" id="volume" name="volume" min="0" max="11" />
color 색상표
checkbox 체크박스 (2개이상 선택 가능)
<input type="checkbox" id="cookie" name="cookie" checked>
<label for="cookie">Cookie</label>
radio 라디오 버튼 (1개만 선택 가능)
<input type="radio" id="apple" name="drone" value="apple" checked>
<label for="huey">Apple</label>
datetime 국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
datetime-local 사용자가 있는 지역을 기준으로 한 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
date 사용자 지역을 기준으로 한 날짜(연, 월, 일)
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31">
month 사용자 지역을 기준으로 한 날짜(연, 월)
week 사용자 지역을 기준으로 한 날짜(연, 주)
time 사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
button 버튼을 만들어 클릭했을 때 이벤트를 발생시킬 수 있다. Submit과는 차이가 있다.
JavaScript를 사용해 효과를 만들면 된다.
<input type="button" value="새 창 열기" onclick="window.open()" />
file 파일을 첨부할 수 있는 버튼
(accept를 사용해 제출 가능한 파일 양식을 지정할 수도 있다.)
<input type="file" accept=".doc,.docx" />
submit 서버전송 버튼
<input type="submit" value="Log In" />
image submit 버튼 대신 사용할 이미지
reset 리셋 버튼
사용자가 입력한 모든 정보를 지울 수 있다. 해당 Form에 입력했던 내용들을 처음부터 입력하고 싶을 때 활용함.
<input type="reset" />

 

👇🏻 결과 화면

 

만약 위 3가지 순서대로 입력한 후 출력했다면 위와 같은 블럭요소(한 줄)로 표현될거다

아이디, 비번, 로그인 버튼을 각각 한 줄씩 띄우려면 어떻게 해야할까?

이럴 때 필요한 게 바로 <br>태그다. <br> 태그는 텍스트를 끊고 싶은 지점에 삽입하면 된다.

 

그러면 위 같은 화면이 나타날건데, 이러면 뭐가 아이디고 비번 입력창인지 보기가 힘들다.

따라서 각 입력창 안에 표시를 해주면 좀더 깔끔하게 볼 수 있겠지?

 

placeholder 속성 요소를 사용하면 해당 박스의 기능을 쉽게 파악할 수 있게 해준다.

실제로 네이버에서도 로그인창을 만들 때, placeholder 요소가 들어가는 것을 살펴볼 수 있다.

 

 

이렇게 이미 만들어진 웹사이트의 프로그래밍 코드를 참고해서

나만의 코드를 계속 작성해나다보면 실력이 쑥 쑥 늘 것만 같다 👏👏🥰

LIST

'📌 Language > HTML' 카테고리의 다른 글

[HTML] 버튼에 타입을 명시하는 이유? (ft. button type="button")  (0) 2023.02.16
[HTML] 연속된 공백 처리 방법들(ft. 띄어쓰기 방법)  (0) 2023.02.16
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!