#form

Frontend › Accessibility

모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.

• #accessibility
• #frontend
• #validation
• #aria
• #html

Frontend › JavaScript

JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.

• #javascript
• #dom
• #event
• #frontend

Frontend › JavaScript

문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.

• #javascript
• #dom
• #browser
• #frontend

Frontend › React

입력값을 React state로 관리하는 제어 컴포넌트, 여러 입력 다루기, 파생 값 계산, 그리고 React 19의 폼 액션(useActionState·useFormStatus).

• #react
• #state
• #frontend

Frontend › React

react-hook-form의 Controller로 MUI Select 같은 외부 UI 컴포넌트를 연결하고, 빈 값·placeholder·수정 폼 초기값을 다루는 방법.

• #react
• #mui
• #state
• #frontend

Frontend › UI Design

모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.

• #frontend
• #mobile
• #ux
• #design

Frontend › UI Design

쇼핑몰 UI의 목표는 구매 여정(진입 → 탐색 → 상품 검토 → 옵션 선택 → 결제)에서 마찰을 없애는 것이다. 얕은 메뉴·필터·정렬·검색으로 찾게 하고, 상품 페이지 첫 화면에 가격·옵션·배송·반품을 담고, 옵션 종류에 맞는 선택 UI와 품절 표시를 쓰고, 가격 필터 슬라이더는 실제 범위와 재고 분포를 보여 줘 결과 0건을 막는다.

• #design
• #ux
• #frontend
• #mobile

Frontend › Web

결제 흐름은 비회원 결제를 기본으로, 단계와 다음 행동을 드러내고, 방해 요소를 걷어 낸다. 카드 칸은 한 칸·inputmode="numeric"·cc-* 토큰·카드 종류 선택 없음, 이름은 한 칸과 유니코드 허용, 주소는 street-address 한 칸이나 address-line1/2, 우편번호는 선택 항목으로 둔다. 나라마다 다른 이름·주소·용어를 받아들이는 국제화 원칙과 enterkeyhint로 단계를 안내하는 법까지 정리한다.

• #frontend
• #ux
• #ecommerce
• #i18n
• #autocomplete

Frontend › Web

폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.

• #frontend
• #html
• #validation
• #ux
• #accessibility

Frontend › Web

가장 좋은 가입 폼은 없는 가입 폼이다. 필요할 때만 계정을 요구하고, 로그인·가입 폼은 비밀번호 관리자가 알아보게 만든다(new/current-password, 다른 name·id, 성공 감지, 붙여넣기 허용). 비밀번호 보기 버튼, 두 단계 로그인, 모바일 키보드 가림, 패스키 자동 완성(username webauthn), 일회용 코드(one-time-code·WebOTP), NIST SP 800-63B-4의 비밀번호 규칙, 계정 설정과 /.well-known/change-password까지 정리한다.

• #frontend
• #auth
• #security
• #ux
• #html

Frontend › Web

브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.

• #frontend
• #html
• #autocomplete
• #ux
• #accessibility

Frontend › Web

브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.

• #frontend
• #html
• #validation
• #javascript
• #css

Frontend › Web

폼 컨트롤은 기본 크기가 작고 브라우저마다 모양이 다르다. 글자 1rem 이상(iOS 확대 방지), 보이는 테두리, 48px 탭 영역, 한 열 배치로 기본을 잡고, appearance: none과 배경 화살표로 select를, 접근성 트리를 지키는 숨김 기법으로 체크박스·라디오를 꾸민다. accent-color, field-sizing: content, 실험 단계의 customizable select(appearance: base-select), pointer 미디어 쿼리와 env()까지 정리한다.

• #frontend
• #css
• #ux
• #accessibility

Frontend › Web

<form>은 Enter 제출·검증·자동 완성·보조 기술 지원을 공짜로 주므로 데이터를 보내는 곳에는 항상 쓴다. GET과 POST 고르기, 제출 버튼의 종류와 type="button" 함정, 제출 버튼을 언제 막는가, FormData와 fetch로 새로 고침 없이 보내는 점진적 향상, 같은 엔드포인트에서 HTML·JSON 응답 나누기, HTTPS·데이터 최소화·허니팟 같은 보안·개인정보 원칙을 정리한다.

• #frontend
• #html
• #javascript
• #security
• #privacy

Frontend › Web

웹 문서의 구조와 의미를 태그로 표현하는 마크업 언어와 그 핵심 문법. 요소와 태그, 대체·빈 요소, 생략 가능한 태그, 불리언·열거형·전역 속성, data-* 속성, 속성 하나로 끝나는 기능(enterkeyhint·form·download·loading·fetchpriority·integrity·popover 등), DOCTYPE, form 데이터 규칙, HTML5까지 다룬다.

• #html
• #web
• #semantic
• #frontend

Frontend › Web

input의 22가지 type과 label·select·textarea·fieldset·datalist까지, 폼에서 쓰는 입력 요소를 용도별로 정리하고, 값의 성격에 맞는 type·선택 컨트롤 고르기와 inputmode 8가지 값까지 다룬다.

• #html
• #input
• #frontend
• #accessibility

Backend › Django

Django Form으로 입력 폼 렌더링과 유효성 검사를 자동화하고, ModelForm으로 모델 필드를 재사용해 생성·수정 로직을 단순화한다.

• #django
• #python
• #validation