[R]HTML 입력 유형(HTML Input Types)

This chapter describes the different input types for the <input> element.

이 장에서는 <input> 요소에 대한 다양한 입력 유형에 대해 설명합니다.

---

Input Type Text

입력 유형 텍스트

<input type="text"> defines a one-line text input field:

<input type="text">한 줄짜리 텍스트 입력 필드를 정의 합니다 .

Example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

First name:

Last name:

---

Input Type Password

입력 유형 암호

<input type="password"> defines a password field:

<input type="password">암호 필드를 정의 합니다 .

Example

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).

---

Input Type Submit

입력 유형 제출

<input type="submit"> defines a button for submitting form data to a form-handler.

<input type="submit">양식 데이터를 양식 처리기 에 제출 하기위한 단추를 정의 합니다 .

The form-handler is typically a server page with a script for processing input data.

form-handler는 일반적으로 입력 데이터를 처리하는 스크립트가있는 서버 페이지입니다.

The form-handler is specified in the form's action attribute:

양식 처리기는 양식의 action 속성에 지정됩니다 .

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

First name:

Last name:

If you omit the submit button's value attribute, the button will get a default text:

제출 버튼의 value 속성을 생략하면 버튼에 기본 텍스트가 표시됩니다.

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>

---

Input Type Reset

입력 유형 재설정

<input type="reset"> defines a reset button that will reset all form values to their default values:

<input type="reset"> 모든 양식 값을 기본값으로 재설정 하는 재설정 버튼 을 정의 합니다.

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

First name:

Last name:

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

입력 값을 변경 한 다음 "재설정"버튼을 클릭하면 양식 데이터가 기본값으로 재설정됩니다.

---

Input Type Radio

입력 유형 라디오

<input type="radio"> defines a radio button.

<input type="radio">라디오 버튼을 정의 합니다 .

Radio buttons let a user select ONLY ONE of a limited number of choices:

라디오 버튼을 사용하여 제한된 수의 선택 사항 중 하나만 선택할 수 있습니다.

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

 Male
 Female
 Other

---

Input Type Checkbox

입력 유형 체크 박스

<input type="checkbox"> defines a checkbox.

<input type="checkbox">확인란을 정의합니다 .

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

확인란을 사용하면 제한된 수의 선택 항목 중 0 개 이상을 선택할 수 있습니다.

Example

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

 I have a bike 
 I have a car

---

Input Type Button

입력 유형 버튼

<input type="button"> defines a button:

<input type="button">버튼을 정의 합니다 .

Example

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

---

HTML5 Input Types

HTML5 입력 유형

HTML5 added several new input types:

HTML5는 몇 가지 새로운 입력 유형을 추가했습니다.

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

New input types that are not supported by older web browsers, will behave as <input type="text">.

이전 웹 브라우저에서 지원하지 않는 새로운 입력 유형은 다음과 같이 작동합니다 <input type="text">.

---

Input Type Color

입력 유형 색상

The <input type="color"> is used for input fields that should contain a color.

은 <input type="color">색상을 포함해야 입력 필드에 사용된다.

Depending on browser support, a color picker can show up in the input field.

브라우저 지원에 따라 색상 선택 도구가 입력 필드에 표시 될 수 있습니다.

Example

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

---

Input Type Date

입력 유형 날짜

The <input type="date"> is used for input fields that should contain a date.

은 <input type="date">날짜를 포함해야합니다 입력 필드에 사용됩니다.

Depending on browser support, a date picker can show up in the input field.

브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

Example

<form>
  Birthday:
  <input type="date" name="bday">
</form>

You can also use the min and max attributes to add restrictions to dates:

또한 minand max속성을 사용하여 날짜에 제한을 추가 할 수 있습니다 .

Example

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

---

Input Type Datetime-local

입력 유형 날짜 / 시간 - 로컬

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

는 <input type="datetime-local">시간대가없는 날짜 및 시간 입력 필드를 지정합니다.

Depending on browser support, a date picker can show up in the input field.

브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

Example

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

---

Input Type Email

입력 유형 전자 메일

The <input type="email"> is used for input fields that should contain an e-mail address.

는 <input type="email">전자 메일 주소를 포함해야합니다 입력 필드에 사용됩니다.

Depending on browser support, the e-mail address can be automatically validated when submitted.

브라우저 지원에 따라 전자 메일 주소를 제출할 때 자동으로 유효성을 검사 할 수 있습니다.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

일부 스마트 폰은 이메일 유형을 인식하고 이메일 입력과 일치하도록 키보드에 ".com"을 추가합니다.

Example

<form>
  E-mail:
  <input type="email" name="email">
</form>

---

Input Type File

입력 유형 파일

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

는 <input type="file"> 파일 - 선택 필드와 파일 업로드를위한 "찾아보기"버튼을 정의합니다.

Example

<form>
  Select a file: <input type="file" name="myFile">
</form>

---

Input Type Month

입력 유형 월

The <input type="month"> allows the user to select a month and year.

는 <input type="month">사용자가 월 및 연도를 선택할 수 있습니다.

Depending on browser support, a date picker can show up in the input field.

브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

Example

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

---

Input Type Number

입력 유형 번호

The <input type="number"> defines a numeric input field.

는 <input type="number">정의 숫자 입력 필드.

You can also set restrictions on what numbers are accepted.

수락 할 수있는 번호에 대한 제한을 설정할 수도 있습니다.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

다음 예제에서는 1에서 5 사이의 값을 입력 할 수있는 숫자 입력 필드를 표시합니다.

Example

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

---

Input Restrictions

입력 제한

Here is a list of some common input restrictions (some are new in HTML5):

몇 가지 일반적인 입력 제한 목록이 있습니다 (일부는 HTML5에서 새로 추가되었습니다).

Attribute	Description
disabled	Specifies that an input field should be disabled 입력 필드를 비활성화해야 함을 지정합니다.
max	Specifies the maximum value for an input field 입력 필드의 최대 값을 지정합니다.
maxlength	Specifies the maximum number of character for an input field 입력 필드의 최대 문자 수를 지정합니다.
min	Specifies the minimum value for an input field 입력 필드의 최소값을 지정합니다.
pattern	Specifies a regular expression to check the input value against 입력 값을 검사 할 정규 표현식을 지정합니다.
readonly	Specifies that an input field is read only (cannot be changed) 입력 필드를 읽기 전용으로 지정합니다 (변경할 수 없음).
required	Specifies that an input field is required (must be filled out) 입력 필드가 필요함을 지정합니다 (입력해야 함).
size	Specifies the width (in characters) of an input field 입력 필드의 너비 (문자 수)를 지정합니다.
step	Specifies the legal number intervals for an input field 입력 필드의 유효한 번호 간격을 지정합니다.
value	Specifies the default value for an input field 입력 필드의 기본값을 지정합니다.

You will learn more about input restrictions in the next chapter.

입력 제한에 대해서는 다음 장에서 자세히 설명합니다.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

다음 예제에서는 0에서 100 사이의 값을 10 단위로 입력 할 수있는 숫자 입력 필드를 표시합니다. 기본값은 30입니다.

Example

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

---

Input Type Range

입력 유형 범위

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). 

는 <input type="range">그 정확한 값 (a 슬라이더 제어 등) 중요하지 않은 숫자를 입력하기위한 제어를 정의한다. 

기본 범위는 당신이 함께 허용됩니다 어떤 숫자에 제한을 설정할 수 있습니다, 그러나 0에서 100 사이입니다 min, max그리고 step속성 :

Default range is 0 to 100. How ever, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example

<form>
  <input type="range" name="points" min="0" max="10">
</form>

---

Input Type Search

입력 유형 검색

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

는 <input type="search">(검색 필드는 일반 텍스트 필드처럼 동작) 검색 필드에 사용됩니다.

Example

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

---

Input Type Tel

입력 유형 전화

The <input type="tel"> is used for input fields that should contain a telephone number.

는 <input type="tel">전화 번호를 포함해야 입력 필드에 사용된다.

Note: The tel type is currently only supported in Safari 8.

참고 : 현재 tel 유형은 Safari 8에서만 지원됩니다.

Example

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

---

Input Type Time

입력 유형 시간

The <input type="time"> allows the user to select a time (no time zone).

는 <input type="time">사용자가 한 번 (아무 시간대)을 선택할 수 있습니다.

Depending on browser support, a time picker can show up in the input field.

브라우저 지원에 따라 시간 선택 도구가 입력 필드에 나타날 수 있습니다.

Example

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

---

Input Type Url

입력 유형 URL

The <input type="url"> is used for input fields that should contain a URL address.

는 <input type="url">URL 주소를 포함해야합니다 입력 필드에 사용됩니다.

Depending on browser support, the url field can be automatically validated when submitted.

브라우저 지원에 따라 URL 필드는 제출 될 때 자동으로 유효성을 검사 할 수 있습니다.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

일부 스마트 폰은 URL 유형을 인식하고 URL 입력과 일치하도록 키보드에 ".com"을 추가합니다.

Example

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

---

Input Type Week

입력 유형 주

The <input type="week"> allows the user to select a week and year.

는 <input type="week">사용자가 주 및 연도를 선택 할 수 있습니다.

Depending on browser support, a date picker can show up in the input field.

브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

Example

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

---

Test Yourself with Exercises!

---

HTML Input Type Attribute

HTML 입력 유형 특성

Tag	Description
<input type="">	Specifies the input type to display 표시 할 입력 유형을 지정합니다.

---

출처 : https://www.w3schools.com/html/html_form_input_types.asp