HTML5 양식 속성

HTML5의 새로운 양식 등록

HTML5의 <형식>과 <입력> 태그는 여러 가지 새로운 속성을 추가합니다.

<양식> 새로운 속성 :

• 자동 완성
• NOVALIDATE

<입력> 새로운 속성 :

• 자동 완성
• 자동 초점
• 형태
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• 높이와 폭
• 명부
• 최소 및 최대
• 배수
• 패턴 (정규 표현식)
• 자리 표시 자
• 필요
• 단계

<양식> / <입력> 자동 완성 속성

자동 완성 속성은 폼 또는 입력 필드 자동 완성이 있어야 지정합니다.

사용자가 자동 ​​완성 필드에 입력을 시작하면 브라우저는이 필드에 입력하는 옵션을 표시합니다.

팁 : 완성 가능한 형태로 소자가 온되고, 입력 요소에 오프 때문이다.

참고 : 자동 완성이 적용 <양식> 태그와 <INPUT> 태그의 다음과 같은 유형의 텍스트, 검색, URL, 전화 , 이메일, 비밀번호, datepickers, 범위 및 색상.

예

오픈 자동 완성에서 HTML 양식 (셧다운 입력 필드 자동 완성)

<양식 행동 = "데모 form.php" 자동 완성 => 성 "의" <입력 유형 = "텍스트" = "FNAME"> <br>의 이름을 성을 <입력 유형 = "텍스트" = "LNAME"> <br> 이름 의 E-mail : <입력 = "이메일"을 입력 = "이메일"이름을 자동 완성 = "해제"> <br> <입력 > = "제출"을 입력 </ FORM>

»시도

팁 : 일부 브라우저, 당신은 재산을 픽업하기 위해, 자동 완성 기능을 활성화해야 할 수 있습니다.

<양식> NOVALIDATE 등록

부울 속성 NOVALIDATE 속성입니다.

양식 입력 또는 도메인의 유효성을 검사하지 않아야 양식을 제출할 때 NOVALIDATE 속성을 지정합니다.

예

검증 양식 데이터를 제출하지 않고

<양식 행동 = "데모 form.php" NOVALIDATE>의 E-mail : <입력 = "이메일"을 입력 = "USER_EMAIL를"이름> <입력 > = "제출"을 입력 </ FORM>

»시도

<입력> 자동 초점 속성

자동 초점 속성은 부울 속성입니다.

페이지가로드, 도메인이 자동으로 포커스를받을 때 자동 초점 속성을 지정합니다.

예

"성"입력 필드가 페이지로드에 자동 초점을 입력하자 :

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

»시도

<입력> 양식 속성

속성 양식 입력 필드는 하나 이상의 형태에 속하는 지정한다.

팁 : 하나 이상의 양식을 인용 공백으로 구분 된 목록을 사용합니다.

예

입력 필드 외부 형태의 양식에 위치한 (양식은 여전히 ​​양식 입력의 일부를 형성) HTML 양식을 의미한다 :

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

»시도

<입력> formaction 속성

formaction 속성은 양식 제출의 URL을 설명하는 데 사용됩니다.

formaction는 액션 속성에 재정의 <형태> 요소를 속성.

참고 : formaction 유형 = "제출"과 유형 = "이미지"때문이다.

예

HTMLform 다음과 같은 형태가 두 개의 서로 다른 주소 버튼을 포함 제출

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

»시도

<입력> formenctype 속성

formenctype 속성 ( "게시물"양식 = 유일한 형태의 양식 방법) 양식이 서버 데이터 인코딩에 제출 설명

formenctype 특성 재 지정은 폼 요소 속성 ENCTYPE.

주 :이 속성 유형 = "제출"과 함께 사용 = "이미지"를 입력합니다.

예

양식 데이터를 전송하는 첫 번째 제출 버튼은 기본적으로 인코딩되면, 두 번째 "다중 / 폼 데이터"양식 데이터를 전송하는 형식을 인코딩 버튼을 제출

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

»시도

<입력> formmethod 등록

formmethod 속성은 방법 양식 제출을 정의합니다.

의 <폼> 요소의 method 속성을 포함 formmethod 속성입니다.

참고 :이 속성은 유형과 함께 사용할 수 있습니다 = "제출"과 함께 사용 = "이미지"를 입력합니다.

예

예로서 양식 제출을 다시 정의 :

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

»시도

<입력> formnovalidate 등록

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

NOVALIDATE 속성은 양식이 제출 될 때 <입력> 요소를 검증 할 필요가 없습니다 설명합니다.

formnovalidate 속성은 NOVALIDATE 속성 <형태> 요소를 무시합니다.

formnovalidate 속성 유형은 "= 사용하기 위해 제출합니다

예

두 개의 버튼 (검증에 해당되지 않음) 양식을 제출 :

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

»시도

<입력> formtarget 등록

formtarget 속성은 이름이나 양식이 제출 된 후 디스플레이 데이터를 수신 나타내는 키워드를 지정합니다.

formtarget 특성 재 지정 <형태> 요소의 대상 속성.

참고 : = formtarget속성 유형을 "제출"과 함께 사용 = "이미지"를 입력합니다.

예

두 개의 버튼은 다른 창에 표시되는 양식을 제출 :

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

»시도

<입력> 높이와 너비 속성

높이 <INPUT> 태그 이미지의 높이와 폭의 화상 타입에 대해 지정된 폭 특성.

참고 : 높이와 너비 속성은 이미지 유형 <입력> 태그에 적용됩니다.

팁 : 이미지가 일반적으로 높이와 너비 속성을 지정합니다.이미지는 이미지에 필요한 공간의 높이와 폭을 설정하면로드 된 페이지가 유지 될 때. 이러한 특성이 없으면, 브라우저는 이미지의 크기를 모르기 및 적절한 공간을 따로 설정할 수 없다. (이미지가로드 있지만)로드 과정 사진 페이지 레이아웃 변경에 영향 것이다.

예

이미지가 버튼을 제출 높이와 너비 속성을 사용하여 정의합니다 :

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

»시도

<입력> 목록 속성

DataList와리스트의 속성이 입력 필드를 지정한다. DataList와 입력 필드에 대한 옵션의 목록입니다.

예

<DataList에>의 <입력> 값에 미리 정의 :

<input list="browsers">

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

»시도

<입력> 최소 및 최대 속성

최소, 최대, 단계 속성은 (제약) 제한 숫자 나 날짜를 포함하는 입력 형식으로 사용됩니다.

최소, 최대, 그리고 단계 속성은 <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">

»시도

<입력> 여러 속성

여러 속성은 부울 속성입니다.

여러 속성 지정 <입력> 요소는 여러 값을 선택합니다.

참고 : 이메일 및 파일 : 여러속성이 <입력> 태그의 다음과 같은 유형에 적용

예

여러 파일을 업로드 :

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

»시도

<입력> 패턴 속성

패턴 속성 <INPUT> 엘리먼트의 값을 검증하는 데 사용할 정규식을 설명한다.

참고 : 텍스트, 검색, URL, 전화 : 패턴 속성은<INPUT> 태그의 다음과 같은 유형의 적용 , 이메일 과 암호를 입력합니다.

팁 : 그것은 세계에 사용되는 제목 속성은 모드를 설명합니다.

팁 : 당신은 우리의에서와 할 수있는 자바 스크립트 튜토리얼은 정규 표현식의 내용에 대한 자세한 내용은

예

다음의 예는 세 글자는 텍스트 필드를 (아무 숫자 나 특수 문자)를 포함 보여줍니다

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

»시도

<입력> 자리 속성

틀 특성 힌트 (힌트), 입력 필드의 기대 값을 설명합니다.

간단한 알림은 사용자 입력 값 앞에 입력 필드에 표시된다.

참고 : 텍스트, 검색, URL, 전화 : 자리 표시 자속성이 <입력> 태그의 다음과 같은 유형의 적용 , 이메일 과 암호를 입력합니다.

예

입력 필드 프롬프트 텍스트 t :

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

»시도

<입력> 필요한 특성

필수 속성은 부울 속성입니다.

필수 속성은 입력 필드를 제출하기 전에 (빈되지 않음) 작성해야 함을 지정합니다.

참고 : 텍스트, 검색, URL, 전화 : <INPUT> 태그의 다음과 같은 유형의 필수속성 , 이메일, 비밀번호, 날짜 선택기, 수, 체크 박스, 라디오 및 파일.

예

없는 빈 입력 필드 수 :

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

»시도

<입력> 단계 속성

상기 입력 필드에 대한 공정 특성 법적 번호 간격을 지정한다.

단계 = "3", 법적 번호 -3,0,3,6 될 수있는 경우 등

팁 : 단계 속성은 지역 값 최대를 만들 수 있습니다 및 분 속성.

참고 : 수, 범위, 날짜, 날짜 : 단계는 다음과 같은 유형과 함께 사용 유형의 속성 , 날짜 로컬, 월, 시간 및 주.

예

소정 입력 단계 3 단계 :

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

»시도

HTML5 <입력> 태그