입력 필드와 버튼

약 5분

본문 듣기

입력 필드와 버튼

여러분, HTML 폼을 배우는 것은 웹 페이지에서 사용자와 소통하는 중요한 부분입니다. 웹사이트에서 정보를 입력받거나, 버튼을 눌러 무언가를 실행하는 기능은 입력 필드와 버튼에 의해 가능해요. 이번 시간에는 입력 필드와 버튼을 만들어보며 이를 활용하는 방법을 배워보겠습니다.

입력 필드란?

입력 필드는 사용자가 데이터를 입력할 수 있도록 하는 영역입니다. 예를 들어, 회원가입할 때 이름, 이메일, 비밀번호를 입력하는 칸이 바로 입력 필드예요. 이 입력 필드는 다양한 형태로 존재할 수 있습니다.

코드 html

<input type="text" placeholder="여기에 이름을 입력하세요">

위 코드를 입력해보세요. type="text" 는 일반 텍스트 입력 필드를 만들고, placeholder 속성은 사용자가 입력하기 전 안내 문구를 표시합니다. 이 코드를 VS Code에서 입력하고, 브라우저에서 실행해 보세요.

버튼이란?

버튼은 사용자가 클릭하여 특정 작업을 수행하게 하는 요소입니다. 예를 들어 "전송" 버튼이 있을 때 사용자가 클릭하면 폼의 정보가 서버로 전송될 수 있죠.

코드 html

<button type="submit">전송</button>

위 코드를 추가하여 버튼을 만들어 보세요. 버튼이 생성되면 클릭하여 동작하는지를 확인할 수 있습니다. 이처럼 간단한 버튼을 생성하여 필요한 동작을 연결할 수 있어요.

실습: 나만의 간단한 폼 만들기

이제 여러분의 폼을 만들어 보겠습니다. 아래와 같은 구조로 만들어볼까요?

이름 입력 필드
이메일 입력 필드
전송 버튼

위의 요소들을 합쳐서 아래와 같이 작성해보세요.

코드 html

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" placeholder="여기에 이름을 입력하세요"><br>
  <label for="email">이메일:</label>
  <input type="email" id="email" placeholder="여기에 이메일을 입력하세요"><br>
  <button type="submit">전송</button>
</form>

이 코드를 복사하여 VS Code에 붙여넣기 하세요. 브라우저에서 결과를 확인해보면, 여러분이 만든 폼이 어떻게 보이는지 볼 수 있습니다! 각 필드는 어떤 역할을 하는지 한번 생각해 보세요.

핵심 요약

입력 필드는 사용자로부터 정보를 입력받는 영역입니다.
버튼은 사용자가 클릭하여 특정 작업을 수행하도록 합니다.
다양한 입력 타입이 있으며, 필요에 맞게 사용할 수 있습니다.

실습 문제

추가적으로 전화번호 입력 필드를 만들어 보세요.
비밀번호 입력 필드를 만들어서 비밀번호가 숨겨지도록 설정해 보세요.
제출 시 알림 메시지를 나타내는 기능을 추가해 보세요.

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

이제 여러분의 HTML 지식을 활용하여 자기소개 페이지를 만들어보세요. 내용에는 이름, 나이, 관심사, 연락처 등을 포함시키고, 각 항목에 대해 입력 필드를 만들고 버튼을 추가해 보세요. 여러분의 창의성을 발휘할 기회입니다!

지금까지 입력 필드와 버튼을 배우면서 웹 페이지에서 사용자와 소통할 수 있는 방법을 알아보았습니다. 다른 사람들과 소통하는 것은 매우 중요합니다. 이 부분에서 실력을 쌓아가다 보면 쉽게 웹 개발의 길로 나아갈 수 있습니다. 다음 강의도 기대해 주세요!

입력 필드와 버튼