HTML <입력> 유형 속성
예시
두 개의 입력 필드가 있는 HTML 양식. 하나의 텍스트 필드와 하나의 제출 버튼:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
type속성은 표시할 요소의 유형을 지정 합니다
<input>.
속성이 지정되지 않은 경우 type기본 유형은 "텍스트"입니다.
브라우저 지원
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
통사론
<input type="value">
속성 값
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
더 많은 예
입력 유형: 버튼
클릭 시 JavaScript를 활성화하는 푸시 버튼:
<input type="button" value="Click me" onclick="msg()">
입력 유형: 확인란
확인란을 통해 사용자는 제한된 수의 선택 항목 중 하나 이상의 옵션을 선택할 수 있습니다.
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
입력 유형: 색상
색상 선택기에서 색상 선택:
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
입력 유형: 날짜
날짜 컨트롤을 정의합니다.
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
입력 유형: datetime-local
날짜 및 시간 컨트롤 정의(시간대 없음):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
입력 유형: 이메일
전자 메일 주소 필드를 정의합니다(제출 시 자동으로 확인됨):
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
입력 유형: 파일
파일 선택 필드와 "찾아보기..." 버튼을 정의합니다(파일 업로드용):
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
입력 유형: 숨김
숨겨진 필드를 정의합니다(사용자에게 표시되지 않음).
숨겨진 필드는 종종 양식이 제출될 때 업데이트해야 하는 데이터베이스 레코드를 저장합니다.
<input type="hidden" id="custId" name="custId" value="3487">
입력 유형: 이미지
이미지를 제출 버튼으로 정의:
<input type="image" src="img_submit.gif" alt="Submit">
입력 유형: 월
월 및 연도 제어 정의(시간대 없음):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
입력 유형: 숫자
숫자 입력 필드를 정의합니다(허용되는 숫자에 대한 제한을 설정할 수도 있습니다).
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" name="quantity" min="1" max="5">
다음 속성을 사용하여 제한 사항을 지정합니다.
입력 유형: 암호
암호 필드 정의(문자가 마스킹됨):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
입력 유형: 라디오
라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나만 선택할 수 있습니다.
<input type="radio" id="html" name="fav_language" value="HTML">
<label
for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
입력 유형: 범위
정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의합니다(예: 슬라이더 컨트롤). 기본 범위는 0~100입니다. 그러나 min, max 및 step 속성으로 허용되는 숫자에 대한 제한을 설정할 수 있습니다.
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
다음 속성을 사용하여 제한 사항을 지정합니다.
입력 유형: 재설정
재설정 버튼 정의(모든 양식 값을 기본값으로 재설정):
<input type="reset">
팁: 재설정 버튼을 주의해서 사용하십시오! 실수로 재설정 버튼을 활성화하는 사용자에게는 성가실 수 있습니다.
입력 유형: 검색
검색 필드 정의(예: 사이트 검색 또는 Google 검색):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
입력 유형: 제출
제출 버튼 정의:
<input type="submit">
입력 유형: 전화
전화번호 입력 필드를 정의합니다.
<label for="phone">Enter your phone number:</label>
<input type="tel"
id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
입력 유형: 텍스트
사용자가 텍스트를 입력할 수 있는 두 개의 단일 라인 텍스트 필드를 정의합니다.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
입력 유형: 시간
시간 입력을 위한 컨트롤 정의(시간대 없음):
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
입력 유형: URL
URL 입력을 위한 필드 정의:
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
팁: iPhone의 Safari는 URL 입력 유형을 인식하고 이에 맞게 화면 키보드를 변경합니다(.com 옵션 추가).
입력 유형: 주
주 및 연도 제어 정의(시간대 없음):
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ HTML <입력> 태그