본문 바로가기
Web

HTML로만 html 회원가입 폼 만들기

by 비타민찌 2021. 7. 22.
728x90

회원가입 페이지를 만들 때 가장 기본이 되는 구조는 HTML의 form 태그입니다.  
이 글에서는 별도의 스크립트나 스타일 없이, 오직 HTML 코드만으로 회원가입 폼을 구성하는 방법을 정리했습니다.  
아이디, 비밀번호, 이메일, 이름, 주민등록번호 입력란 등을 순수 HTML 태그만으로 구현했습니다.

 

완성된 페이지:

 

 

코드 :

<html>

<head>
  <meta charset="utf-8">
  <title>회원가입 폼</title>
</head>

<body bgcolor='#CAC3B2'>

  <audio src="aoisan.mp3" loop autoplay="autoplay" controls="controls" muted>
  </audio>

  <form name="input" method="post" action="">
    <table border="1" weigth="600" align="center" cellspacing="0">
      <tr>
        <th colspan="5" weight="600" align="center" bgcolor="#99B6BD"><span id="star"></span>회원 기본 정보</th>
      </tr>
      <tr weight="800">
        <td align="center"><b><span id="star">* </span>아이디:<b></td>
        <td colspan="5">

          <input type="text" id="id" value="" size="20" maxlength="15" required />
          4~12자의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
      <tr>
        <td align="center"><b><span id="star">* </span>비밀번호:<b></td>
        <td colspan="5">
          <input type="password" id="pw" value="" size="20" onblur="checkPw()" required />
          4~12자의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
      <tr>
        <td align="center"><b style=" font-size:10pt"><span id="star">* </span>비밀번호확인:<b></td>
        <td colspan="5">
          <input type="password" id="repw" value="" size="20" required />

        </td>
      </tr>
      <tr>
        <td align="center"><span style="font-weight:bold"><span id="star">* </span>메일주소: </td>
        <td colspan="5">
          <input type="text" id="mail" value="" size="30" required />
          예) id@domain.com
        </td>
      </tr>
      <tr>
        <td align="center"><b><span id="star">* </span>이름: </b></td>
        <td colspan="5">
          <input type="text" id="name" value="" size="30" required />
        </td>
      </tr>
      <tr>
        <th align="center" colspan="5" bgcolor="#D4613E">개인 신상 정보</th>
      </tr>
      <tr>
        <td align="center"><b><span id="star">* </span>주민등록번호 :<b></td>
        <td colspan="5">
          <input type="text" id="id_num_1" value="" maxlength="6" size="8" required /> -</input>
          <input type="password" id="id_num_2" value="" maxlength="7" size="8" required /></input>

          예) 123456-1234567
        </td>
      </tr>
      <tr>
        <td align="center"><b>생일 :<b></td>
        <td colsapn="5">
        <td>
          <input type="text" style="width:80px" id="years" readonly />년
          <select id="month" name="month" style="width:50px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>월

          <select id="day" name="day" style="width:50px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>

          </select>일


        </td>

      <tr>
        <td align="center"><b>관심분야:</b></td>
        <td colspan="5">
          <input type="checkbox" name="favorite" value="컴퓨터">컴퓨터
          <input type="checkbox" name="favorite" value="인터넷">인터넷
          <input type="checkbox" name="favorite" value="여행">여행
          <input type="checkbox" name="favorite" value="영화감상">영화감상
          <input type="checkbox" name="favorite" value="음악감상">음악감상
        </td>
      </tr>
      <tr rowspan="5">
        <td align="center"><b>자기소개:<b></td>
        <td colspan="5">
          <textarea name="introdutcion" rows="5" cols="55"></textarea></td>
      </tr>
    </table>
    <br>
    <center>
      <input type="submit" name="join" value="회원 가입" align="middle">
      <input type="reset" name="reset" value="다시 입력" align="center">
  </form>
  </center>
</body>

</html>

 

 

위 코드는 HTML의 기본 태그만 사용하여 회원가입 폼을 만든 예시입니다.  
추후 자바스크립트를 적용하면 비밀번호 확인, 이메일 형식 검증 같은 기능을 추가할 수 있고,  
CSS를 활용하면 디자인을 개선할 수 있습니다.  
지금 단계에서는 HTML 구조만 이해하면 충분합니다.  

 

참고 자료:

1. 오디오 태그 :

https://yangbari.tistory.com/24

​

2. 달력 태그 :

https://blog.naver.com/PostView.nhn?blogId=heartflow89&logNo=221165375823&parentCategoryNo=&categoryNo=170&viewDate=&isShowPopularPosts=false&from=postView

​

3. 드롭다운 리스트 :

https://apost.kr/83

​

4. 배경 색 :

https://hianna.tistory.com/316

​

5. 리셋 버튼 :

http://www.homejjang.com/05/Reset.php

​

 

728x90
저작자표시 비영리 (새창열림)

'Web' 카테고리의 다른 글

[Web] 아파치-멀티 프로세스, 톰캣-멀티 쓰레드 이유는?  (1) 2022.11.22
SSL 인증서란? (SSL 인증서가 안전한 연결을 만드는 법, 공개키, 개인키, 세션키)  (0) 2022.11.14
[CORS] CORS란? (로컬 통신간의 CORS 에러와 해결)  (0) 2022.11.13
브라우저가 만든 쿠키~ 세션을 위해 구 웠 지  (12) 2022.08.22
jQuery | 자바스크립트와 제이쿼리 비교, 제이쿼리 사용법  (0) 2021.07.22

관련글

댓글

티스토리툴바