새로운 폼 컨트롤

약 9분

본문 듣기

새로운 폼 컨트롤

HTML5에서는 양식 제작이 더 편리해지도록 다양한 새로운 폼 컨트롤을 도입했습니다. 이러한 새로운 컨트롤은 사용자가 데이터를 입력하는 데 도움을 주며, 웹에서의 상호작용을 향상시킵니다. 이 강의에서는 몇 가지 새롭게 추가된 폼 컨트롤을 살펴보겠습니다.

1. `<input>`의 `type` 속성 확장

HTML5에서는 <input> 요소의 type 속성이 더욱 다양해졌습니다. 기본적인 텍스트 입력 외에도 이메일, 숫자, URL 등 여러 형태의 데이터를 입력 받을 수 있는 새로운 타입이 추가되었습니다. 예를 들어, type='email'을 사용하면 사용자가 이메일 형식으로 입력하도록 강제할 수 있습니다.

예제: 이메일 입력 만들기

Visual Studio Code에서 새로운 HTML 파일을 만듭니다.
아래 코드를 복사해 붙여넣기 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이메일 입력 예제</title>
</head>
<body>
    <form>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">제출</button>
    </form>
</body>
</html>

이 코드를 실행하면 사용자는 이메일 형식으로 정보를 넣어야 합니다. required 속성은 사용자가 이 입력 필드를 반드시 채워야 함을 나타냅니다. 이를 통해 웹사이트가 더 유용하게 작동하도록 할 수 있습니다!

2. `number` 타입

사용자가 숫자만 입력할 수 있는 입력란을 만들고 싶다면, type='number'를 사용할 수 있습니다. 이 방법은 특히 가격, 나이 등 수치 데이터를 입력받을 때 유용합니다.

예제: 나이 입력 만들기

새로운 HTML 파일을 열어 아래 코드를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자 입력 예제</title>
</head>
<body>
    <form>
        <label for="age">나이:</label>
        <input type="number" id="age" name="age" min="1" max="120" required>
        <button type="submit">제출</button>
    </form>
</body>
</html>

이 예제에서는 min과 max 속성을 사용하여 입력할 수 있는 숫자의 범위를 설정할 수 있습니다.

3. `date` 타입

사용자가 날짜를 입력해야 할 경우, type='date'를 사용하여 달력 인터페이스를 제공할 수 있습니다. 이는 사용자가 날짜를 쉽게 선택할 수 있도록 합니다.

예제: 생일 입력 만들기

새로운 HTML 파일을 열고 아래 코드를 붙여넣습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>날짜 입력 예제</title>
</head>
<body>
    <form>
        <label for="birthday">생일:</label>
        <input type="date" id="birthday" name="birthday" required>
        <button type="submit">제출</button>
    </form>
</body>
</html>

이 코드를 통해 사용자는 보다 직관적으로 날짜를 선택할 수 있습니다.

4. `color` 타입

색상을 선택할 수 있는 입력란도 새롭게 추가되었습니다. 이 color 타입의 입력란은 사용자에게 색상 피커를 제공하여 선택할 수 있도록 합니다.

예제: 색상 선택하기

새로운 HTML 파일을 열고 아래 코드를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>색상 선택 예제</title>
</head>
<body>
    <form>
        <label for="color">색상 선택:</label>
        <input type="color" id="color" name="color">
        <button type="submit">제출</button>
    </form>
</body>
</html>

이제 사용자는 색상 피커에서 원하는 색상을 쉽게 선택할 수 있게 됩니다!

핵심 요약

HTML5의 새로운 폼 컨트롤을 사용하여 웹 양식을 더 사용자 친화적으로 만들 수 있습니다. 이메일, 숫자, 날짜, 색상 입력 필드를 통해 데이터를 수집할 때 사용자의 편의를 고려할 수 있습니다. 이러한 타입별 입력을 적절히 사용하면 웹 페이지가 훨씬 더 직관적이고 사용하기 쉬워집니다.

실습 문제

위에서 배운 폼 컨트롤을 모두 사용하여 나만의 간단한 설문조사를 만들어 보세요.
이름, 이메일, 나이, 생일, 색상 선택 항목을 포함시켜야 합니다.
설문조사를 완성한 후, 제출 버튼을 클릭했을 때 입력된 값이 비어있지 않도록 유효성 검사를 추가하세요!

개인 프로젝트: 자기소개 페이지 만들기

마지막으로, 자신을 소개하는 웹 페이지를 만들어봅시다. 위에서 배운 폼 컨트롤을 활용하여 자기소개 양식을 작성해보세요. 다음 요소들을 포함시켜 보세요:

이름
이메일
생일
관심 있는 색상

이제 여러분의 상상력을 발휘하여 멋진 자기소개 페이지를 만들어 보세요! 실무에도 이런 방식의 양식 작성이 많이 쓰이니, 충분히 활용해볼 수 있습니다.

차근차근 만들어 나가면서 HTML의 재미를 느껴보세요!

새로운 폼 컨트롤