본문 바로가기
:D/html css

회원가입 form 작성

dev_bang 2021. 5. 26. 18:13

html

<!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>SIGN UP</title>
  <style>
  * { box-sizing:border-box; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

/* basic stylings ------------------------------------------ */
.container 		{ 
  width:70%; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
  color:#999; 
}
h2 		 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
p.ps {
  font-size: .7rem;
  text-align: left;
  margin-top: 5px;
  color:#999
}
em {
  color: #f45702;
  font-weight: bold;
}

/* form starting stylings ------------------------------- */
.form-group 			  { 
  position:relative; 
  margin-bottom:35px; 
}
input 				{
  font-size:1rem;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
}
.form-group > input.left {
  width: 50%;
  float:left;
}
.form-group > input.right {
  width: 50%;
  float:right;
}
.hyphen {
  position: absolute;
  top:auto;
  left:50%;
  margin-left: -15px;
  color: #999;
}

input:focus 		{ outline:none; }

/* LABEL ======================================= */
.form-group .form-label 				 {
  color:#999; 
  font-size:1rem;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.form-group > input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:.7rem;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:3px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}
input.p_id ~ .bar:before, input.p_id ~ .bar:after {
  bottom: -40.8px;
  height: 3px;
}
.tel_wrap > input ~ .bar:before, .tel_wrap > input ~ .bar:after {
  bottom: -41.8px;
  height: 3px;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* radio */
.radio-group {
  display: flex;
  padding: 20px 20px 20px 5px;
  position: relative;
}
.radio-group p {
  color:#999; 
  font-size:1rem;
  font-weight:normal;
  width: 30%;
  height:100%;
  text-align: left;
}
.radio_wrap {
  width: 70%;
  display: flex;
  align-items: center;
}
.radio-group #female + label {
  top:15px;
  font-size:1rem;
}
.radio-group #male + label {
  top:15px;
  font-size:1rem;
  right:0;
}
.radio-group input {
  height:20px;
  width: 25%;
}

/* 생년월일 */
.form-group input[type="date"] {
  width: 75%;
  float:right;
}

/* 전화번호 드롭다운 */
.tel_wrap {
  padding-top:35px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #757575;
}
.tel_wrap .form-label {
  padding: 35px 10px 10px 0;
}
.tel_wrap input {
  float: left;
  width:28.333%;
  border-style: none;
}
.tel_wrap .hyphen {
  left:70%;
}
/* ===== Select Box ===== */
.tel_sel {
  float:left;
  margin-left: 15%;
  width:28.333%;
  position: relative;
  text-align: center;
  box-sizing: border-box;
}
.tel_sel select {
  cursor: pointer;
  font-size:1rem;
  width: 100%;
  padding: 10px 10px 10px 5px;
  border-radius: 2px;
  border-style: none;
}
.tel_sel::before {
  position: absolute;
  right: 5px;
}
.tel_sel:focus-visible {
  border-style: none;
}
.tel_sel:active::before, .tel_sel:focus-visible::before{
  border-style: none;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

/* E-mail */
.form-group:nth-child(9) {
  position: relative;
}

.email-wrap {
  width: 50%;
}

.email-wrap + span {
  position:absolute;
  left: Calc(50% - 30px);
  top:10px;
}

.form-group:nth-child(9) > select {
  width: 49%;
  position:absolute;
  right: 0;
  bottom:0px;
  padding: 10px 10px 10px 5px; 
  border-radius: 2px;
  border-style: none;
  border-bottom: 1px solid #757575;
  font-size:1rem;
}

/* 관심사 */
ul, li {
  padding: 0; 
  margin: 0;
  list-style: none;
}
.check-group {
  width: 100%;
  position: relative;
  overflow:hidden;
}
.check-group li {
  width:20%;
  float:left;
  text-align: center;
}
.check-group li label {
  padding:10px 10px 10px 5px;
  font-size:1.2rem;
  color: #999;
  width: 50%;
  float:left;
  margin-left:-20px;
}
.check-group li input {
  padding:5px;
  width: 50%;
  height:25px;
  float:left;
  margin:0;
}

.form-group {
  width: 100%;
  position: relative;
}
textarea {
  width: 100%;
  height: 200px;
  padding:10px 10px 10px 5px;
}

.submit {
  float:left;
  cursor: pointer;
  width: 50%;
}
.reset {
  float:right;
  width: 50%;
  background-color: brown;
  cursor: pointer;
}



  </style>
</head>
<body>
  <div class="container">
  
    <h2>회원가입페이지</h2>
    <!-- form 시작 -->
    <form class="signup" name="user_info" action="#" method="post">
      <!-- 한줄씩 group 묶기 -->
      <div class="form-group">      
        <input type="text" name="id" id="id" minlength="3" maxlength="10" required>
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="id" class="form-label">아이디 <em>&#x2a;</em></label>
        <p class="ps">* 아이디는 영문, 숫자 조합으로 하셔야 합니다. (4자리 이상 12자리 이하)</p>
      </div>

      <div class="form-group">      
        <input type="text" name="name" maxlength="6" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="name" class="form-label">이름 <em>&#x2a;</em></label>
      </div>
        
      <div class="form-group">      
        <input type="password" name="pw" minlength="10" maxlength="16" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <p class="ps">비밀번호는 10자리이상 16자리이하로 입력해주세요.</p>
        <label for="pw" class="form-label">비밀번호 <em>&#x2a;</em></label>
      </div>

      <div class="form-group">      
        <input type="password" name="pw_eq" minlength="10" maxlength="16" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="pw_eq" class="form-label">비밀번호 확인 <em>&#x2a;</em></label>
      </div>
      
      <div class="form-group">      
        <input type="text" name="p_id" class="left p_id" maxlength="6" required />
        <label for="p_id" class="form-label">주민번호 <em>&#x2a;</em></label>
        <input type="text" name="p_id" class="right p_id" maxlength="6" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <div class="hyphen">-</div>
      </div>
      
      <div class="radio-group">
        <p>성별</p>
        <div class="radio_wrap">
          <input type="radio" name="sex" id="female" value="female"/>
          <label for="female">여자</label>
          </label><input type="radio" name="sex" id="male" value="male" />
          <label for="male">남자</label>
          </label>
        </div>
      </div>

      <div class="form-group">
        <lebel for="date" class="form-label">생년월일</lebel>
        <input type="date" name="date" />
    </div>

    <div class="form-group">
      <div class="tel_wrap">
        <label for="tel" class="form-label">전화번호 <em>&#x2a;</em></label>
        <div class="tel_sel">
          <select name="tel" id="tel">
            <option value="010">010</option>
            <option value="011">011</option>
            <option value="017">017</option>
            <option value="019">019</option>
            <option value="018">018</option>
          </select>
        </div>
        <input type="text" name="tel" maxlength="4" required />
        
        <div class="hyphen">-</div>
        <input type="text" name="tel" maxlength="4" required />
        <span class="highlight"></span>
        <span class="bar"></span>
      </div>
    </div>

    <div class="form-group">
      <div class="email-wrap">
        <input type="text" name="email" id="email" required/>
        <span class="highlight"></span>
        <span class="bar"></span>
        <lebel for="email" class="form-label">E-mail</lebel>
      </div>
      <span class="eee">@</span>
      <select name="tel">
        <option value="google">google.com</option>
        <option value="naver">naver.com</option>
        <option value="daum">hanmail.net</option>
        <option value="nate">nate.com</option>
      </select>
    </div>

    
    <ul class="check-group">
      <p>관심사</p>
      <li>
        <input type="checkbox" id="java" name="like" />
        <label for="hobby">java</label>
      </li>
      <li>
        <input type="checkbox" id="javascript" name="like"/>
        <label for="hobby">javascript</label>
      </li>
      <li>
        <input type="checkbox" id="react" name="like"/>
        <label for="hobby">react</label>
      </li>
      <li>
        <input type="checkbox" id="spring" name="like"/>
        <label for="hobby">spring</label>
      </li>
      <li>
        <input type="checkbox" id="sql" name="like"/>
        <label for="hobby">sql</label>
      </li>
    </ul>
    

    <div class="form-group">
      <p>자기소개</p>
      <textarea></textarea>
    </div>

    <input type="submit" class="submit" name="submit" value="전송" />
    <input type="reset" class="reset" name="reset" value="다시 작성" />
    </form>

  </div>

</body>
</html>

 

 

css


  <div class="container">
  
    <h2>회원가입페이지</h2>
    <!-- form 시작 -->
    <form class="signup" name="user_info" action="#" method="post">
      <!-- 한줄씩 group 묶기 -->
      <div class="form-group">      
        <input type="text" name="id" id="id" minlength="3" maxlength="10" required>
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="id" class="form-label">아이디 <em>&#x2a;</em></label>
        <p class="ps">* 아이디는 영문, 숫자 조합으로 하셔야 합니다. (4자리 이상 12자리 이하)</p>
      </div>

      <div class="form-group">      
        <input type="text" name="name" maxlength="6" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="name" class="form-label">이름 <em>&#x2a;</em></label>
      </div>
        
      <div class="form-group">      
        <input type="password" name="pw" minlength="10" maxlength="16" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <p class="ps">비밀번호는 10자리이상 16자리이하로 입력해주세요.</p>
        <label for="pw" class="form-label">비밀번호 <em>&#x2a;</em></label>
      </div>

      <div class="form-group">      
        <input type="password" name="pw_eq" minlength="10" maxlength="16" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="pw_eq" class="form-label">비밀번호 확인 <em>&#x2a;</em></label>
      </div>
      
      <div class="form-group">      
        <input type="text" name="p_id" class="left p_id" maxlength="6" required />
        <label for="p_id" class="form-label">주민번호 <em>&#x2a;</em></label>
        <input type="text" name="p_id" class="right p_id" maxlength="6" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <div class="hyphen">-</div>
      </div>
      
      <div class="radio-group">
        <p>성별</p>
        <div class="radio_wrap">
          <input type="radio" name="sex" id="female" value="female"/>
          <label for="female">여자</label>
          </label><input type="radio" name="sex" id="male" value="male" />
          <label for="male">남자</label>
          </label>
        </div>
      </div>

      <div class="form-group">
        <lebel for="date" class="form-label">생년월일</lebel>
        <input type="date" name="date" />
    </div>

    <div class="form-group">
      <div class="tel_wrap">
        <label for="tel" class="form-label">전화번호 <em>&#x2a;</em></label>
        <div class="tel_sel">
          <select name="tel" id="tel">
            <option value="010">010</option>
            <option value="011">011</option>
            <option value="017">017</option>
            <option value="019">019</option>
            <option value="018">018</option>
          </select>
        </div>
        <input type="text" name="tel" maxlength="4" required />
        
        <div class="hyphen">-</div>
        <input type="text" name="tel" maxlength="4" required />
        <span class="highlight"></span>
        <span class="bar"></span>
      </div>
    </div>

    <div class="form-group">
      <div class="email-wrap">
        <input type="text" name="email" id="email" required/>
        <span class="highlight"></span>
        <span class="bar"></span>
        <lebel for="email" class="form-label">E-mail</lebel>
      </div>
      <span class="eee">@</span>
      <select name="tel">
        <option value="google">google.com</option>
        <option value="naver">naver.com</option>
        <option value="daum">hanmail.net</option>
        <option value="nate">nate.com</option>
      </select>
    </div>

    
    <ul class="check-group">
      <p>관심사</p>
      <li>
        <input type="checkbox" id="java" name="like" />
        <label for="hobby">java</label>
      </li>
      <li>
        <input type="checkbox" id="javascript" name="like"/>
        <label for="hobby">javascript</label>
      </li>
      <li>
        <input type="checkbox" id="react" name="like"/>
        <label for="hobby">react</label>
      </li>
      <li>
        <input type="checkbox" id="spring" name="like"/>
        <label for="hobby">spring</label>
      </li>
      <li>
        <input type="checkbox" id="sql" name="like"/>
        <label for="hobby">sql</label>
      </li>
    </ul>
    

    <div class="form-group">
      <p>자기소개</p>
      <textarea></textarea>
    </div>

    <input type="submit" class="submit" name="submit" value="전송" />
    <input type="reset" class="reset" name="reset" value="다시 작성" />
    </form>

  </div> 

* { box-sizing:border-box; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

/* basic stylings ------------------------------------------ */
.container 		{ 
  width:70%; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
  color:#999; 
}
h2 		 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
p.ps {
  font-size: .7rem;
  text-align: left;
  margin-top: 5px;
  color:#999
}
em {
  color: #f45702;
  font-weight: bold;
}

/* form starting stylings ------------------------------- */
.form-group 			  { 
  position:relative; 
  margin-bottom:35px; 
}
input 				{
  font-size:1rem;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
}
.form-group > input.left {
  width: 50%;
  float:left;
}
.form-group > input.right {
  width: 50%;
  float:right;
}
.hyphen {
  position: absolute;
  top:auto;
  left:50%;
  margin-left: -15px;
  color: #999;
}

input:focus 		{ outline:none; }

/* LABEL ======================================= */
.form-group .form-label 				 {
  color:#999; 
  font-size:1rem;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.form-group > input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:.7rem;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:3px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}
input.p_id ~ .bar:before, input.p_id ~ .bar:after {
  bottom: -40.8px;
  height: 3px;
}
.tel_wrap > input ~ .bar:before, .tel_wrap > input ~ .bar:after {
  bottom: -41.8px;
  height: 3px;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* radio */
.radio-group {
  display: flex;
  padding: 20px 20px 20px 5px;
  position: relative;
}
.radio-group p {
  color:#999; 
  font-size:1rem;
  font-weight:normal;
  width: 30%;
  height:100%;
  text-align: left;
}
.radio_wrap {
  width: 70%;
  display: flex;
  align-items: center;
}
.radio-group #female + label {
  top:15px;
  font-size:1rem;
}
.radio-group #male + label {
  top:15px;
  font-size:1rem;
  right:0;
}
.radio-group input {
  height:20px;
  width: 25%;
}

/* 생년월일 */
.form-group input[type="date"] {
  width: 75%;
  float:right;
}

/* 전화번호 드롭다운 */
.tel_wrap {
  padding-top:35px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #757575;
}
.tel_wrap .form-label {
  padding: 35px 10px 10px 0;
}
.tel_wrap input {
  float: left;
  width:28.333%;
  border-style: none;
}
.tel_wrap .hyphen {
  left:70%;
}
/* ===== Select Box ===== */
.tel_sel {
  float:left;
  margin-left: 15%;
  width:28.333%;
  position: relative;
  text-align: center;
  box-sizing: border-box;
}
.tel_sel select {
  cursor: pointer;
  font-size:1rem;
  width: 100%;
  padding: 10px 10px 10px 5px;
  border-radius: 2px;
  border-style: none;
}
.tel_sel::before {
  position: absolute;
  right: 5px;
}
.tel_sel:focus-visible {
  border-style: none;
}
.tel_sel:active::before, .tel_sel:focus-visible::before{
  border-style: none;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

/* E-mail */
.form-group:nth-child(9) {
  position: relative;
}

.email-wrap {
  width: 50%;
}

.email-wrap + span {
  position:absolute;
  left: Calc(50% - 30px);
  top:10px;
}

.form-group:nth-child(9) > select {
  width: 49%;
  position:absolute;
  right: 0;
  bottom:0px;
  padding: 10px 10px 10px 5px; 
  border-radius: 2px;
  border-style: none;
  border-bottom: 1px solid #757575;
  font-size:1rem;
}

/* 관심사 */
ul, li {
  padding: 0; 
  margin: 0;
  list-style: none;
}
.check-group {
  width: 100%;
  position: relative;
  overflow:hidden;
}
.check-group li {
  width:20%;
  float:left;
  text-align: center;
}
.check-group li label {
  padding:10px 10px 10px 5px;
  font-size:1.2rem;
  color: #999;
  width: 50%;
  float:left;
  margin-left:-20px;
}
.check-group li input {
  padding:5px;
  width: 50%;
  height:25px;
  float:left;
  margin:0;
}

.form-group {
  width: 100%;
  position: relative;
}
textarea {
  width: 100%;
  height: 200px;
  padding:10px 10px 10px 5px;
}

.submit {
  float:left;
  cursor: pointer;
  width: 50%;
}
.reset {
  float:right;
  width: 50%;
  background-color: brown;
  cursor: pointer;
}

 

' :D > html css' 카테고리의 다른 글

이력서 form  (0) 2021.05.26
가상선택자 before, after  (0) 2017.04.19
hr태그  (0) 2017.04.19
a태그 사용 안하고 제이쿼리로 페이지 이동 (href)  (0) 2017.04.19
반응형 / 모바일 웹 폰트  (0) 2017.04.19

' :D/html css' Related Articles

티스토리툴바