코딩 스쿨 HTML

1. HTML Input Types란?

HTML Input Types는 웹 폼에서 사용자로부터 데이터를 입력받기 위해 사용되는 다양한 형태의 입력 필드입니다.

2. 주요 HTML Input Types

<input> 요소

입력 유형	설명	예시
text	일반 텍스트 입력	<input type="text" name="username">
password	비밀번호 입력, 입력한 내용이 숨겨짐	<input type="password" name="password">
email	이메일 주소 입력, 기본 유효성 검사 제공	<input type="email" name="email">
url	URL 입력, 기본 유효성 검사 제공	<input type="url" name="website">
tel	전화번호 입력	<input type="tel" name="phone">
number	숫자 입력, 최소/최대값 및 단계 지정 가능	<input type="number" name="age" min="1" max="120">
range	슬라이더로 수치 입력	<input type="range" name="volume" min="0" max="100">
date	날짜 선택, 날짜 피커 제공	<input type="date" name="birthday">
time	시간 선택, 시간 피커 제공	<input type="time" name="meeting-time">
datetime-local	날짜와 시간을 모두 입력, 지역 시간 적용	<input type="datetime-local" name="event">
checkbox	체크박스, 사용자가 선택할 수 있는 옵션	<input type="checkbox" name="subscribe">
radio	라디오 버튼, 여러 옵션 중 하나 선택 가능	<input type="radio" name="gender" value="male">
file	파일 업로드	<input type="file" name="resume">
color	색상 선택	<input type="color" name="color">
submit	제출 버튼	<input type="submit" value="제출">
button	일반 버튼, JavaScript와 함께 사용 가능	<input type="button" value="클릭">

<textarea> 요소

<textarea> 요소는 여러 줄의 텍스트 입력을 허용하는 필드입니다.

<textarea name="comments" rows="4" cols="50"></textarea>

<select> 요소

<select> 요소는 드롭다운 목록을 생성하여 사용자가 여러 옵션 중에서 선택할 수 있게 합니다.

<select name="country">
    <option value="kr">한국</option>
    <option value="us">미국</option>
</select>

<button> 요소

<button> 요소는 사용자와의 상호작용을 위한 버튼을 생성합니다.

<button type="submit">제출</button>

3. 폼 요소의 유효성 검사

HTML5에서는 기본적인 폼 유효성 검사를 제공하여 사용자의 입력을 확인할 수 있습니다.

<form action="/submit" method="POST">
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" required>

    <label for="age">나이:</label>
    <input type="number" id="age" name="age" min="1" max="120 required">

    <input type="submit" value="제출">
 </form>

위 코드에서 이메일 주소와 나이에 대해 유효성 검사를 수행합니다.