Computer Science/Web

HTML] 회원가입 폼

TwinParadox 2017. 3. 1. 21:55
728x90

HTML] 회원가입 폼


HTML로 작성한 회원가입 폼이다.

지난 기말 텀 프로젝트를 하면서 만들었는데,

최초 만들었던 폼에 비해서 그나마 좀 나아진 모습.


table의 크기를 절대적으로 지정해놓아서

요즘 같은 반응형 웹 시대에 어울리지 않다고 뭐라하는 사람이 있다면 할 말은 없다.


다음 우편번호 api를 적용해놓아서 상단부에 자바스크립트 함수도 존재하지만,

해당 소스는 회원가입 폼이랑은 거리가 멀어서 제외했다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<center>
    <form action="register.php" method="post" name="twin">
        <table width="800">
            <tr height="40">
                <td align="center"><b>[회원가입]</b></td>
            </tr>
        </table>    
        <table width="700" height="600" cellpadding="0" style="border-collapse:collapse; font-size:9pt;">
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">회원 ID</td>
                <td><input type="text" name="wUserID" />&nbsp;<a href="javascript:id_check()">[ID 중복 검사]</a></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">비밀번호</td>
                <td><input type="password" name="wUserPW" id="pw" onchange="isSame()" /></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">비밀번호 확인</td>
                <td><input type="password" name="wUserPWConfirm" id="pwCheck" onchange="isSame()" />&nbsp;&nbsp;<span id="same"></span></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">이 름</td>
                <td><input type="text" name="wUserName" /></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">성 별</td>
                <td>
                    남 성<input type="radio" name="wUserGender" value="1" checked />&nbsp;여 성<input type="radio" name="wUserGender" value="2"/>
                </td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">집전화</td>
                <td><input type="tel" name="wUserHomePhone" /></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">휴대전화</td>
                <td><input type="tel" name="wUserCellPhone" /></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr class="register" height="30">
                <td width="5%" align="center">*</td>
                <td width="15%">이메일</td>
                <td><input type="email" name="wUserEmail" /></td>
            </tr>
            <tr height="7">
                <td colspan="3"><hr /></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="15%">주 소</td>
                <td>
                    <input type="text" size="10" name="wPostCode" id="postcode" placeholder="우편번호" readonly="readonly" onclick="DaumPostcode()">
                    <input type="button" onclick="DaumPostcode()" value="우편번호 찾기"><br><br />
                    <input type="text" size="30" name="wRoadAddress" id="roadAddress" placeholder="도로명주소" readonly="readonly" onclick="DaumPostcode()">
                    <input type="text" size="30" name="wJibunAddress" id="jibunAddress" placeholder="지번주소" readonly="readonly" onclick="DaumPostcode()">
                    <br /><span id="guide" style="color:#999;font-size:10px;"></span>   
                    <br /><br /><input type="text" name="wRestAddress" placeholder="나머지 주소" size="70" />
                </td>
            </tr>
 
        </table>
        <br />
        <table>
            <tr height="40">
                <td><input width="120" type="image" src="img/button/btn_join.png" />&nbsp;<a href="index.php"><img src="img/button/btn_cancel.png" width="120" /></a></td>
            </tr>
        </table>
    </form>
</center>
 
cs


728x90