[html] HTML5 폼 요소
HTML5는 웹 양식을 만들기 위한 다양한 요소를 제공합니다. 이러한 요소들은 사용자 입력을 받거나 양식을 유효성 검사하는 등의 기능을 제공합니다.
목차
1. 입력 요소
사용자로부터 데이터를 입력 받기 위한 요소들로, input 요소가 가장 대표적입니다. 이를 통해 텍스트, 숫자, 날짜, 이메일 같은 다양한 형식의 데이터를 입력 받을 수 있습니다.
<input type="text" placeholder="이름을 입력하세요">
<input type="number" min="0" max="100" step="1">
<input type="date">
<input type="email">
2. 버튼 요소
양식을 제출하거나 리셋하는 등의 동작을 수행하는 버튼 요소입니다. 가장 일반적으로 사용되는 버튼 요소는 submit과 reset입니다.
<button type="submit">제출</button>
<button type="reset">리셋</button>
3. 선택 요소
여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 목록이나 라디오 버튼과 같은 요소들을 제공합니다.
<select>
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<input type="radio" id="option1" name="option" value="option1">
<label for="option1">옵션 1</label>
<input type="radio" id="option2" name="option" value="option2">
<label for="option2">옵션 2</label>
<input type="radio" id="option3" name="option" value="option3">
<label for="option3">옵션 3</label>
4. 라벨 요소
label 요소는 폼 요소의 라벨을 정의하며, 스크린 리더나 사용성을 향상시키기 위해 중요한 역할을 합니다.
<label for="username">사용자 이름:</label>
<input type="text" id="username">
위와 같이 간단하게 HTML5 양식 요소들을 사용하여 다양한 웹 양식을 만들 수 있습니다.
참고 문헌: