어떻게 만들지?: 연락처 양식

연락처 양식을 만들어보세요

첫 번째 단계 - HTML 추가:

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

그런 다음 각 필드에 입력 컨트롤을 추가합니다(매칭 레이블과 함께):

<div class="container">
  <form action="action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <label for="subject">제목</label>
    <textarea id="subject" name="subject" placeholder="내용 입력하세요.." style="height:200px"></textarea>
    <input type="submit" value="제출">
  </form>
</div>

두 번째 단계 - CSS 추가:

/* "text" 유형의 입력 필드, 선택 요소 및 텍스트 필드에 스타일 설정 */
input[type=text], select, textarea {
  width: 100%; /* 전체 너비 */
  padding: 12px; /* 일부 내간격 */ 
  border: 1px solid #ccc; /* 회색 경계선 */
  border-radius: 4px; /* 둥근 경계선 */
  box-sizing: border-box; /* 내간격과 너비가 일정하게 유지됨 */
  margin-top: 6px; /* 아래 외간격 */
  margin-bottom: 16px; /* 하단 간격 */
  resize: vertical /* 사용자가 텍스트 필드의 크기를 수직으로 조정할 수 있게 함 */
}
/* 제출 버튼에 특정 배경색과 스타일 설정 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* 마우스가 제출 버튼에��을 때 더 깊은緑색 배경 추가 */
input[type=submit]:hover {
  background-color: #45a049;
}
/* 表单容器에 배경색과 일부 내간격 추가 */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

직접 테스트해 보세요

관련 페이지

教程：HTML 양식

教程：CSS 양식