HTML과 CSS를 이용한 FORM(양식) 만드는 법

FORM은 사용자로부터 정보를 수집하는 모든 웹사이트에서 중요한 부분입니다. FORM은 등록, 설문 조사, 피드백 등 다양한 용도로 사용할 수 있습니다.  HTML 및 CSS를 사용하여 양식을 만드는 방법에 대해 설명하고 HTML 양식 요소의 기본 사항과 CSS를 사용하여 스타일을 지정하는 방법에 대해 알아보도록 하겠습니다.

 

HTML 양식 요소

HTML은 텍스트 필드, 확인란, 라디오 버튼, 선택 상자 등을 포함하여 양식을 만드는 다양한 양식 요소를 제공합니다. 각 양식 요소는 자체 속성이 있는 HTML 태그로 표시됩니다. 예를 들어, "input" 태그는 텍스트 필드를 만드는 데 사용되고 "select" 태그는 선택 상자를 만드는 데 사용됩니다.

 

아래는 간단한 형식의 예를 살펴보겠습니다.

*php 코드 예시

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

이 예에서는 두 개의 입력 필드가 있는 양식을 만들었습니다. 하나는 사용자 이름용이고 다른 하나는 이메일 주소용입니다. 양식 끝에 제출 버튼인 submit도 포함했습니다.

 

하나씩 살펴보자면 <label for="name">Name:</label>은 이름을 입력하는 칸을 위한 양식이며, <input type = "text">에는 텍스트를 넣는 상자를 만들었습니다. 

이 부분을 예를 들자면 우리가 흔히 홈페이지에서 "Name : __________"와 같은 형태로 만들어집니다. 따라서 이 부분에 이름을 입력할 수 있게 만드는 것이죠.

 

그 아래 email 부분도 name을 입력하는 부분과 동일한 형태로 만들어지나 다른 점으로는 <input type="submit" value="Submit">이 추가로 있어 제출하는 버튼이 하나 더 있다고 보시면 됩니다.

 

CSS로 양식 스타일 지정

기본적으로 HTML 양식 요소는 단순하고 매력적이지 않은 모양을 가지고 있습니다. 그러나 CSS를 사용하여 스타일을 지정하여 시각적으로 더 매력적이고 사용자 친화적으로 만들 수 있습니다. CSS는 양식 요소의 색상, 크기, 글꼴 등을 변경하는 데 사용할 수 있습니다.

 

CSS를 사용하여 양식의 스타일을 지정하는 방법의 예를 살펴보겠습니다.

*css 코드 예시

form {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"], input[type="email"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 16px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

이 예에서는 CSS를 사용하여 양식과 해당 요소의 스타일을 지정했습니다. 양식에 배경색, 패딩, 테두리 반경 및 글꼴 모음을 추가했습니다. 또한 레이블의 글꼴 두께, 여백 및 글꼴 크기를 변경했습니다. 입력 필드는 패딩, 테두리, 테두리 반경 및 글꼴 크기로 스타일이 지정했으며, 제출 버튼은 배경색, 패딩, 테두리, 테두리 반경 및 커서로 스타일이 지정했습니다.

하나씩 명령어를 살펴보자면

• 배경색 지정 → background-color: #f2f2f2;
• 요소 내부 여백 지정 → padding: 20px;
• 테두리 둥글게 만들기 → border-radius: 10px;
• 원하는 글꼴지정 → font-family: Arial, sans-serif;
• 요소표현 방식 → display: block;
• 글꼴 두께 → font-weight: bold;
• 마진 아래 여백 → margin-bottom: 5px;

728x90

HTML 및 CSS를 사용하여 양식을 만드는 것은 사용자 데이터를 수집하는 모든 웹 사이트에 필수적입니다. HTML 양식 요소와 CSS 스타일을 사용하여 시각적으로 매력적이고 사용자 친화적인 양식을 만들 수 있습니다. 이 블로그 게시물의 예제와 팁을 따르면 웹 사이트의 사용자 경험을 향상시키는 아름다운 양식을 만들 수 있습니다.