HTML <input> 태그

정의와 사용법

<input> 요소는 입력 필드를 정의하고, 사용자가 데이터를 입력할 수 있습니다.

<input> 요소는 가장 중요한 양식 요소입니다.

<input> 요소는 다양한 방식으로 표시될 수 있으며, 이는 다음에 따라 결정됩니다 type 속성.

다양한 입력 유형이 있습니다:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(기본값)
  • <input type="time">
  • <input type="url">
  • <input type="week">

참조 type 속성每种输入类型的实例을 확인하기 위해!

實例

包含三個輸入字段的 HTML 表單；兩個文本字段和一個提交按鈕：

<form action="/action_page.php">
  <label for="fname">名字：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>

親自試試

提示和註釋

提示：請始終使用 <label> 標籤為以下元素定義標籤：

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

屬性

屬性 值 描述
accept
  • 文件擴展名
  • audio/*
  • video/*
  • image/*
  • 媒體類型

規定通過文件上傳來提交的文件的類型。

規定用戶可以從文件輸入對話框中選擇哪些文件類型的過濾器（僅適用於 type="file"）。
alt 텍스트 規定圖像的替代文本（僅適用於 type="image"）。
autocomplete
  • on
  • off
 規定 <input> 元素是否應該啟用自動完成。
autofocus autofocus 規定 <input> 元素應在頁面加載時自動獲得焦點。
checked checked 規定在頁面加載時應預先選中 <input> 元素（適用於 type="checkbox" 或 type="radio"）。
dirname inputname.dir 規定將被提交的文本方向。
disabled disabled 規定應禁用 <input> 元素。
form 表單 id <input> 元素所屬的表單。
formaction URL 提交表单時處理輸入控件的文件的 URL（適用於 type="submit" 和 type="image"）。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 양식 데이터를 서버로 제출할 때 어떻게 인코딩할지 정의합니다(type="submit"과 type="image"에 적용됩니다).
formmethod
  • get
  • post
 양식 요소를 제출할 때 action URL로 데이터를 전송하기 위한 HTTP 메서드를 정의합니다(type="submit"과 type="image"에 적용됩니다).
formnovalidate formnovalidate 양식 요소를 제출할 때 검증하지 않아야 할 것을 정의합니다.
formtarget
  • _blank
  • _self
  • _parent
  • _top
프레임 이름 		양식을 제출한 후 수신한 응답을 어디에 표시할지 정의합니다(type="submit"과 type="image"에 적용됩니다).
height 픽셀 <input> 요소의 높이를 정의합니다(only type="image"에 적용됩니다).
list datalist_id <input> 요소를 포함한 предопределенные опции를 포함하는 <datalist> 요소를 참조합니다.
max
  • 숫자
  • 날짜
 <input> 요소의 최대 값을 정의합니다.
maxlength 숫자 <input> 요소가 허용할 수 있는 최대 문자 수를 정의합니다.
min
  • 숫자
  • 날짜
 <input> 요소의 최소 값을 정의합니다.
minlength 숫자 <input> 요소에 필요한 최소 문자 수를 정의합니다.
multiple multiple 사용자가 <input> 요소에 여러 값을 입력할 수 있도록 정의합니다.
name 텍스트 <input> 요소의 이름을 정의합니다.
pattern 정규 표현식 <input> 요소 값의 정규 표현식을 정의합니다.
placeholder 텍스트 <input> 요소의 예상 값에 대한 간단한 설명을 정의합니다.
popovertarget 요소 id 호출할 팝업 요소를 정의합니다(only type="button"에 적용됩니다).
popovertargetaction
  • hide
  • show
  • toggle
 버튼을 클릭할 때 팝업 요소가 어떻게 동작할지 정의합니다(only type="button"에 적용됩니다).
readonly readonly 입력 필드가 읽기 전용인 것을 정의합니다.
required required 提交양식 전에 입력 필드를 필수로 입력해야 합니다.
size 숫자 <input> 요소의 너비를 정의합니다(문자수로 단위).
src URL 提交버튼을 위한 이미지 URL을 정의합니다(only type="image"에 적용됩니다).
step
  • 숫자
  • any
 입력 필드에서 유효한 숫자 간의 간격을 지정합니다.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 표시할 <input> 요소의 타입을 지정합니다.
value 텍스트 <input> 요소의 값을 지정합니다.
width 픽셀 <input> 요소의 너비를 지정합니다 (type="image"에만 적용됩니다).

전역 속성

<input> 태그는 다음과 같은 이벤트 속성을 지원합니다: HTML에서의 전역 속성.

이벤트 속성

<input> 태그는 다음과 같은 이벤트 속성을 지원합니다: HTML에서의 이벤트 속성.

기본 CSS 설정

없음.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

관련 페이지

HTML 교육:

HTML DOM 참조 가이드: