7.1 텍스트 필드
HTML은 사용자들이 텍스트, 이메일, 날짜 등 다양한 형식으로 데이터를 입력할 수 있는 여러 가지 입력 유형을 제공합니다. 이제 각 입력 유형과 그 사용법을 자세히 살펴보겠습니다.
<input type="text"> 요소는 한 줄의 텍스트를 입력하는 데 사용됩니다. 가장 기본적이고 자주 사용되는 입력 유형이죠.
사용 예:
<label for="name">이름:</label>
<input type="text" id="name" name="name">
속성
maxlength: 최대 문자 수 제한placeholder: 사용자가 데이터를 입력하기 전까지 입력 필드에 표시되는 대체 텍스트required: 필수 입력 필드를 지정
속성이 포함된 예:
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="사용자 이름을 입력하세요" required>
7.2 숫자 입력 필드
<input type="number"> 요소는 숫자 값을 입력하는 데 사용됩니다. 숫자만 입력할 수 있도록 제한하며, 값을 증가시키거나 감소시키는 화살표를 포함할 수 있습니다.
사용 예:
<label for="quantity">수량:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
속성
min: 허용되는 최소값 설정max: 허용되는 최대값 설정step: 값 변경 단위 설정value: 초기값 설정
7.3 이메일 입력 필드
<input type="email"> 요소는 이메일 주소를 입력하는 데 사용됩니다. 입력된 텍스트가 이메일 주소 형식에 맞는지 확인합니다.
사용 예:
<label for="email">이메일:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
속성
multiple: 콤마로 구분된 여러 이메일 주소 입력 가능pattern: 입력된 데이터를 추가로 확인하기 위한 정규 표현식 설정
속성이 포함된 예:
<label for="emails">이메일 주소 (콤마로 구분):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 전화번호 입력 필드
<input type="tel"> 요소는 전화번호를 입력하는 데 사용됩니다. 번호 형식을 확인하지는 않지만, pattern 속성을 통해 입력 마스크를 설정할 수 있습니다.
사용 예:
<label for="phone">전화번호:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
속성
pattern: 입력된 번호의 형식을 확인하기 위한 정규 표현식 설정.
속성이 포함된 예:
<label for="phone">전화번호:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 날짜 입력 필드
<input type="date"> 요소는 날짜를 입력하는 데 사용됩니다. 지원되는 브라우저에서는 날짜 선택을 위한 캘린더 위젯이 나타납니다.
사용 예:
<label for="birthday">생일:</label>
<input type="date" id="birthday" name="birthday">
속성
min: 허용되는 최소 날짜 설정max: 허용되는 최대 날짜 설정
속성이 포함된 예:
<label for="appointment">약속 날짜:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 시간 입력 필드
<input type="time"> 요소는 시간을 입력하는 데 사용됩니다. 지원되는 브라우저에서는 시간 선택 위젯이 나타납니다.
사용 예:
<label for="meeting_time">회의 시간:</label>
<input type="time" id="meeting_time" name="meeting_time">
속성
min: 허용되는 최소 시간 설정max: 허용되는 최대 시간 설정step: 시간 변경 단위 설정
속성이 포함된 예:
<label for="alarm">알람:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 URL 입력 필드
<input type="url"> 요소는 웹 주소(URL)를 입력하는 데 사용됩니다. 입력된 텍스트가 URL 형식에 맞는지 확인합니다.
사용 예:
<label for="website">웹사이트:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
속성
pattern: 입력된 데이터를 추가로 확인하기 위한 정규 표현식 설정.
속성이 포함된 예:
<label for="personal_website">개인 웹사이트:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 비밀번호 입력 필드
<input type="password"> 요소는 비밀번호를 입력하는 데 사용됩니다. 입력된 데이터는 별표나 점과 같은 기호로 대체되어 숨겨집니다.
사용 예:
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
속성
maxlength: 최대 문자 수 제한placeholder: 대체 텍스트required: 필수 입력 필드를 지정
속성이 포함된 예:
<label for="new-password">새 비밀번호:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="비밀번호를 입력하세요" required>
7.9 범위 입력 필드
<input type="range"> 요소는 특정 범위 내의 값을 입력하는 데 사용됩니다. 슬라이더 형태로 표시됩니다.
사용 예:
<label for="volume">볼륨:</label>
<input type="range" id="volume" name="volume">
속성
min: 허용되는 최소값 설정max: 허용되는 최대값 설정step: 값 변경 단위 설정value: 초기값 설정
속성이 포함된 예:
<label for="brightness">밝기:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 색상 선택 입력 필드
<input type="color"> 요소는 색상을 선택하는 데 사용됩니다. 지원되는 브라우저에서는 색상 선택 위젯이 나타납니다.
사용 예:
<label for="favcolor">좋아하는 색상 선택:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
속성
value: 초기 색상 설정.
7.11 검색 입력 필드
<input type="search"> 요소는 검색 쿼리를 입력하는 데 사용됩니다. 대부분의 브라우저에서는 내장 스타일과 입력된 텍스트를 지우는 기능이 포함되어 있습니다.
사용 예:
<label for="search">검색:</label>
<input type="search" id="search" name="search" placeholder="검색어를 입력하세요">
GO TO FULL VERSION