04강-웹폼과 입력 요소

웹폼 개념

• 웹폼은 사용자 입력을 받아 서버로 전달하는 구조
• 프론트엔드와 백엔드가 만나는 접점
• 로그인, 회원가입, 검색, 설문, 결제 화면 구성에 사용
• 사용자 입력 수집과 서버 전송을 담당

웹폼 설계 핵심

• 구조
• 입력 경험
• 검증
• 보안

구조

• 의미에 맞는 요소 사용
• 브라우저와 스크린 리더가 폼 의미를 이해할 수 있도록 구성

입력 경험

• 사용자가 편하게 입력할 수 있도록 설계
• 입력 실수 최소화 유도

검증

• 잘못된 입력값 차단
• 클라이언트 1차 검증
• 서버 최종 검증

보안

• 개인정보 보호 고려
• 민감한 데이터 전송 시 보안 방식 적용
• 최소 수집 원칙과 명확한 동의 필요

form 요소 역할

• 여러 입력 요소를 하나의 전송 단위로 묶는 컨테이너
• 입력값을 서버로 전달하는 기준점
• 입력 요소와 전송 방식 전체를 관리

form 안에서 자주 사용하는 요소

• input
• textarea
• select
• button

form 요소 기본 속성

• action
• method
• enctype
• autocomplete
• novalidate

action 속성

• 입력 데이터를 전송할 서버 주소 지정

method 속성

• 데이터 전송 방식 지정
• 대표 값
  • get
  • post

enctype 속성

• 데이터 인코딩 방식
• 데이터를 어떤 형식으로 포장해 전송할지 지정
• 파일 업로드 시 중요

autocomplete 속성

• 자동 완성 사용 여부 지정

novalidate 속성

• 브라우저 기본 검증 없이 전송
• 특수한 경우에만 사용

get 방식과 post 방식

get 방식 사용

• 검색
• 조회
• 민감하지 않은 데이터 전송

특징

• 입력값이 URL에 노출될 수 있음
• 브라우저 기록에 남을 수 있음

post 방식 사용

• 로그인
• 회원가입
• 글쓰기
• 결제
• 파일 업로드
• 민감한 데이터 전송

특징

• URL에 데이터가 직접 노출되지 않음
• 보안 측면에서 상대적으로 적절

파일 업로드 시 form 설정

파일 업로드 시 필수 설정

• method="post"
• enctype="multipart/form-data"

의미

• 파일을 정상적으로 서버에 전달하기 위한 기본 조건

form 바깥 요소 연결

• 입력 요소는 보통 form 내부에 배치
• 필요 시 form 바깥 요소도 특정 form과 연결 가능

사용 방식

• form 요소에 id 지정
• 바깥 입력 요소에 form 속성 지정
• 같은 값으로 연결

활용

• 입력창은 본문에 두고
• 저장 버튼은 상단이나 하단에 따로 배치하는 경우

input 요소 개요

• 다양한 입력 유형 제공
• type 속성 값에 따라 기능과 모양이 달라짐
• 폼에서 가장 많이 사용되는 입력 요소

value 속성 의미

• 입력 요소의 실제 값 표현
• 버튼에서는 버튼 위에 표시되는 글자 역할

placeholder 속성 의미

• 입력 전에 흐리게 보이는 힌트 텍스트 표시
• 입력 시작 시 사라짐

주의

• label 대체 수단으로 사용 불가

id 속성 용도

• label과 연결할 때 사용
• 자바스크립트나 CSS 제어 시 활용 가능

name 속성 용도

• 서버로 전송되는 데이터의 변수명 역할
• name이 없으면 값이 서버로 전송되지 않음

disabled 속성 의미

• 입력 비활성화
• 수정 불가
• 서버 전송도 되지 않음

readonly 속성 의미

• 읽기 전용
• 수정 불가
• 서버 전송은 됨

required 속성 의미

• 필수 입력 지정
• 빈 값 전송 방지

checked 속성 의미

• 체크박스나 라디오 버튼의 초기 선택 상태 지정

maxlength와 minlength 속성

• 입력 가능한 글자 수 제한
• 최대 길이와 최소 길이 지정

min, max, step 속성

• 숫자 또는 날짜 입력 범위 지정
• min: 최소값
• max: 최대값
• step: 증가 단위

autocomplete 속성 활용

입력 편의성 향상에 사용

대표 값

• username
• current-password
• new-password
• tel
• email

autofocus 속성 의미

• 페이지가 열리자마자 해당 입력창에 커서 자동 위치

inputmode 속성 의미

• 모바일 환경에서 표시할 가상 키보드 종류 지정

대표 값

• numeric
• decimal
• tel
• email
• url

활용

• 숫자만 입력받고 싶지만 type="number" 대신 type="text"를 유지하고 싶을 때 사용

단일 텍스트 입력

사용 요소

• input type="text"

특징

• 줄바꿈 없는 단일 문자열 입력
• 가장 기본적인 텍스트 입력 방식

여러 줄 텍스트 입력

사용 요소

• textarea

주요 속성

• rows
• cols

추가 사항

• 실제 크기 제어는 CSS 사용 권장
• 사용자가 크기를 임의 조절하지 못하게 설정하는 경우 많음

textarea 초기값 설정

• 시작 태그와 종료 태그 사이에 직접 텍스트 작성
• placeholder와 구분 필요

의미

• placeholder는 힌트
• 태그 사이 텍스트는 실제 초기값

비밀번호 입력

사용 요소

• input type="password"

특징

• 입력 내용이 가려짐
• 비밀번호 저장 기능과 연동 가능

관련 속성

• autocomplete="current-password"
• autocomplete="new-password"

검색어 입력

사용 요소

• input type="search"

특징

• 검색에 적합한 UI 제공
• 브라우저에 따라 입력값 초기화용 아이콘 표시 가능
• 모바일에서 검색용 키보드 표시 가능

접근성

• label을 숨길 경우 대체 설명 필요
• placeholder 또는 aria-label 활용

전화번호 입력

사용 요소

• input type="tel"

특징

• 모바일에서 전화번호 입력용 키패드 표시
• 전화번호 형식 자동 검사는 하지 않음

형식 제한

• pattern 속성으로 형식 지정 가능

URL 입력

사용 요소

• input type="url"

특징

• URL 형식 자동 검사
• 모바일에서 URL 입력용 키보드 표시
• http:// 또는 https:// 형식 필요

이메일 입력

사용 요소

• input type="email"

특징

• 이메일 형식 자동 검사
• 모바일에서 이메일 입력용 키보드 표시
• @ 입력이 쉬운 키패드 제공

숫자 입력 방식

사용 요소

• input type="number"
• input type="range"

구분

• number: 정확한 수치 입력
• range: 대략적인 값 선택

number 입력 특징

• 직접 숫자 입력 가능
• 스피너 버튼으로 값 증감 가능
• min, max, step, value 사용 가능

range 입력 특징

• 슬라이더 형태 사용
• 밝기, 볼륨, 점수 범위, 만족도 등 대략적 값 선택에 적합
• 현재 값 표시를 별도로 제공하는 것이 좋음

output 요소 활용

• 계산 결과나 현재 선택값 표시
• range 현재 값 출력에 자주 사용
• 입력 변화에 따라 즉시 업데이트 가능

활용 예

• 슬라이더 현재 값 표시
• 단가 × 수량 계산 결과 표시
• 실시간 합계 출력

label 요소 역할

• 입력 요소의 의미 설명
• 클릭 영역 확장
• 접근성 지원

효과

• 텍스트를 클릭해도 입력창 선택 가능
• 스크린 리더가 항목 의미를 정확히 읽을 수 있음

label 연결 방식

for와 id 연결 방식

• label의 for
• 입력 요소의 id
• 같은 값으로 연결

감싸는 방식

• label 안에 입력 요소 직접 포함

실무 권장

• for와 id 연결 방식 선호

fieldset과 legend 역할

• 관련된 입력 요소를 하나의 그룹으로 묶음
• 그룹 제목을 함께 제공

구성

• fieldset: 그룹 컨테이너
• legend: 그룹 제목

활용

• 성별 선택
• 관심 분야 선택
• 약관 동의 묶음
• 배송 옵션 그룹

radio 버튼 특징

사용 요소

• input type="radio"

특징

• 같은 그룹에서 하나만 선택 가능
• 그룹 기준은 name 속성
• 하나를 선택하면 다른 선택은 해제됨

checkbox 특징

사용 요소

• input type="checkbox"

특징

• 여러 항목 동시 선택 가능
• 각 항목을 독립적으로 체크 또는 해제 가능

파일 선택 입력

사용 요소

• input type="file"

용도

• PC 또는 모바일 기기에 있는 파일을 선택해 서버로 업로드

필수 전제

• form에서 method="post" 사용
• form에서 enctype="multipart/form-data" 사용

파일 입력 관련 속성

• accept
• multiple
• capture

accept 속성

• 선택 가능한 파일 유형 제한
• 예
  • image/*
  • video/*
  • .pdf

주의

• 클라이언트 필터 역할
• 최종 검사는 반드시 서버에서 수행

multiple 속성

• 여러 파일 동시 선택 허용

capture 속성

• 모바일 카메라 연동
• user
• environment

파일 입력 디자인 처리

• 기본 파일 선택 버튼은 디자인 자유도가 낮음
• 실제 파일 입력 요소는 숨김 처리
• label을 버튼처럼 디자인하여 대체 UI 구성 가능

선택 목록 입력

사용 요소

• select
• datalist

구분

• select: 정해진 목록 중에서만 선택
• datalist: 추천 목록 제공 + 직접 입력 가능

select 요소 특징

• 드롭다운 목록 제공
• 옵션 중 하나 또는 여러 개 선택 가능
• 사용 요소
  • option
  • optgroup

관련 속성

• name
• id
• required
• multiple
• size

option 요소 역할

• select 내부 선택 항목 구성

주요 속성

• value
• selected
• disabled

optgroup 요소 역할

• 많은 옵션을 범주별로 묶음
• 예
  • 한식
  • 양식
  • 중식

datalist 요소 특징

• input과 함께 사용
• 추천 목록 제시
• 사용자가 직접 새 값 입력 가능

연결 방식

• input의 list
• datalist의 id
• 같은 값으로 연결

색상 선택 입력

사용 요소

• input type="color"

특징

• 시스템 색상 선택창 호출
• 색상 코드 값 사용
• 초기값 지정 가능

확장 활용

• datalist와 연결하여 추천 색상 목록 제공 가능

버튼 입력 방식

관련 입력 유형

• submit
• reset
• button
• image

submit 역할

• 입력 데이터를 서버로 전송

reset 역할

• 입력값 초기화

button 역할

• 기본 기능 없는 빈 버튼
• 자바스크립트와 연결하여 사용

image 역할

• 이미지를 전송 버튼처럼 사용

button 요소 활용

• button 요소는 디자인 자유도가 높음
• 텍스트뿐 아니라 아이콘과 다른 요소 포함 가능
• 실무에서는 input보다 button 요소 사용 빈도가 높음

실무 포인트

• 초기화 버튼은 UX 측면에서 지양하는 경우 많음
• 전송 버튼은 button type="submit" 사용 빈도 높음

날짜와 시간 입력

관련 유형

• date
• month
• week
• time
• datetime-local

의미

• date: 연월일
• month: 연월
• week: 연도와 주차
• time: 시분 또는 시분초
• datetime-local: 날짜와 시간

날짜 시간 입력 특징

• 브라우저가 전용 입력 UI 제공
• 화면 표시 형식과 서버 전송 형식이 다를 수 있음
• 내부 값은 표준 포맷 사용

관련 속성

• min
• max
• step
• value

날짜 시간 입력 활용 포인트

• 선택 가능한 범위 제한 가능
• 기본값 지정 가능
• 사용자에게 보이는 형식은 브라우저와 지역 설정에 따라 달라질 수 있음
• 서버로는 일관된 형식으로 전송됨

정리

• 웹폼은 사용자 입력을 수집하여 서버로 전달하는 구조
• form 요소는 입력과 전송을 총괄하는 컨테이너 역할 수행
• method, action, enctype는 폼 동작의 핵심 속성
• input 요소는 type에 따라 다양한 입력 방식을 제공
• label, fieldset, legend는 접근성과 구조 측면에서 중요
• 텍스트, 비밀번호, 검색, 전화번호, URL, 이메일, 숫자, 날짜, 파일, 색상 입력까지 다양한 유형 존재
• select와 datalist는 선택 목록 제공 방식에서 차이 발생