AD JB Toolbox 01 EN

Category: HTML

html tutorial how to add guidance text to a form 01

HTML Tutorial / Add Placeholder Text to Form Fields

Learn how to add placeholder hints to HTML input and textarea fields without confusing them with labels or initial values. Includes a complete form example, required-field checks, and an explanation of empty values in submitted data.

제목 탭이 있는 두 입력 필드 그룹 일러스트

HTML Tutorial / Explain Forms with fieldset, legend, and autocomplete

Group related controls with fieldset and legend, and use suitable autocomplete tokens to describe the purpose of input fields.

오류와 정상 상태를 다른 테두리 색으로 나타낸 입력 필드 일러스트

HTML Tutorial / Form Validation with required, Length, and Range Limits

Apply built-in required, length, and numeric constraints, test error states, and understand why server-side validation remains necessary.

체크박스, 라디오 버튼, 날짜와 숫자 입력 필드 일러스트

HTML Tutorial / Choose Input Types for Email, Numbers, Dates, and Choices

Choose input types based on the value being collected and understand how checkboxes and radio groups behave when submitted.

여러 줄 입력창, 선택 목록, 버튼이 있는 양식 일러스트

HTML Tutorial / Use textarea, select, option, and button

Create multi-line fields, selection lists, and form buttons while understanding initial values, submitted values, and reset behavior.

입력칸과 제출 버튼이 있는 웹 양식 일러스트

HTML Tutorial / Form Structure and GET vs. POST

Understand how form action, method, and control names determine where form values go, and when GET or POST is appropriate.

레이블 카드와 입력 필드가 연결된 일러스트

HTML Tutorial / Connect Labels and Inputs Correctly

Connect labels to inputs with for and id, distinguish id from submitted name, and learn why placeholder text cannot replace a label.

제목 행과 데이터의 행·열 관계가 강조된 표 일러스트

HTML Tutorial / Accessible Tables: caption, scope, and Spanning Cells

Make table headings and data relationships clear with caption, th, and scope, and learn when colspan or rowspan makes a table harder to read.

제목 행이 강조된 기본 데이터 표 일러스트

HTML Tutorial / Table Basics: table, tr, th, and td

Build a basic HTML data table with rows and header or data cells, then organize its headings and body without using tables for page layout.

풍경 사진 아래 빈 캡션 영역이 있는 카드 일러스트

HTML Tutorial / Group Images and Captions with figure and figcaption

Use figure and figcaption to keep an image and its visible explanation together, and distinguish captions from image alt text.