[R]HTML 입력 속성(HTML Input Attributes)

The value Attribute

속성 값

The value attribute specifies the initial value for an input field:

value특성은 입력 필드에 대한 초기 값을 지정

Example

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>

---

The readonly Attribute

readonly 특성

The readonly attribute specifies that the input field is read only (cannot be changed):

이 readonly속성은 입력 필드가 읽기 전용임을 나타냅니다 (변경할 수 없음).

Example

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>

---

The disabled Attribute

무효 인 속성

The disabled attribute specifies that the input field is disabled.

이 disabled속성은 입력 필드가 비활성화되도록 지정합니다.

A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form:

비활성화 된 입력란은 사용할 수없고 클릭 할 수 없으며 양식을 제출할 때 그 값은 전송되지 않습니다.

Example

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form>

---

The size Attribute

크기 특성

The size attribute specifies the size (in characters) for the input field:

size속성은 입력 필드 (문자) 크기를 지정합니다 :

Example

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form>

---

The maxlength Attribute

maxlength 속성

The maxlength attribute specifies the maximum allowed length for the input field:

maxlength특성은 입력 필드의 최대 허용 길이를 지정한다 :

Example

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>

With a maxlength attribute, the input field will not accept more than the allowed number of characters.

A의 maxlength속성, 입력 필드는 문자의 허용 된 수 이상을 허용하지 않습니다.

The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.

이 maxlength속성은 어떤 피드백도 제공하지 않습니다. 사용자에게 경고하려면 JavaScript 코드를 작성해야합니다.

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. 

참고 : 입력 제한은 절대적이지 않으며 JavaScript는 여러 가지 방법으로 불법 입력을 추가합니다. 

To safely restrict input, it must be checked by the receiver (the server) as well!

입력을 안전하게 제한하려면 수신자 (서버)도 확인해야합니다!

---

HTML5 Attributes

HTML5 속성

HTML5 added the following attributes for <input>:

HTML5는 다음과 같은 속성을 추가했습니다 <input>.

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

and the following attributes for <form>:

에 대한 다음과 같은 속성 <form>:

• autocomplete
• novalidate

---

The autocomplete Attribute

자동 완성 특성

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

이 autocomplete속성은 양식 또는 입력 필드의 자동 완성을 설정할지 또는 해제 할지를 지정합니다.

When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

자동 완성 기능이 켜지면 브라우저는 사용자가 이전에 입력 한 값을 기반으로 입력 값을 자동으로 완성합니다.

Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

팁 : 양식에 대해 자동 완성 기능을 사용하고 특정 입력 필드에 대해 '사용 안 함'또는 그 반대로 자동 완성 기능을 사용할 수 있습니다.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

autocomplete속성은 함께 작동 <form>다음과 같은 <input>텍스트, 검색, URL, 전화, 이메일, 비밀번호, datepickers, 범위, 색상 : 유형.

Example

An HTML form with autocomplete on (and off for one input field):

자동 완성 기능이있는 HTML 양식 (한 입력 필드에서 사용 중지됨) :

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Tip: In some browsers you may need to activate the autocomplete function for this to work.

팁 : 일부 브라우저의 경우 자동 완성 기능을 활성화해야 작동 할 수 있습니다.

---

The novalidate Attribute

novalidate 특성

The novalidate attribute is a <form> attribute.

novalidate속성은입니다 <form>속성.

When present, novalidate specifies that the form data should not be validated when submitted.

novalidate가 있으면 양식 데이터를 제출할 때 양식 데이터의 유효성을 검사해서는 안됨을 지정합니다.

Example

Indicates that the form is not to be validated on submit:

제출시 양식의 유효성을 확인할 수 없음을 나타냅니다.

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

---

The autofocus Attribute

자동 초점 속성

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

이 autofocus속성은 페이지가로드 될 때 입력 필드가 자동으로 포커스를 얻도록 지정합니다.

Example

Let the "First name" input field automatically get focus when the page loads:

페이지가로드 될 때 "이름"입력 필드에 자동으로 포커스가 놓이게하십시오.

First name:<input type="text" name="fname" autofocus>

---

The form Attribute

양식 속성

The form attribute specifies one or more forms an <input> element belongs to.

form속성은 하나 개 이상의 형태로 지정 <input>요소가 속해있다.

Tip: To refer to more than one form, use a space-separated list of form ids.

팁 : 둘 이상의 양식을 참조하려면 공백으로 구분 된 양식 ID 목록을 사용하십시오.

Example

An input field located outside the HTML form (but still a part of the form):

HTML 양식 외부에있는 입력 필드 (양식의 일부 임) :

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>
 
Last name: <input type="text" name="lname" form="form1">

---

The formaction Attribute

formaction 속성

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

formaction속성은 폼이 제출 될 때 입력 컨트롤을 처리 할 파일의 URL을 지정합니다.

The formaction attribute overrides the action attribute of the <form> element.

formaction 속성은 <form>요소 의 조치 속성을 겹쳐 씁니다 .

The formaction attribute is used with type="submit" and type="image".

formaction 속성과 함께 사용 type="submit"하고 type="image".

Example

An HTML form with two submit buttons, with different actions:

두 개의 제출 버튼이있는 HTML 양식에는 여러 가지 조치가 있습니다.

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

---

The formenctype Attribute

formenctype 속성

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").

이 formenctype속성은 양식 데이터를 제출할 때 인코딩 할 방법을 지정합니다 (method = "post"가있는 양식에만 해당).

The formenctype attribute overrides the enctype attribute of the <form> element.

formenctype속성은의에 enctype 속성에 우선 <form>요소.

The formenctype attribute is used with type="submit" and type="image".

formenctype속성과 함께 사용 type="submit"하고 type="image".

Example

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):

기본적으로 인코딩 된 첫 번째 제출 버튼 인 양식 데이터를 '다중 파트 / 양식 데이터'로 인코딩합니다 (두 번째 제출 버튼).

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

---

The formmethod Attribute

formmethod 속성

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

이 formmethod속성은 양식 데이터를 작업 URL로 보내는 HTTP 메소드를 정의합니다.

The formmethod attribute overrides the method attribute of the <form> element.

formmethod속성은 방법 속성 오버라이드 (override) <form>요소를.

The formmethod attribute can be used with type="submit" and type="image".

formmethod속성은 사용할 수 있습니다 type="submit"및 type="image".

Example

The second submit button overrides the HTTP method of the form:

두 번째 제출 버튼은 다음과 같은 형식의 HTTP 메소드를 대체합니다.

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

---

The formnovalidate Attribute

formnovalidate 특성

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

이 formnovalidate속성은 <form>요소 의 novalidate 속성보다 우선합니다 .

The formnovalidate attribute can be used with type="submit".

이 formnovalidate속성은와 함께 사용할 수 있습니다 type="submit".

Example

A form with two submit buttons (with and without validation):

두 개의 제출 버튼이있는 양식 (유효성 검사가 있거나없는) :

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

---

The formtarget Attribute

formtarget 속성

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

formtarget속성은 이름 또는 양식을 제출하면 수신되는 응답을 표시하는 위치를 나타내는 키워드를 지정한다.

The formtarget attribute overrides the target attribute of the <form> element.

formtarget속성은 대상 속성 우선 <form>요소.

The formtarget attribute can be used with type="submit" and type="image".

formtarget속성은 사용할 수 있습니다 type="submit"및 type="image".

Example

A form with two submit buttons, with different target windows:

서로 다른 대상 창이있는 두 개의 제출 버튼이있는 양식 :

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

---

The height and width Attributes

높이 및 너비 특성

The height and width attributes specify the height and width of an <input type="image"> element.

height및 width속성은 높이와 너비 지정 <input type="image">요소를.

Always specify the size of images. If the browser does not know the size, the page will flicker while images load.

항상 이미지의 크기를 지정하십시오. 브라우저가 크기를 모르는 경우 이미지가로드되는 동안 페이지가 깜박입니다.

Example

Define an image as the submit button, with height and width attributes:

height 및 width 속성을 가진 이미지를 제출 버튼으로 정의하십시오.

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

---

The list Attribute

list 속성

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

이 list속성은 <datalist><input> 요소에 대해 미리 정의 된 옵션을 포함 하는 요소를 참조합니다 .

Example

An <input> element with pre-defined values in a <datalist>:

<datalist>에 미리 정의 된 값을 가진 <input> 요소 :

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

---

The min and max Attributes

최소 및 최대 속성

The min and max attributes specify the minimum and maximum values for an <input> element.

min및 max속성은 대한 최소 및 최대 값을 지정 <input>요소입니다.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

min및 max속성은 다음과 같은 입력 유형 작업 : 수, 범위, 날짜, 날짜 로컬, 월, 시간, 주.

Example

<input> elements with min and max values:

최소값과 최대 값을 갖는 <input> 요소 :

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

---

The multiple Attribute

다중 속성

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

이 multiple속성은 사용자가 <input>요소 에 둘 이상의 값을 입력 할 수 있도록 지정합니다 .

The multiple attribute works with the following input types: email, and file.

이 multiple속성은 전자 메일 및 파일과 같은 입력 유형에서 작동합니다.

Example

A file upload field that accepts multiple values:

여러 값을 허용하는 파일 업로드 필드 :

Select images: <input type="file" name="img" multiple>

---

The pattern Attribute

패턴 속성

The pattern attribute specifies a regular expression that the <input> element's value is checked against.

이 pattern속성은 <input>요소의 값이 검사 되는 정규 표현식을 지정합니다 .

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

pattern텍스트, 검색, URL, 전화, 이메일, 비밀번호 : 속성은 다음과 같은 입력 유형과 작동합니다.

Tip: Use the global title attribute to describe the pattern to help the user.

팁 : 전역 제목 속성을 사용 하여 사용자를 돕기위한 패턴을 설명하십시오.

Tip: Learn more about regular expressions in our JavaScript tutorial.

팁 : JavaScript 자습서에서 정규 표현식 에 대해 자세히 알아보십시오 .

Example

An input field that can contain only three letters (no numbers or special characters):

세 글자 만 포함 할 수있는 입력 필드 (숫자 또는 특수 문자 없음) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

---

The placeholder Attribute

자리 표시 자 특성

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

이 placeholder속성은 입력 필드의 예상 값 (샘플 값 또는 형식의 간단한 설명)을 설명하는 힌트를 지정합니다.

The hint is displayed in the input field before the user enters a value.

힌트는 사용자가 값을 입력하기 전에 입력 필드에 표시됩니다.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

placeholder텍스트, 검색, URL, 전화, 이메일, 비밀번호 : 속성은 다음과 같은 입력 유형과 작동합니다.

Example

An input field with a placeholder text:

자리 표시 자 텍스트가있는 입력 필드 :

<input type="text" name="fname" placeholder="First name">

---

The required Attribute

필수 속성

The required attribute specifies that an input field must be filled out before submitting the form.

required특성은 입력 필드 양식을 제출하기 전에 채워 져야 함을 지정.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

required텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 체크 박스, 라디오, 파일 : 속성은 다음과 같은 입력 유형과 작동합니다.

Example

A required input field:

필수 입력 필드 :

Username: <input type="text" name="usrname" required>

---

The step Attribute

단계 속성

The step attribute specifies the legal number intervals for an <input> element.

이 step속성은 <input>요소 의 유효한 번호 간격을 지정합니다 .

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

예 : step = "3"이면 올바른 숫자는 -3, 0, 3, 6 등이 될 수 있습니다.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

팁 : step 속성은 max 및 min 속성과 함께 사용하여 유효한 값 범위를 만들 수 있습니다.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

이 step속성은 숫자, 범위, 날짜, datetime-local, 월, 시간 및 주 입력 유형과 함께 작동합니다.

Example

An input field with a specified legal number intervals:

지정된 법적 번호 간격을 가진 입력 필드 :

<input type="number" name="points" step="3">

---

Test Yourself with Exercises!

            

---

HTML Form and Input Elements

HTML 양식 및 입력 요소

Tag	Description
<form>	Defines an HTML form for user input 사용자 입력을위한 HTML 양식을 정의합니다.
<input>	Defines an input control 입력 컨트롤을 정의합니다.

---

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