본문 바로가기
Publishing/HTML

HTML input 속성

by 오다다의 이상한 코드 odada 2020. 2. 12.

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:

 

'Publishing > HTML' 카테고리의 다른 글

html header 정보  (0) 2020.02.12
웹접근성 준수 된 회원가입 폼  (0) 2020.02.12
HTML input 속성  (0) 2020.02.12
HTML Form 요소  (0) 2020.02.12
HTML Input Type 속성  (0) 2020.02.11
HTML 폼  (0) 2020.02.11

댓글0