HTML 입력 속성

value 속성

value 속성은 입력 필드의 초기 값을 정의합니다：

인스턴스

<form action="">
 초기 이름:<br>
<input type="text" name="firstname" value="Bill">
<br>
 이름:<br>
<input type="text" name="lastname">
</form>

본인이 직접 시도해보세요

readonly 속성

readonly 속성은 입력 필드가 읽기 전용이며(수정할 수 없음) 정의합니다：

인스턴스

<form action="">
 초기 이름:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 이름:<br>
<input type="text" name="lastname">
</form>

본인이 직접 시도해보세요

readonly 속성은 값이 필요하지 않습니다. readonly="readonly"와 동일합니다。

disabled 속성

disabled 속성은 입력 필드가 비활성화되었음을 정의합니다。

비활성화된 요소는 사용할 수 없고 클릭할 수 없습니다。

비활성화된 요소는 제출되지 않습니다。

인스턴스

<form action="">
 초기 이름:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 이름:<br>
<input type="text" name="lastname">
</form>

본인이 직접 시도해보세요

disabled 속성은 값이 필요하지 않습니다. disabled="disabled"와 동일합니다。

size 속성

size 속성은 입력 필드의 크기를 정의합니다(문자수로 계산)：

인스턴스

<form action="">
 초기 이름:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 이름:<br>
<input type="text" name="lastname">
</form>

본인이 직접 시도해보세요

maxlength 속성

maxlength 속성은 입력 필드가 허용하는 최대 길이를 정의합니다：

인스턴스

<form action="">
 초기 이름:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 이름:<br>
<input type="text" name="lastname">
</form>

본인이 직접 시도해보세요

maxlength 속성이 설정되면, 입력 컨트롤러는 허용된 문자 수를 초과하는 문자를 받아들이지 않습니다。

이 속성은 어떠한 피드백도 제공하지 않습니다. 사용자에게 알림이 필요하다면, JavaScript 코드를 작성해야 합니다。

주의사항:입력 제한은 완벽하지 않습니다. JavaScript는 불법 입력을 추가하는 많은 방법을 제공합니다. 안전하게 입력을 제한하려면, 수신자(서버)도 동시에 제한을 확인해야 합니다。

HTML5 속성

HTML5는 <input>에 다음 속성을 추가했습니다:

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

또한 <form>에 필요한 속성을 추가합니다:

  • autocomplete
  • novalidate

autocomplete 속성

autocomplete 속성은 폼이나 입력 필드가 자동 완성 여부를 정의합니다。

자동 완성이 활성화되면, 브라우저는 사용자의 이전 입력 값에 기반하여 자동으로 값을 채웁니다。

ヒント:폼의 autocomplete 설정을 on으로 설정하면서 특정 입력 필드를 off로 설정하거나 그 반대로 설정할 수 있습니다。

autocomplete 속성은 <form> 및 다음 <input> 유형에 적용됩니다: text, search, url, tel, email, password, datepickers, range 및 color。

인스턴스

자동 완성이 활성화된 HTML 폼(특정 입력 필드가 off):

<form action="action_page.php" autocomplete="on">
   초기 이름:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   이메일: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

본인이 직접 시도해보세요

ヒント:일부 브라우저에서는 자동 완성 기능을 수동으로 활성화해야 할 수 있습니다.

novalidate 속성

novalidate 속성은 <form> 속성에 속합니다.

설정된 경우, 폼을 제출할 때 폼 데이터를 검증하지 않도록 정의합니다.

인스턴스

폼이 제출될 때 검증하지 않도록 지시합니다:

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

본인이 직접 시도해보세요

autofocus 속성

autofocus 속성은 부울 속성입니다.

설정된 경우, 페이지 로드 시 <input> 요소가 자동으로 포커스를 얻도록 정의합니다.

인스턴스

"First name" 입력 필드가 페이지 로드될 때 자동으로 포커스를 얻도록 합니다:

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

본인이 직접 시도해보세요

form 속성

form 속성은 <input> 요소가 속한 하나 이상의 폼을 정의합니다.

ヒント:두 개 이상의 폼을 참조하려면 공백으로 구분된 폼 id 목록을 사용하십시오.

인스턴스

입력 필드는 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">

본인이 직접 시도해보세요

formaction 속성

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

formaction 속성은 <form> 요소의 action 속성을 덮어쓴다.

formaction 속성은 type="submit" 및 type="image"에 적용된다.

인스턴스

두 개의 제출 버튼을 가진 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="demo_admin.asp"
   value="Submit as admin">
</form>

본인이 직접 시도해보세요

formenctype 속성

formenctype 속성은 데이터를 서버로 전송할 때 어떻게 인코딩할지 정의합니다(밖에 method="post"인 폼에만 적용됩니다).

formenctype 속성은 <form> 요소의 enctype 속성을 덮어쓴다.

formenctype 속성은 type="submit" 및 type="image"에 적용됩니다.

인스턴스

기본编码 및 "multipart/form-data"编码의 양식 데이터(form-data)를 전송합니다 (두 번째 submit 버튼):

<form action="demo_post_enctype.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>

본인이 직접 시도해보세요

formmethod 속성

formmethod 속성은 form-data를 action URL로 전송하기 위한 HTTP 메서드를 정의합니다.

formmethod 속성은 <form> 요소의 method 속성을 덮어씁니다.

formmethod 속성은 type="submit" 및 type="image"에 적용됩니다.

인스턴스

두 번째 submit 버튼이 양식의 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" formaction="demo_post.asp">
   value="Submit using POST">
</form>

본인이 직접 시도해보세요

formnovalidate 속성

novalidate 속성은 보올 수 있는 속성입니다.

설정되면, 양식을 제출할 때 <input> 요소에 대한 검증을 수행하지 않습니다.

formnovalidate 속성은 <form> 요소의 novalidate 속성을 덮어씁니다.

formnovalidate 속성은 type="submit"에 사용될 수 있습니다.

인스턴스

验证 및 미验证 두 개의提交 버튼을 가진 양식:

<form action="action_page.php">
   이메일: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

본인이 직접 시도해보세요

formtarget 속성

formtarget 속성이 정의한 이름이나 키워드는 표单을 제출한 후 수신된 응답을 어디서 표시할지를 지시합니다.

formtarget 속성은 <form> 요소의 target 속성을 대체합니다.

formtarget 속성은 type="submit"과 type="image"와 함께 사용될 수 있습니다.

인스턴스

이 표单에는 두 개의 제출 버튼이 있으며, 다른 목표 창에 해당합니다:

<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>

본인이 직접 시도해보세요

height 및 width 속성

height 및 width 속성은 <input> 요소의 높이와 너비를 정의합니다.

height 및 width 속성은 <input type="image">에만 사용됩니다.

주의사항:상대적으로 항상 이미지의 크기를 지정해야 합니다. 브라우저가 이미지 크기를 알지 못하면 페이지가 이미지 로드할 때 깜박입니다.

인스턴스

이미지를 제출 버튼으로 정의하고 height 및 width 속성을 설정합니다:

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

본인이 직접 시도해보세요

list 속성

list 속성이 참조하는 <datalist> 요소에 <input> 요소의 предопределенные опции 포함됩니다.

인스턴스

사용 <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>

본인이 직접 시도해보세요

min과 max 속성

min과 max 속성은 <input> 요소의 최소값과 최대 값을 정의합니다.

min과 max 속성은 입력 유형이 필요할 때 적용됩니다: number, range, date, datetime, datetime-local, month, time 그리고 week.

인스턴스

최소와 최대 값을 가진 <input> 요소:

1980-01-01 이전의 날짜를 입력하세요:
<input type="date" name="bday" max="1979-12-31">
 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">

본인이 직접 시도해보세요

multiple 속성

multiple 속성은 부울 속성입니다.

설정된 경우, 사용자가 <input> 요소에서 하나 이상의 값을 입력할 수 있도록 규정합니다.

multiple 속성은 다음 입력 유형에 적용됩니다: email과 file.

인스턴스

여러 값을 받을 수 있는 파일 업로드 필드:

이미지를 선택하세요：<input type="file" name="img" multiple>

본인이 직접 시도해보세요

pattern 속성

pattern 속성은 <input> 요소 값을 확인하는 정규 표현식을 정의합니다.

pattern 속성은 다음 입력 유형에 적용됩니다: text, search, url, tel, email, 그리고 password.

ヒント:사용자를 도와주기 위해 모델을 설명하는 데 title 속성을 전역적으로 사용하십시오.

ヒント:정규 표현식에 대해 더 많은 지식을 우리의 JavaScript 강의에서 배울 수 있습니다.

인스턴스

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

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

본인이 직접 시도해보세요

placeholder 속성

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

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

placeholder 속성은 다음 입력 유형에 적용됩니다: text, search, url, tel, email 및 password.

인스턴스

플레이스홀더 텍스트를 가진 입력 필드가 있습니다：

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

본인이 직접 시도해보세요

required 속성

required 속성은 부울 속성입니다。

설정되면, 양식을 제출하기 전에 입력 필드를 필히 입력해야 합니다.

required 속성은 다음 입력 유형에 적용됩니다: text, search, url, tel, email, password, 날짜 선택기, number, checkbox, radio 및 파일.

인스턴스

필수 입력 필드가 있습니다：

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

본인이 직접 시도해보세요

step 속성

step 속성은 <input> 요소의 합법적인 숫자 간격을 정의합니다。

예제: step="3"이면, 합법적인 숫자는 -3, 0, 3, 6 등입니다.

ヒント:step 속성은 max 및 min 속성과 함께 사용하여 합법적인 값의 범위를 생성할 수 있습니다。

step 속성은 다음 입력 유형에 적용됩니다: number, range, date, datetime, datetime-local, month, time 및 week。

예제

명확한 법적 숫자 간격을 가진 입력 필드가 있습니다：

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

본인이 직접 시도해보세요