6.1 required 속성
폼에서 데이터 검증은 웹 개발의 중요한 부분으로, 올바른 데이터가 입력되도록 보장해줘. HTML은
required, pattern, min, max 같은 다양한 내장 속성을 제공하며,
placeholder와 value 속성은 사용자와의 상호작용을 개선해줘.
required 속성은 입력 필드가 반드시 채워져야 함을 의미해. 이 속성이 있는 필드가 비어 있으면 브라우저는 폼을 제출하지 않아.
문법
<input type="text" name="username" required>
사용 예시
<form action="/" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<button type="submit">보내기</button>
</form>
설명
required 속성이 있다면, 사용자는 폼을 제출하기 전에 이 필드를 반드시 채워야 해.
만약 필드가 비었으면, 브라우저는 오류 메시지를 보여주고 폼을 제출하지 않을 거야.
6.2 pattern 속성
pattern 속성은 입력 데이터의 유효성을 정규 표현식으로 검사할 수 있게 해. 만약 입력된 데이터가 패턴과 일치하지 않으면 브라우저는 오류 메시지를 표시하고 폼을 제출하지 않아.
문법
<input type="text" name="username" pattern="[A-Za-z]{3,}">
사용 예시
pattern 속성은 입력된 데이터가 일치해야 하는 정규 표현식을 설정해.
이 예시에서는 사용자 이름이 문자만 포함하고 3자 이상이어야 해.
<form action="/" method="post">
<label for="username">사용자 이름 (문자만, 최소 3자):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">보내기</button>
</form>
6.3 min 및 max 속성
min 및 max 속성은 숫자 및 날짜 입력 필드의 최소 및 최대 허용 값을 설정하는 데 사용돼.
문법
<input type="number" name="age" min="18" max="99">
사용 예시
숫자 필드
min: 최소 허용 값을 설정해. 이 예시에서는 최소 나이가 18살이야max: 최대 허용 값을 설정해. 이 예시에서는 최대 나이가 99살이야
<form action="/" method="post">
<label for="birthday">생일 (1900-01-01부터 2024-12-31까지):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">보내기</button>
</form>
6.4 placeholder 속성
placeholder 속성은 사용자가 데이터를 입력하기 전까지 입력 필드 내에 표시되는 텍스트를 설정해.
이 속성은 사용자가 이 필드에 어떤 데이터를 기대하는지 이해하는 데 도움이 돼.
문법
<input type="text" name="username" placeholder="사용자 이름 입력">
사용 예시
placeholder 속성은 사용자가 데이터를 입력하기 시작할 때까지 입력 필드 내에 텍스트를 표시해.
이 예시에서는 "사용자 이름 입력"이라는 텍스트가 표시돼.
<form action="/" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" placeholder="사용자 이름 입력" required>
<button type="submit">보내기</button>
</form>
6.5 value 속성
value 속성은 입력 요소의 초기 값을 설정해. 이 값은 페이지가 로드되거나 폼이 초기화되었을 때 표시돼.
문법
<input type="text" name="username" value="default user">
사용 예시
value 속성은 입력 필드의 초기 값을 설정해. 이 예시에서는 기본 사용자 이름이 "default user"야.
<form action="/" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">보내기</button>
</form>
GO TO FULL VERSION