Post

10. HTML-Typing the contents(Forms)

Posted
Preview Image
By younghoonko
3 min read
10. HTML-Typing the contents(Forms)

[toc]

5. 입력 양식 작성하기

5-1. 폼 삽입하기

이번 학습에서는 사용자가 웹 페이지에 정보를 입력하고 서버로 전송할 수 있도록 하는 폼(form) 요소를 학습하였다. 입력 양식은 로그인, 회원가입, 설문조사 등 다양한 용도로 활용되며, HTML과 서버 언어의 연계가 핵심이다.

1. 폼(form)이란?

  • 쇼핑몰이나 설문조사에서 자주 접하는 입력창이 바로 폼이다.
  • 즉, 웹 페이지에서 정보를 서버로 전달할 수 있게 하는 모든 요소를 폼이라 부른다.

✅ 작동 흐름

  1. 사용자가 아이디, 비밀번호를 입력하고 로그인 버튼 클릭
  2. 해당 정보가 서버로 전송됨
  3. 서버는 DB에서 정보 일치 여부를 확인
  4. 확인 결과를 다시 사용자에게 반환

폼 요소의 시각적 구조는 HTML로 작성되고, 처리 기능은 ASP, PHP, JSP 같은 서버 프로그래밍 언어로 수행된다.

2. <form> 태그

1

<form 속성="속성값">여러 폼 요소</form>
  • 폼 전체를 감싸는 태그로 내부에 다양한 폼 요소를 배치
  • 주요 속성:
속성설명
methodget(주소 노출, 소용량) 또는 post(주소 숨김, 대용량) 방식 지정
name자바스크립트 등에서 폼을 식별할 이름 지정
action입력값을 처리할 서버 프로그램 지정
targetaction 결과를 새 창에 띄우는 등 동작 위치 지정 가능

3. 자동완성 기능: autocomplete

1
2
3

<form action="" autocomplete="off">
  <!-- 폼 요소들 -->
</form>
  • 이전에 입력한 값을 자동으로 추천해주는 기능
  • 중요한 개인정보 입력 시에는 "off"로 비활성화하는 것이 좋음

4. <fieldset>과 <legend> 태그 — 폼 그룹화

1
2
3

<fieldset>
  <legend>그룹 이름</legend>
</fieldset>
  • <fieldset>: 폼 요소를 하나의 그룹으로 묶어줌
  • <legend>: 그룹의 제목을 시각적으로 표현

5. <label> 태그 — 입력란에 레이블 붙이기

✅ 방법 1: 레이블 내부에 입력 요소 포함

1

<label>아이디(6자 이상)<input type="text"></label>

✅ 방법 2: for + id 속성 연결

1
2

<label for="my-id">아이디(6자 이상)</label>
<input type="text" id="my-id">
  • 입력란과 텍스트가 떨어져 있어도 연결 가능
  • 접근성과 사용성 모두 향상

💡 정리
HTML의 <form> 요소는 사용자 입력을 수집하는 가장 핵심적인 구조이다. method, action, autocomplete 같은 속성과 <fieldset>, <label> 등을 적절히 활용하면 구조적인 입력 양식을 만들 수 있으며, 서버와의 연계도 원활하게 구성할 수 있다.

End

HTML, HTML-Study
html