웹개발/HTML

HTML5 입력 양식(Form) 가이드

튼튼발자 2024. 9. 10. 15:02
728x90

웹 페이지에서 사용자와 상호작용할 때 가장 중요한 요소 중 하나가 "입력양식(form)" 입니다!

예를 들어, 회원가입이나 검색 창 처럼 사용자가 정보를 입력하고 제출할 수 있는 인터페이스가 입력 양식이라고 할 수 있죠!

오늘은 HTML5에서 입력 양식을 어떻게 활용할 수 있는지 살펴보겠습니다. 😃 😃 😃

📝 기본적인 form 태그 구조

입력 양식을 정의하는 가장 기본적인 방법은 <form> 태그를 사용하는 것입니다. <form> 태그는 사용자로부터 입력을 받고, 이를 서버에 전송하는 역할을 합니다.

 

<form name="loginForm" action="http://www.example.com/login" method="post">
  사용자 이름: <input type="text" name="username"><br>
  비밀번호: <input type="password" name="password"><br>
  <input type="submit" value="로그인">
  <input type="reset" value="초기화">
</form>

위 예제에서 각 요소가 어떻게 작동하는지 설명해 드릴게요! 😊

<form> 태그의 속성들:

  • name: 폼의 이름을 지정합니다. 자바스크립트와 상호작용할 때 유용해요.
  • action: 폼 데이터를 처리할 서버 스크립트의 URL을 지정합니다.
  • method: 데이터를 전송하는 방식으로, GET 또는 POST를 사용할 수 있습니다.
    • GET: URL 뒤에 파라미터를 붙여서 데이터를 전달합니다. 예) http://example.com?username=JohnDoe
    • POST: HTTP 요청의 본문에 데이터를 포함하여 전송합니다. 데이터 길이 제한이 없고 보안성이 더 높습니다.

🧩 다양한 input 타입들

HTML5는 다양한 입력 유형을 지원하여 사용자 경험을 향상시켜 줍니다! ✨

  • text: 일반 텍스트 입력 필드입니다.
  • password: 비밀번호 입력 필드로, 입력한 텍스트가 숨겨져 표시됩니다.
  • email: 이메일 형식의 입력 필드입니다. 사용자가 이메일을 올바르게 입력했는지 검증할 수 있어요.
  • url: 웹 주소(URL)를 입력받는 필드입니다.
  • tel: 전화번호를 입력받는 필드입니다.
  • date, time, datetime-local, month, week: 날짜와 시간 관련 입력 필드로, 사용자가 쉽게 날짜를 선택할 수 있도록 합니다.
  • color: 색상을 선택할 수 있는 입력 필드입니다.
  • number: 숫자만 입력받을 수 있는 필드로, 최소값, 최대값, 단계(step) 등을 설정할 수 있습니다.
  • range: 슬라이더 형태로 숫자를 입력받을 수 있는 필드입니다.

 

🌈 예제: 다양한 input 유형 사용하기

다양한 입력 유형을 한 번에 사용할 수 있는 예제를 살펴볼까요?

<form action="submit_data.jsp" method="post">
  이메일: <input type="email" name="email"><br>
  전화번호: <input type="tel" name="phone"><br>
  생일: <input type="date" name="birthday"><br>
  즐겨 찾는 색상: <input type="color" name="favcolor"><br>
  나이: <input type="number" name="age" min="18" max="99" step="1"><br>
  <input type="submit" value="제출">
</form>

이 예제에서는 이메일, 전화번호, 생일, 색상, 나이를 입력받고 제출할 수 있는 폼을 만들어보았어요.

 

📋 입력 양식의 기타 요소들

  • <select>: 드롭다운 메뉴를 만들 때 사용됩니다.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

  • <fieldset> 및 <legend>: 관련 입력 요소들을 그룹화할 때 사용합니다.

<fieldset>
  <legend>개인 정보</legend>
  이름: <input type="text" name="name"><br>
  이메일: <input type="email" name="email">
</fieldset>

fieldset으로 그룹화된 요소들에 제목(legend)을 추가해줍니다. 🔍

 

🎉 폼의 특수 속성들

HTML5에서는 폼을 더 유용하게 만들어주는 몇 가지 속성들이 추가되었습니다:

  • autocomplete: 자동 완성을 지원하여 사용자 경험을 개선합니다.
  • autofocus: 페이지가 로드되면 특정 입력 필드에 자동으로 포커스를 맞춥니다.
  • placeholder: 입력 필드에 힌트를 제공합니다.
  • readonly: 입력 필드를 읽기 전용으로 만듭니다.
  • required: 입력 양식을 제출하기 전에 반드시 채워져 있어야 함을 나타냅니다.
  • pattern: 정규 표현식을 사용하여 입력 형식을 지정합니다.
728x90