--> [HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기

[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기

form 태그는 웹 페이지의 내용을 다른 웹페이지 또는 웹 서버에 전송 할 때 사용됩니다. 단순히 텍스트만 보여주는 웹 페이지일 경우 필요가 없지만 데이터를 보낼 필요가 있는 웹 페이지에서는 반드시 사용해야 하는 태그입니다.  예를들어 회원가입을 하는 웹 페이지의 경우 회원가입을 위해 입력했던 정보를 서버로 전송을 해줘야지 회원가입 요청에 대한 처리가 이루어 질 수 있습니다. 



  1. form 태그


먼저 form 태그의 중요 속성들에 대해서 알아 보겠습니다.

  • action : form 내부의 데이터를 보내는 url 경로를 지정합니다.
  • method : 데이터를 보내는 방식을 지정합니다. post와 get 방식이 있습니다.
  • action : action에 의한 새로운 웹페이지가 열리는 방식을 지정합니다. 
  • autocomplete : form 내부의 입력요소들의 자동완성기능 활성화 여부 설정
  • name : form 식별을 위한 이름
아래 html 소스로 간단한 형태를 살펴 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action ="process/addUser" method = "post">
        <h1>로그인</h1>
        <label>아이디</label> <input type = "text" name = "id"> <br/>
        <label>비밀번호</label> <input type = "password" name = "password"> <br/>
        <input type = "submit" value = "회원가입">
    </form>
</body>
</html>
cs


<body></body> 내부에 <form> 태그가 정의되어 있습니다. post 전송방식으로 "process/addUser" 경로에 form 태그 내부의 데이터를 전송하게 됩니다.


총 3개의 input 태그가 사용되었는데 type이 전부 다른 것을 확인 할 수 있습니다.


  • text : 텍스트를 입력합니다.
  • password : password를 입력하는 형식으로 textbox에 입력 시 '*'로 표시됩니다.
  • submit : input의 내용들을 action에 정의한 경로로 데이터를 전송합니다.

  2. 다른 Input 태그 type 살펴보기


위에서 말씀드린 type들 말고도 다른 type들도 소개하고자 합니다. 

1
2
3
4
5
6
    <form action ="process/addUser" method = "post">
         <h1>로그인</h1>
         <input type = "radio" name = "gender" value = "남">남
         <input type = "radio" name = "gender" value = "여">여
         <input type = "submit" value = "회원가입">
    </form>
cs


첫 번째 type은 "radio" 입니다. 여러 선택 요소들중에서 하나만 선택이 가능합니다. 또한 선택 요소들끼리 그룹화하기 위해서는 반드시 name 속성값을 통일 시켜줍니다. 위에는 name 속성값이 "gender"인 선택요소들을 radio 형태로 보여줍니다. 다음은 checkbox 입니다.


1
2
3
4
5
6
    <form action ="process/addUser" method = "post">
        <h1>로그인</h1>
        <input type = "checkbox" name = "lan" value = "eng" checked = "checked"> 영어
        <input type = "checkbox" name = "lan" value = "kor"> 한국
        <input type = "checkbox" name = "lan" value = "jap" checked = "checked"> 일어
    </form>
cs


radio와는 다르게 다중 선택이 가능합니다. 마찬가지로 선택 요소들을 그룹화 하기 위에 name 속성값을 "lan"으로 통일시켜 주었고 checked 속성을 이용하여 default로 check 여부를 설정 할 수 있습니다. 다음은 file 속성값입니다.


1
2
3
4
    <form action ="process/addUser" method = "post">
        <h1>로그인</h1>
        <input type = "file" name = "">        
    </form>
cs


type 속성값으로 "file"을 지정하게 되면 위와 같이 파일을 선택할 수 있습니다.



댓글(0)

Designed by JB FACTORY