[HTML] Form 미츠따~

 

 

[HTML] Form 미츠따~

이 태그 몰라도 괜찮다고요?
절대 아니죠.

웹에서 사용자와 '진짜로' 소통하고 싶다면,
이 태그는 빠질 수 없습니다.

당신의 사이트에 정보를 입력하고, 전송하고, 반응을 주는 모든 순간.
그 중심에 있는 건 바로 form입니다.

겉으론 평범해 보여도, 안을 들여다보면 꽤 많은 걸 품고 있는 태그죠.

오늘 배울 태그는
<form> 입니다.

 

<form action="/submit" method="post">
  <label>이름:</label>
  <input type="text" name="username">
  <button type="submit">제출하기</button>
</form>

 

 

가장 기본적인 form 구조입니다.

태그는 사용자의 데이터를 서버로 보내는 역할을 합니다.

Action은 데이터를 보낼 URL, method는 전송 방식(post 또는 get)을 지정하죠.

이건 웹이 웹 다울 수 있게 해주는 아주 본질적인 기능입니다.

 

<form onsubmit="event.preventDefault(); alert('제출 완료!')">
  <input type="email" placeholder="이메일 입력" required>
  <button>가입하기</button>
</form>

 

 

기본 form은 서버로 전송되지만,
프론트엔드에서 처리하고 싶을 땐 onsubmit 이벤트로 기본 동작을 막고 자바스크립트로 처리할 수 있어요.

 

 

728x90

 

event.preventDefault()는 submit을 막는 중요한 메서드죠.
이 방식은 싱글 페이지 앱(SPA)이나 동적 폼 처리에서 많이 쓰입니다.

 

<form>
  <fieldset>
    <legend>회원가입</legend>
    <label>아이디: <input type="text" name="id"></label>
    <label>비밀번호: <input type="password" name="pw"></label>
  </fieldset>
</form>

 

<fieldset>과 <legend>는 관련된 입력 요소를 시각적으로 그룹화하는 데 유용해요.

접근성 측면에서도 좋고, 디자인적으로도 폼의 구성을 좀 더 명확하게 만들어줍니다.
특히 여러 섹션을 나누는 복잡한 폼에서 자주 사용되죠.

 

<form>
  <label for="agree">
    <input type="checkbox" id="agree">  
    이용 약관에 동의합니다
  </label>
  <br>
  <button disabled>제출하기</button>
</form>

 

체크박스나 라디오 버튼도 form의 필수 구성 요소입니다.

사용자의 의사를 확인하고, 조건에 따라 버튼을 비활성화할 수도 있죠.

실제로는 자바스크립트를 통해 checkbox 상태를 감지해 버튼을 활성화시키는 로직을 추가하면 실용성이 더 올라갑니다.

 

<form autocomplete="off">
  <input type="text" name="nickname" placeholder="닉네임 입력">
  <button>시작하기</button>
</form>

 

자동 완성 기능이 불편하거나 정확한 입력을 유도하고 싶을 땐 autocomplete="off" 속성을 사용하세요.

검색창이나 일회성 입력폼에 자주 사용되는 팁입니다.

 

💡 폼을 꾸미는 방법?

form 안의 input, button 요소에 클래스명을 잘 나누고 CSS나 프레임워크로 꾸미는 게 핵심입니다.
부트스트랩이나 Tailwind 같은 도구를 써도 되고, 단순하게 CSS만으로도 충분히 감성적인 폼을 만들 수 있어요.
디자인보다 중요한 건, 사용자가 스트레스 없이 입력할 수 있는 흐름입니다.

마무리하며 🌿

form은 단순한 입력창의 집합이 아닙니다.

사용자와 서버, 또는 사용자와 인터페이스가 연결되는 진짜 접점입니다.

하나의 form 안에는 수많은 고민이 들어갈 수 있고, 그 디테일이 결국 사용자 경험을 바꾸는 힘이 되죠.

폼을 '디자인'이 아니라 '경험'으로 다뤄보세요.

👉 더 많은 HTML 팁은 제 블로그에서도 확인하실 수 있어요. https://jjaeho.tistory.com