HTML input 속성

value 속성

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

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

First name:

 

읽기 전용 속성

이 readonly속성은 입력 필드가 읽기 전용 (변경 불가능)임을 지정합니다.

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

First name:

 

비활성화 된 속성

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

비활성화 된 입력 필드는 사용할 수없고 클릭 할 수 없으며 양식을 제출할 때 해당 값이 전송되지 않습니다.

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

First name:

 

크기 속성

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

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

First name:

 

maxlength 속성

이 maxlength속성은 입력 필드에 허용되는 최대 길이를 지정합니다.

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

First name:

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

이 maxlength속성은 피드백을 제공하지 않습니다. 사용자에게 알리려면 JavaScript 코드를 작성해야합니다.

 

자동 완성 속성

이 autocomplete속성은 양식 또는 입력 필드가 자동 완성을 설정해야하는지 여부를 지정합니다.

자동 완성이 설정된 경우 브라우저는 사용자가 이전에 입력 한 값을 기반으로 입력 값을 자동으로 완료합니다.

팁 : 양식에 대해 자동 완성 "on"을, 특정 입력 필드에 대해 "off"또는 그 반대로 자동 완성을 수행 할 수 있습니다.

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

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

First name:
Last name:
E-mail:

 

자동 초점 속성

이 autofocus속성은 페이지가로드 될 때 입력 필드가 자동으로 초점을 가져 오도록 지정합니다.

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

First name:

 

최소 및 최대 속성

min및 max속성은 최소 및 최대 값을 지정 <input>요소를.

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

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

Enter a date before 1980-01-01: Enter a date after 2000-01-01: Quantity (between 1 and 5):

 

여러 속성

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

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

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

Select images:

 

placeholder 속성

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

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

이 placeholder속성은 text, search, url, tel, email 및 password와 같은 입력 유형에서 작동합니다.

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

 

필수 속성

이 required속성은 양식을 제출하기 전에 입력 필드를 채워야 함을 지정합니다.

이 required속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란, 라디오 및 파일과 같은 입력 유형에서 작동합니다.

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

Username: