어떻게 만드는가: 가입 양식

가입 양식을 어떻게 만드는가

첫 번째 단계 - HTML 추가:

<form> 요소를 사용하여 입력을 처리합니다. PHP 튜토리얼에서 더 많은 정보를 찾을 수 있습니다.

각 필드에 입력 컨트롤을 추가하세요(또는 일치하는 레이블):

<form action="action_page.php">
  <div class="container">
    <h1>가입</h1>
    <p>이 형식을 작성하여 계정을 생성하십시오.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>
    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>계정을 만들면 저희 <a href="#">이용약관</a> 및 <a href="#">개인정보 보호정책</a>에 동의합니다.</p>
    <button type="submit" class="registerbtn">가입</button>
  </div>
  <div class="container signin">
    <p>이미 계정이 있으신가요? <a href="#">로그인</a>.</p>
  </div>
</form>

第二步 - CSS 추가:

* {box-sizing: border-box}
/* 컨테이너에 내비드를 추가합니다 */
.container {
  padding: 16px;
}
/* 전체 너비 입력 필드 */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* hr의 기본 스타일을 덮어쓰습니다 */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* 제출/가입 버튼 스타일을 설정합니다 */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* 링크에 파란 텍스트 색상을 추가합니다 */
a {
  color: dodgerblue;
}
/* “登录”부분에 회색 배경색을 설정하고 텍스트를 중앙에 정렬합니다 */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

직접 시도해 보세요

관련 페이지

강의:HTML 양식

강의:CSS 양식