폼 예제보기

form작성 방법

로그인 폼 태그

<div class="login-form">
            <form action="" id="login">
                <input type="text" name="id" id="id" class="id" placeholder="아이디">
                <input type="password" name="psw" id="psw" class="psw" placeholder="비밀번호">
                <button class="login-bt"><span class="login-icon"></span>로그인</button>
                <button class="login-bt naver"><span class="login-icon"></span>네이버 로그인</button>
                <input type="checkbox" name="check" id="check" class="check">아이디 저장
                <div class="m-group">
                    <a href="member.html"><strong>회원가입</strong> | </a>
                    <a href="#">아이디 찾기 | </a>
                    <a href="#">비밀번호 찾기</a>
                </div>
            </form>
        </div>

css

.login-form{
    width:80%;
    padding:20px;
    border:2px solid #999999;
    clear:both;
    margin:auto;
    position:relative;
    top:20px;
}
.id,
.psw{
    display:block;
    margin-bottom:10px;
    width:100%;
    padding:10px;
    font-size:20px;
    border:1px solid #cccccc;
}
.login-bt{
    width:100%;
    padding:10px;
    font-size:20px;
    border:1px solid #cccccc;
    background:transparent;
    color:#333333;
    cursor:pointer;
    display:block;
    margin-bottom:10px;
}
.login-icon{
    height:25px;
    border-right:1px solid #cccccc;
    display:inline-block;
    float:left;
    padding:0 40px;
    background:url(images/logo.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.check{
    margin-top:10px;
}
.m-group{
    margin-top:10px;
}
.m-group strong{
    color:darkblue;
}

회원가입 폼 태그

<div class="member-form">
    <form action="" id="member">
        <h4>아이디</h4>
        <div class="m-form">
            <input type="text" name="m-id" id="m-id" class="m-id" maxlength="20" >
        </div>
        <h4>비밀번호</h4>
        <div class="m-form">
            <input type="password" name="m-psw" id="m-psw" class="m-psw"  >
            <span class="material-icons lock">lock_outline</span>
        </div>
        <h4>비밀번호 재확인</h4>
        <div class="m-form">
            <input type="password" name="m-psw2" id="m-psw2" class="m-psw2"  >
            <span class="material-icons lock">lock_outline</span>
        </div>
        <h4>이름</h4>
        <div class="m-form">
            <input type="name" name="m-name" id="m-name" class="m-name"  >    
        </div>
        <h4>생년월일</h4>
        <div class="m-form2">
            <input type="text" name="year" class="year" id="year">
            <select class="month">
                <option >월</option>
                <option value="01" >1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                
            </select>
            <input type="text" name="day" class="day" id="day">
        </div>
        <h4>성별</h4>
        <div class="m-form2">
            <input type="radio" name="sex">남성
            <input type="radio" name="sex">여성
        </div>
                    

    </form>
</div>

css

html,body{
    background:#efefefef;
}
.m-logo{
    text-align:center;
    margin-top:50px;
}
.member-form{
    padding:20px;
    border:1px solid #cccccc;
    width:70%;
    margin:auto;
}
.m-form{
    width:100%;
    padding:10px;
    border:1px solid #cccccc;
    background:white;
}
.m-id,
.m-psw,
.m-psw2,
.m-name{
    border:none;
    font-size:20px;
    width:100%;
    
    
}
h4{
    margin:5px;
}
.m-psw2,
.m-psw{
    width:90%;
}
.lock{
    float:right;
}
.m-form2{
    width:100%;
}
.year,
.month,
.day{
    padding:10px;
    font-size:20px;
    width:31%;
    vertical-align:bottom;
    border:1px solid #cccccc;
}
.month{
    margin:0 15px;
}