HTML의 Input 특성

value 특성

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

readonly 특성

readonly 속성 입력 필드만을 판독하도록 지정 (cannot be changed) :

readonly 속성은 값을 필요로하지 않는다. 그것은 "읽기 전용"읽기 전용 = 작성과 동일합니다.

disabled 특성

disabled 특성은 입력 필드가 불가능 함을 지정.

비활성화 된 요소는 취소 가능 및 취소 클릭합니다.

장애인 요소는 제출되지 않습니다.

disabled 속성 값을 필요로하지 않는다. 그것은 "불가능"= 장애인 작성과 동일합니다.

size 특성

size 속성은 크기 지정 (in characters) 입력 필드를 :

maxlength 특성

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

A의 maxlength 속성 입력 컨트롤 문자의 허용 된 수보다 더 많은 것을 허용하지 않습니다.

속성은 피드백을 제공하지 않습니다. 당신이 사용자에게 경고하려는 경우, 당신은 자바 스크립트 코드를 작성해야합니다.

HTML5 속성

HTML5 추가 된 following 의 속성 <input> :

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

그리고 following 의 속성 <form> :

• autocomplete
• novalidate

autocomplete 특성

autocomplete 속성은 폼 또는 입력 필드가 가질할지 여부를 지정합니다 autocomplete 설정 또는 해제.

때 autocomplete 켜져 브라우저 자동 완성 값은 사용자가 이전에 입력 한 값을 기준으로.

Tip: 그것은 가질 수 있습니다 autocomplete "on" 폼과 "off" 그 반대의 경우도 마찬가지 특정 입력 필드 또는합니다.

autocomplete 속성은 함께 작동 <form> 과 같은 <input> : 유형의 text, search, url, tel, email, password, datepickers, range, and color .

예

가진 HTML 양식 autocomplete 에 (and off for one input field) :

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

»그것을 자신을 시도

팁 : 일부 브라우저에서는이 활성화해야 할 수 있습니다 autocomplete 이 작동하려면 기능을.

novalidate 특성

novalidate 특성은 인 <form> 속성.

존재하는 경우, novalidate 제출 될 때 폼 데이터가 검증되지 않도록 지정.

예

양식이되지 제출에 검증 할 수 있음을 나타냅니다 :

<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> 요소가 속해있다.

Tip: 하나 이상의 양식을 참조 공백으로 구분 된 목록을 사용하여 form ids .

예

input field HTML 양식 외부에있는 (but still a part of the form) :

<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 속성은 오버라이드 action 의 특성 <form> 요소.

formaction 속성은 "제출"을 = "이미지"를 입력 = 유형으로 사용됩니다.

예

두 가진 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 속성은 서버에 제출할 때 폼 데이터 부호화 방법을 지정 (only for forms with method="post" ) .

formenctype 특성은 겹쳐 enctype 의 속성 <form> 요소.

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

예

전송 form-data 기본 인코딩된다 (the first submit button) 와 같은 인코딩 "multipart/form-data" (the second submit button) :

<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 특성을 보내기위한 HTTP 방식을 정의 form-data 액션 URL에 있습니다.

formmethod 속성은 오버라이드 method 의 특성 <form> 요소.

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

예

두 번째 제출 버튼 형태의 HTTP 메소드를 오버라이드 (override) :

<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 특성 재정의 novalidate 의 속성 <form> 요소.

formnovalidate 속성은 함께 사용할 수있는 type="submit" .

예

전송 버튼이있는 형태 (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>

»그것을 자신을 시도

formtarget 특성

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

formtarget 속성은 겹쳐 target 의 속성 <form> 요소.

formtarget 속성 = "제출"을 = "이미지"를 입력 유형으로 사용할 수 있습니다.

예

이있는 형태는 다른 대상 창문, 전송 버튼 :

<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 와 폭은 특성의 높이와 폭을 지정 <input> 요소.

height 및 width 특성은 함께 사용되는 <input type="image"> .

예

높이와 너비 속성을, 버튼을 제출로 이미지를 정의합니다 :

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

»그것을 자신을 시도

list 특성

list 속성은 지칭 <datalist> 위해 미리 정의 된 옵션을 포함 요소 <input> 엘리먼트.

예

<input> A의 미리 정해진 값으로 소자 <datalist> :

<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 and week .

예

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

»그것을 자신을 시도

multiple Attribute

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

존재하는 경우, 사용자가 하나 개 이상의 값을 입력 할 수 있도록 지정 <input> 엘리먼트.

multiple : 속성은 다음과 같은 입력 유형과 작동 email 및 file .

예

여러 값을 받아들이는 파일 업로드 필드 :

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

»그것을 자신을 시도

pattern 특성

pattern 특성은 정규 표현식 지정 <input> 엘리먼트의 값에 대해 점검된다.

pattern : 속성은 다음과 같은 입력 유형과 작동 text, search, url, tel, email, and password .

팁 : 글로벌 사용 제목 사용자에게 도움이되는 패턴을 설명하는 속성을.

Tip: 에 대해 자세히 알아 정규 표현식 우리의 자바 스크립트 튜토리얼입니다.

예

세 개의 문자를 포함 할 수있는 입력 필드 (no numbers or special characters) :

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

»그것을 자신을 시도

placeholder 특성

placeholder 속성은 입력 필드의 기대치 설명 힌트 지정 (a sample value or a short description of the format) .

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

placeholder : 속성은 다음과 같은 입력 유형과 작동 text, search, url, tel, email, and password .

예

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

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

»그것을 자신을 시도

required 특성

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

존재하는 경우, 이는 입력 필드 양식을 제출하기 전에 채워 져야 함을 지정.

required : 속성은 다음과 같은 입력 유형과 작동 text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

예

필수 입력 필드 :

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

»그것을 자신을 시도

step 특성

step 속성은 다수의 유효한 간격을 지정하는 <input> 엘리먼트.

예 스텝 = "3", 합법적 번호 -3, 0, 3, 6이 될 수있는 경우 등

Tip: step 속성은 함께 사용할 수있는 max 및 min 유효한 값의 범위를 생성하는 속성.

step : 속성은 다음과 같은 입력 유형 작동 number, range, date, datetime, datetime-local, month, time and week .

예

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

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

»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4»