[HTML/CSS] Form 요소들과 디자인 방법

이번 글에서는 HTML5에서 추가된 폼 요소들을 소개하고, 그들이 어떻게 사용되는지에 대해서 알아보도록 하겠습니다.

※ 폼 요소와 폼 태그는 다른 개념입니다.
폼 요소는 사용자가 입력하는 정보를 받기 위한 요소로, 텍스트 입력란(input), 비밀번호 입력란(input), 체크박스(input), 라디오 버튼(input), 드롭다운 메뉴(select), 텍스트 에어리어(textarea) 등이 있습니다. 이러한 폼요소들은 폼 태그 내부에 위치하며, 폼 태그에 의해 관리됩니다.
반면, 폼 태그(form)는 사용자 입력을 받기 위한 폼을 정의하는 요소입니다. 폼태그에는 폼 전송 방법(method)과 폼 데이터를 전송할 URL(action)을 지정할 수 있습니다. 또한 폼태그에는 폼을 제출할 때 실행할 스크립트(onsubmit)나 폼이 로드될 때 실행할 스크립트(onload) 등을 지정할 수 있습니다.

---

form 요소

input 요소

input 요소는 사용자로부터 데이터를 입력받는 데 가장 많이 사용되는 폼 요소입니다. HTML5에서는 다양한 type 속성값을 가지고 있어 다양한 형식의 데이터를 입력받을 수 있습니다.

text 입력

<label for="name">이름:</label>
<input type="text" id="name" name="name" required>

text 입력은 사용자가 문자열을 입력할 수 있는 입력란입니다. 위의 코드에서는 "이름"이라는 레이블과 함께, id와 name 속성값이 "name"인 입력란을 만들고 있습니다. required 속성값을 사용하면, 이 입력란이 필수적으로 채워져야 한다는 것을 알려줄 수 있습니다.

password 입력

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>

password 입력란은 사용자가 비밀번호를 입력할 수 있는 입력란입니다. 입력값이 마스킹되어(숨겨져) 보이지 않게 표시됩니다. 위의 코드에서도 text 입력란과 마찬가지로, required 속성값을 사용하여 필수 입력란임을 표시하고 있습니다.

이메일 입력

<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>

이메일 입력란은 사용자가 이메일 주소를 입력할 수 있는 입력란입니다. 입력값이 이메일 형식에 맞지 않을 경우, 브라우저가 경고 메시지를 표시합니다.

숫자 입력

<label for="age">나이:</label>
<input type="number" id="age" name="age" min="1" max="100" required>

숫자 입력란은 사용자가 숫자를 입력할 수 있는 입력란입니다. 위의 코드에서는 min과 max 속성값을 사용하여 입력값의 최소값과 최대값을 설정하였습니다.

날짜 입력

<label for="date">날짜:</label>
<input type="date" id="date" name="date" required>

날짜 입력란은 사용자가 날짜를 입력할 수 있는 입력란입니다. 입력값은 yyyy-mm-dd 형식으로 표시됩니다.

파일 선택 입력

<label for="file">파일 선택:</label>
<input type="file" id="file" name="file" accept="image/*" required>

파일 선택 입력란은 사용자가 파일을 선택할 수 있는 입력란입니다. 위의 코드에서는 accept 속성값을 사용하여 이미지 파일만 선택할 수 있도록 설정하였습니다. 또한 required 속성값을 사용하여 파일 선택이 필수적임을 표시하였습니다.

select 요소

select 요소는 옵션을 선택할 수 있는 드롭다운 목록을 만들 수 있습니다. 다음은 select 요소를 사용한 예시 코드입니다.

<label for="color">색상:</label>
<select id="color" name="color">
  <option value="red">빨강</option>
  <option value="green">초록</option>
  <option value="blue">파랑</option>
</select>

textarea 요소

textarea 요소는 여러 줄의 텍스트를 입력할 수 있는 입력란입니다. 다음은 textarea 요소를 사용한 예시 코드입니다.

<label for="comment">코멘트:</label>
<textarea id="comment" name="comment" rows="5" required></textarea>

위의 코드에서는 "코멘트"라는 레이블과 함께, id와 name 속성값이 "comment"인 textarea 요소를 만들고 있습니다. rows 속성값을 사용하여 행의 수를 설정하였습니다.

 

폼 디자인 방법

폼 요소들은 보통 디자인을 통해 사용자가 쉽게 입력할 수 있도록 만들어집니다. 이번 섹션에서는 HTML과 CSS를 사용하여 폼 요소를 디자인하는 방법을 소개하겠습니다.

레이블 디자인

레이블은 폼 요소를 설명하는 역할을 합니다. 이를 디자인하여 폼의 가독성을 높일 수 있습니다. 다음은 레이블을 디자인하는 예시 코드입니다.

<style>
  label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
  }
</style>

<label for="name">이름:</label>
<input type="text" id="name" name="name" required>

위의 코드에서는 label 요소의 display 속성값을 block으로 설정하여 레이블이 한 줄에 딱 맞게 표시되도록 하였습니다. margin-bottom 속성값을 사용하여 레이블과 입력란 사이의 간격을 늘렸습니다. 또한 font-weight 속성값을 사용하여 레이블의 굵기를 늘렸습니다.

입력 디자인

입력도 레이블과 마찬가지로 디자인을 통해 가독성을 높일 수 있습니다. 다음은 입력란을 디자인하는 예시 코드입니다.

<style>
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

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

  input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>

<label for="name">이름:</label>
<input type="text" id="name" name="name" required>

<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>

<label for="comment">코멘트:</label>
<textarea id="comment" name="comment" rows="5" required></textarea>

<label for="color">색상:</label>
<select id="color" name="color">
  <option value="red">빨강</option>
  <option value="green">초록</option>
  <option value="blue">파랑</option>
</select>

<input type="submit" value="제출">

위의 코드에서는 CSS를 사용하여 입력란의 크기, 여백, 테두리, 배경색 등을 설정하였습니다. 또한 submit 버튼을 디자인하여 마우스를 올렸을 때 색상이 바뀌도록 하였습니다.