Frontend Academy · 강의

양식 컨트롤: input 유형, select, textarea

select 및 textarea 요소와 함께 텍스트, 이메일, 숫자, 날짜, 체크박스, 라디오, 범위, 파일, 색상 입력을 사용합니다.

양식 컨트롤: input 유형, select, textarea은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

다양한 입력 유형

HTML5에는 텍스트 외에도 다양한 특화 입력 유형이 도입되었습니다. 각 유형은 브라우저에 예상되는 데이터의 종류를 알려 주므로, 기본 제공 검증과 모바일에서 적절한 키보드, 플랫폼 기본 UI 제어 요소를 사용할 수 있습니다.

텍스트, 검색, 웹 주소 입력란

type="text"는 일반 텍스트를 위한 기본 대체 유형입니다. type="search"는 검색에 최적화된 키보드를 표시하도록 힌트를 제공하며, 대개 지우기 버튼도 표시합니다. type="url"은 웹 주소 형식을 검증하고 모바일에서 웹 주소용 키보드를 표시합니다.

<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">

이메일 및 전화번호

type="email"은 이메일 형식을 검증하고 @ 키가 포함된 이메일용 키보드를 표시합니다. type="tel"은 전화번호용 숫자 키보드를 표시합니다. 국가마다 전화번호 형식이 다르므로 형식은 검증하지 않습니다.

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

숫자, 범위, 날짜 유형

숫자 데이터에는 최소값, 최대값, 증분을 지정할 수 있는 type="number"를 사용합니다. 슬라이더에는 type="range"를 사용합니다. 시간 데이터에는 기본 선택 도구가 제공되는 type="date", type="time", type="datetime-local"을 사용합니다.

<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">

체크박스와 라디오 버튼

체크박스는 서로 독립적으로 전환됩니다. 같은 그룹(동일한 이름)에 속한 라디오 버튼은 하나만 선택할 수 있습니다. 각각 연결된 레이블이 필요합니다.

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="email_notif" value="1"> Email</label>
  <label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

색상, 파일, 숨김 입력

type="color"는 기본 제공 색상 선택 도구를 표시합니다. type="file"은 파일 대화 상자를 열며, accept 속성으로 파일 유형을 제한할 수 있습니다. type="hidden"은 UI 제어 요소 없이 데이터를 제출합니다.

<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">

선택 목록

<select> 요소는 선택 목록을 만듭니다. 여러 항목을 선택하려면 multiple을 사용합니다(사용자 경험 측면에서는 거의 적합하지 않습니다). 긴 목록의 옵션은 <optgroup>으로 그룹화하십시오.

<select name="country">
  <option value="">Select a country...</option>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Americas">
    <option value="us">United States</option>
  </optgroup>
</select>

여러 줄 입력란

<textarea>는 여러 줄 텍스트 입력란을 만듭니다. 초기 크기에는 rows와 cols를 사용하고, 더 세밀하게 제어하려면 CSS를 사용하십시오. 닫는 태그는 필수이며 태그 사이의 내용이 기본값이 됩니다.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
  placeholder="Write something about yourself..."></textarea>

datalist — 자동 완성 옵션

<datalist>는 자유로운 텍스트 입력을 제한하지 않으면서 입력란에 추천 목록을 제공합니다. list와 id 속성을 사용해 입력란을 datalist에 연결하십시오.

<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
  <option value="JavaScript">
  <option value="TypeScript">
  <option value="Python">
  <option value="Rust">
</datalist>

값 및 이름 속성

name은 양식 제출 시 전송되는 키입니다. value는 초기값을 설정합니다. 체크박스와 라디오 버튼에서는 선택되었을 때 전송되는 값이 됩니다. 텍스트 입력란에서는 미리 입력된 내용이 됩니다.

입력란 크기와 자리 표시자

placeholder는 입력란이 비어 있을 때 안내 문구를 표시합니다. 포커스를 받으면 사라지며, 화면에 보이는 레이블을 대신할 수는 없습니다. size는 문자 수를 기준으로 표시 너비를 설정합니다. 크기 지정에는 CSS를 우선 사용하십시오.

빠른 확인

모바일에서 숫자 키보드를 표시하고 입력된 값이 유효한 숫자인지 검증하는 입력 유형은 무엇입니까?

복습: 양식 제어 요소

의미에 맞는 입력 유형을 사용하십시오. 이메일에는 이메일 유형, 숫자에는 숫자 유형, 날짜에는 날짜 유형을 사용합니다. 고정된 선택지에는 선택 목록을, 자동 완성 추천에는 datalist를, 여러 줄 텍스트에는 여러 줄 입력란을 사용하십시오. 제출하려면 항상 이름 속성을 포함하고, 필요한 경우 값 속성도 포함하십시오.

자주 묻는 질문

“양식 컨트롤: input 유형, select, textarea” 강의는 무료인가요?

네 — “양식 컨트롤: input 유형, select, textarea” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“양식 컨트롤: input 유형, select, textarea”에서 뭘 배우나요?

select 및 textarea 요소와 함께 텍스트, 이메일, 숫자, 날짜, 체크박스, 라디오, 범위, 파일, 색상 입력을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“양식 컨트롤: input 유형, select, textarea” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기