basic/HTML, CSS

day 22 실습(2) - 회원가입 from 만들기

못지(Motji) 2021. 5. 25. 22:02

CSS 활용하여 회원가입 from 만들기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <style>
        #wrapper {
            width: 55%;
            margin: auto
        }
        h1 {text-align: center; background-color: }
        table {
            border: 1px solid #444444;
            width: 100%;
        }
        th, td {
            border: 1px solid #444444;
            padding: 15px;
          }
        a:hover {background-color: yellowgreen;}
    
    </style>
</head>
<body>
    <div id="wrapper">
        <h1>회원가입</h1>
        <form>
            <table>
                <tr>
                    <td>아이디</td> 
                    <td colspan="3"><input type="text" required> <br/></td>
                </tr>
                <tr>
                    <td>비밀번호</td> 
                    <td colspan="2"><input type="password" required> <br/></td>
                </tr>
                <tr>
                    <td>비밀번호확인</td> 
                    <td colspan="2"><input type="password" required> <br/></td>
                </tr>
                <tr>
                    <td palceholder="">이름</td> 
                    <td colspan="2"><input type="text" required> <br/></td>
                </tr>
                <tr>
                    <td>휴대전화</td>
                    <td>
                        <input type="text" /> 
                        <input type="text" />
                        <input type="text" />
                    </td>
                    <td>
                        <select name="telecom">
                            <option value="SKT"> SKT </option>
                            <option value="LGU+"> LGU+ </option>
                            <option value="KT"> KT </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>성별</td> 
                    <td colspan="2">
                        <input type="radio" name="gender" value="male"/> 남자
                        <input type="radio" name="gender" value="female"/> 여자
                    </td>
                </tr>
                    <tr>
                    <td>생년월일</td> 
                    <td colspan="2">
                        <input type="date" name="date" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <input type="checkbox"> 개인정보 활용 동의 <br/>
                        <input type="checkbox"> 마케팅 활용 동의</td>
                </tr>
                <tr>
                    <td colspan="4">
                        <input type="submit" value="가입">
                        <input type="reset" value="다시작성">
                    </td>
                </tr>       
            </table>
        </form>
    </div>
</body>
</html>

🔎 미리보기

회원가입

아이디
비밀번호
비밀번호확인
이름
휴대전화
성별 남자 여자
생년월일
개인정보 활용 동의
마케팅 활용 동의

💬  style은 코드블럭도 같이 적용이 되서 뺌!

'basic > HTML, CSS' 카테고리의 다른 글

HTML 기본중 기본 스크립트 파일 추가 태그  (0) 2022.02.16
day 22 실습 - CSS  (0) 2021.05.25
day 22 - CSS  (0) 2021.05.25
day 21 실습 (2) - HTML (이력서 양식 만들기)  (0) 2021.05.24
day 21 실습 - HTML 태그  (0) 2021.05.24