폼 내부의 버튼
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 45번째.
버튼은 폼에서 핵심적인 역할을 하며, 데이터를 제출하거나 필드를 초기화하는 데 도움을 줍니다. 어떻게 작동하는지 살펴봅시다:
제출 버튼:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": 폼 데이터를 서버로 전송합니다.
초기화 버튼:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": 모든 필드를 지우고 기본값으로 재설정합니다.
챌린지
쉬움다양한 유형의 버튼이 포함된 폼을 포함하는 HTML 문서를 만드세요. 폼은 다음 요소를 포함해야 합니다:
- 이름이 "message"이고 플레이스홀더가 "Enter your message"인 텍스트 입력 필드.
- 텍스트가 "Send"인 제출 버튼(
<button type="submit">)을 추가하세요. - 텍스트가 "Clear"인 초기화 버튼(
<button type="reset">)을 추가하세요. - 텍스트가 "Click Me"인 일반 버튼(
<button>)을 추가하세요.
치트 시트
폼 내의 버튼은 특정 기능을 위해 서로 다른 타입을 가집니다:
제출 버튼 (Submit Button):
<button type="submit">Submit</button>type="submit": 폼 데이터를 서버로 전송합니다
초기화 버튼 (Reset Button):
<button type="reset">Reset</button>type="reset": 모든 필드를 비우고 기본값으로 재설정합니다
일반 버튼 (Generic Button):
<button>Click Me</button>- 특정한 폼 동작이 없는 기본 버튼입니다
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
