HTML - CSS/html 예시

[HTML] 회원가입서

congs 2023. 4. 5. 14:38

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form 만들기</title>
    <style>
        .pink{
            background:linear-gradient(to right, pink, white);}

    </style>
</head>
<body>
    <h1>회원가입<img src="/image/냥3.jpg" alt="고양이 사진" width="300px" height="200px"></h1>
    <form action="" >
        <table border="1" bordercolor="white" class="pink">
            <tr>
                <td colspan="3">회원가입 | Member Private Information 약관동의 실명확인 회원가입 정보수정 </td>
            </tr>
            <tr>
                <td colspan="3">기본정보 입력 || 표시는 필수항목이므로 반드시 입력해야 합니다. </td>
            </tr>
            <tr>
                <td>아이디</td>
                <td colspan="2"><input type="text" name="id"><button type="submit"> 중복검색</button> 영문</td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td colspan="2"><input type="text" name="pw">-> 재확인 <input type="text"></td>
            </tr>
            <tr>
                <td>비밀번호 힌트</td>
                <td colspan="2"><input type="text" name="pw2"> 비번 분실 - 조회시 참고할 내용 </td>
            </tr>
            <tr>
                <td>이름(본명)</td>
                <td colspan="2"><input type="text" name="name"> -> 한글</td>
            </tr>
            <tr>
                <td>닉네임(별명)</td>
                <td colspan="2"><input type="text" name="nickname"><button type="submit"> 중복검색</button> 한글, 영문</td>
            </tr>
            <tr>
                <td>전자메일주소</td>
                <td><input type="email" name="email"></td>
                <td><input type="checkbox">비공개</td>
            </tr>
            <tr>
                <td>생년월</td>
                <td>
                    <select name="year" id="">
                        <option value="">년</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                </select>
                <select name="month" id="">
                    <option value="">월</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <input type="radio" name="calender">음
                <input type="radio" name="calender" checked>양
                </td>
                <td><input type="checkbox">비공개</td>
            </tr>
            <tr>
                <td>성 별</td>
                <td><input type="radio" name="gender"> 남자
                    <input type="radio" name="gender"> 여자
                </td>
                <td><input type="checkbox" disabled>비공개</td>
            </tr>
            <tr>
                <td>우편번호</td>
                <td colspan="2">
                    <input type="number">-<input type="number"> 
                    <button type="submit">찾아보기</button>
                </td>
            </tr>
            <tr>
                <td>주소</td>
                <td>
                    <div><input type="text"></div>
                    <div><input type="text"> <- 나머지 주소</div>
                </td>
                <td><input type="checkbox" checked>비공개</td>
            </tr>
            <tr>
                <td>일반전화 번호</td>
                <td>
                    <select name="tel1" id="">
                        <option value="">국번</option>
                        <option>032</option>
                        <option>02</option>
                        <option>052</option>
                    </select>
                    -<input type="number" name="tel1_1">-<input type="number" name="tel1_2">
                </td>
                <td><input type="checkbox" checked>비공개</td>
            </tr>
            <tr>
                <td>휴대전화 번호</td>
                <td>
                    <select name="tel2" id="">
                        <option value="">국번</option>
                        <option>010</option>
                        <option>061</option>
                        <option>070</option>
                    </select>
                    -<input type="number" name="tel2_1">-<input type="number" name="tel2_2">
                </td>
                <td><input type="checkbox" checked>비공개</td>
            </tr>
            <tr>
                <td>홈페이지</td>
                <td><input type="url" value="http://" name="page"></td>
                <td><input type="checkbox">비공개</td>
            </tr>
            <tr>
                <td>소개, 인사말</td>
                <td colspan="2"><textarea name="소개" id="" cols="30" rows="5" placeholder="반갑습니다"></textarea></td>
            </tr>
            <tr>
                <td colspan="3">추가정보 입력</td>
            </tr>
            <tr>
                <td>사진첨부</td>
                <td colspan="2">
                    <div><button type="submit">파일선택</button>선택된 파일 없음</div>
                    <div>200 X 200 픽셀 이하 크기만 허용</div>
                </td>
            </tr>
            <tr>
                <td>이름표시 아이콘</td>
                <td colspan="2">
                    <div><button type="submit">파일선택</button>선택된 파일 없음 
                        <button type="submit">찾아보기</button></div>
                    <div>25 X 25 픽셀 이하 크기만 적용</div>
                </td>
            </tr>
            <tr>
                <td>혼인여부</td>
                <td>
                    <input type="radio" name="marrige">미혼
                    <input type="radio" name="marrige">기혼
                    <input type="radio" name="marrige">이혼
                    <input type="radio" name="marrige">교제중
                </td>
                <td><input type="checkbox">비공개</td>
            </tr>
            <tr>
                <td>관심분야</td>
                <td colspan="2">
                    <select name="like" id="">
                        <option value="">관심분야</option>
                        <option>수영</option>
                        <option>런닝</option>
                        <option>등산</option>
                        <option>요가</option>
                        <option>근육빵빵</option>
                        <option>딩굴딩굴</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>캐릭터 선택</td>
                <td colspan="2">
                    <button type="submit">파일선택</button>선택된 파일 없음
                </td>
            </tr>
            <tr>
                <td>메일링 수신거부</td>
                <td colspan="2"><input type="checkbox"> 메일링 수신 거부시 체크</td>
            </tr>
            <tr>
                <td>쪽지 수신거부</td>
                <td colspan="2"><input type="checkbox"> 쪽지 수신 거부시 체크</td>
            </tr>
            <tr>
                <td>전체 비공개</td>
                <td colspan="2"><input type="checkbox"> 회원등록정보 전체 비공개시 체크</td>
            </tr>
            <tr style="text-align: center;">
                <td colspan="3" >
                    <button type="submit">입력완료전송</button>
                    <button type="reset">다시 입력하기</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

form 만들기

회원가입고양이 사진

회원가입 | Member Private Information 약관동의 실명확인 회원가입 정보수정
기본정보 입력 || 표시는 필수항목이므로 반드시 입력해야 합니다.
아이디 영문
비밀번호 -> 재확인
비밀번호 힌트 비번 분실 - 조회시 참고할 내용
이름(본명) -> 한글
닉네임(별명) 한글, 영문
전자메일주소 비공개
생년월 비공개
성 별 남자 여자 비공개
우편번호 -
주소
<- 나머지 주소
비공개
일반전화 번호 -- 비공개
휴대전화 번호 -- 비공개
홈페이지 비공개
소개, 인사말
추가정보 입력
사진첨부
선택된 파일 없음
200 X 200 픽셀 이하 크기만 허용
이름표시 아이콘
선택된 파일 없음
25 X 25 픽셀 이하 크기만 적용
혼인여부 미혼 기혼 이혼 교제중 비공개
관심분야
캐릭터 선택 선택된 파일 없음
메일링 수신거부 메일링 수신 거부시 체크
쪽지 수신거부 쪽지 수신 거부시 체크
전체 비공개 회원등록정보 전체 비공개시 체크

'HTML - CSS > html 예시' 카테고리의 다른 글

[HTML] table 빙고판  (0) 2023.04.05
[HTML] 로그인 페이지  (0) 2023.04.05
[HTML] 회원가입서  (0) 2023.04.04