HTML5 새로운 양식 속성

HTML5의 <form> 및 <input> 태그에 몇 가지 새로운 속성이 추가되었습니다.

<form>새 속성: 자동완성 무효화

<input> 새로운 속성:
자동 완성
자동 초점
form
formaction
formenctype
formmethod
formnovalidate
formtarget
높이 및 너비
목록
최소 및 최대
다중
패턴(정규 표현식)
자리 표시자
필수
단계

<form> / <input> autocomplete 속성
autocomplete 속성은 양식 또는 입력 필드에 자동 완성 기능이 있어야 함을 지정합니다.
사용자가 자동 완성 필드에 입력을 시작하면 브라우저에 필드를 채울 수 있는 옵션이 표시되어야 합니다.
팁: 자동 완성 속성은 양식 요소에서 활성화될 수 있지만 입력 요소에서는 비활성화될 수 있습니다.
참고: 자동 완성은 <form> 태그뿐만 아니라 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상과 같은 유형의 <input>에서도 작동합니다.
예
HTML 양식에서 자동 완성 켜기(하나의 입력 필드가 자동 완성을 끕니다):

<form action="demo-form.php" autocomplete =" on">

이름:<input type="text" name="fname"><br>

성: <input type="text" name="lname"><br>

이메일: <input type="email " name ="email" autocomplete="off"><br>

<input type="submit"> ;/form> 양식 또는 입력 필드는 양식을 제출할 때 확인됩니다. 예

제출된 양식 데이터를 확인할 필요가 없습니다

<input> autofocus 속성
autofocus 속성은 부울 속성입니다.
autofocus 속성은 페이지가 로드되었습니다.
예
페이지가 로드될 때 "이름" 입력 입력 필드가 자동으로 포커스되도록 합니다.

이름:<input type="text" name ="fname" autofocus>

<input> 양식 속성
양식 속성은 입력 필드가 속하거나 여러 양식에 속합니다.
팁: 두 개 이상의 양식을 참조해야 하는 경우 공백으로 구분된 목록을 사용하세요.
인스턴스
양식 외부에 있는 입력 필드는 HTML 양식을 참조합니다(입력 양식은 여전히 양식의 일부입니다):

<input> 🎜 >formaction 속성은 양식 제출의 URL 주소를 설명하는 데 사용됩니다.
formaction 속성은 <form> 요소의 action 속성을 재정의합니다.
참고: formaction 속성은 type=" submit" 및 type="image"에 사용됩니다.
예
다음 HTMLform 양식에는 주소가 다른 두 개의 제출 버튼이 포함되어 있습니다.

< form action=" 데모-form.php">

이름: <input type="text" name="fname"><br> 🎜>

성: <input type="text" name="lname"><br>

<input type="submit" formaction="demo-admin.php"

value="관리자로 제출">

</form> 속성

formenctype 속성은 제출된 데이터의 인코딩을 설명합니다. 서버에 대한 양식(양식 양식의 method="post" 양식에만 해당)

formenctype 속성은 양식 요소의 enctype 속성을 재정의합니다.

주로: 이 속성은 type="submit" 및 type="image"와 함께 사용됩니다.
예첫 번째 제출 버튼에는 양식 데이터를 보내기 위한 기본 인코딩이 있고 두 번째 제출 버튼은 "multipart/form-data" 인코딩 형식으로 양식 데이터를 보냅니다.

<form action="demo-post_enctype.php" method="post">

이름: <input type="text" name="fname"><br>

<input type="submit" value= "제출">

<input type="submit" formenctype="multipart/form-data"

value="제출 Multipart/form-data">

</form>

<input> formmethod 속성
formmethod 속성은 양식이 제출되는 방식을 정의합니다.
formmethod 속성은 <form> 요소의 method 속성을 재정의합니다.
참고: 이 속성은 type="submit" 및 type="image"와 함께 사용할 수 있습니다.
예
양식 제출 방법 재정의 예:

<form action="demo-form.php" method="get">

이름: <input type="text" name="fname"><br>

성: < ;input type="text" name="lname"><br>

<input type="submit" value="제출"> > <input type="submit" formmethod="post" formaction="demo-post.php"

value="POST를 사용하여 제출"> ;

</form>

<input> formnovalidate 속성

novalidate 속성은 부울 속성임을 설명합니다. 양식을 제출할 때 <input> 요소의 유효성을 검사할 필요가 없습니다.

formnovalidate 속성은 <form> 요소의 novalidate 속성을 재정의합니다.
참고: formnovalidate 속성은 type="submit
예
두 개의 제출 버튼이 있는 양식( 검증 없이) :

<form action="demo-form.php">

E -mail: < ;input type="email" name="userid"><br>

<input type="submit" value="Submit">< ;br>

<input type="submit" formnovalidate value="확인 없이 제출">

</form>

<input> >formtarget 속성은 양식 제출 데이터가 수신된 후 표시되는 이름이나 키워드를 지정합니다. formtarget 속성은 <form> 요소의 target 속성을 재정의합니다.
참고: formtarget 속성은 type="submit" 및 type="image"와 함께 사용됩니다.
예
두 개의 submit 버튼 다른 창에 표시되는 양식:

<form action="demo-form.php">

이름: <input type="text" name="fname"><br>
성: <input type="text" name=" lname"><br>
<input type="submit" value="정상적으로 제출">
< ;input type="submit" formtarget="_blank"
value="새 창에 제출">
</ form>

<input> 높이 및 너비 속성 높이 및 너비 속성은 이미지 유형에 대한 <input>을 지정합니다. 라벨의 이미지 높이와 너비입니다. 참고: 높이 및 너비 속성은 이미지 유형의 <input> 태그에만 적용됩니다.
팁: 이미지는 일반적으로 높이와 너비 속성을 모두 지정합니다. 이미지에 높이와 너비가 설정된 경우 페이지가 로드될 때 이미지에 필요한 공간이 유지됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며 적절한 공간을 확보할 수 없습니다. 이미지로 인해 로드 프로세스 중에 페이지 레이아웃 효과가 변경됩니다(이미지가 로드된 경우에도).
예
는 높이 및 너비 속성을 사용하여 이미지 제출 버튼을 정의합니다.

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

<input> 목록 속성 목록 속성은 입력 필드의 데이터 목록을 지정합니다. datalist는 입력 필드에 대한 옵션 목록입니다. OperaSafariChromeFirefoxInternet Explorer
인스턴스
<datalist>의 사전 정의된 <input> 값:

<input list="browsers"> 🎜>
<datalist id="browsers">
<옵션 값="Internet Explorer"> >
<option value="Firefox">
<option value="Chrome">
> <옵션 값="오페라">
<옵션 값="사파리">
<input> min 및 max 속성

min, max 및 step 속성은 숫자가 포함된 입력 유형에 대한 제한(제약조건)을 지정하는 데 사용됩니다. 또는 날짜. 참고: min, max 및 step 속성은 날짜 선택기, 숫자 및 범위와 같은 <input> 태그 유형에 적용됩니다.
예
<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">

수량(1~5):

<input type="number" name="Quantity" min="1" max="5">
< ; input> multiple attribute
multiple 속성은 부울 속성입니다.
multiple 속성은 <input> 요소에서 여러 값을 선택할 수 있음을 지정합니다.
참고: 다중 속성은 이메일 및 파일과 같은 <input> 태그 유형에 적용됩니다. : 이메일, 파일.
예여러 파일 업로드:이미지 선택: <input type="file" name="img" multiple>

<input> 패턴 속성
패턴 속성은 <input> 요소의 값을 확인하는 데 사용되는 정규식을 설명합니다.
참고: 패턴 속성은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호 등의 <input> 태그 유형에 적용됩니다.
팁: 패턴을 설명하기 위해 전역 제목 속성과 함께 사용됩니다. .
예
다음 예는 세 글자만 포함할 수 있는 텍스트 필드를 보여줍니다(숫자 및 특수 문자 제외).
국가 코드: <input type= "text" name="country_code" 패턴="[A-Za-z]{3}" title="3자리 국가 코드">

<input> 자리 표시자 속성
자리 표시자 속성은 입력 필드의 예상 값을 설명하는 힌트를 제공합니다.
사용자가 값을 입력하기 전에 입력 필드에 간단한 프롬프트가 표시됩니다.
참고: 자리 표시자 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호 등의 <input> 태그 유형에 적용됩니다.
예
입력 필드 프롬프트 텍스트 t:
<input type="text" name="fname" placeholder="First name"> 🎜>

<input> 필수 속성필수 속성은 부울 속성입니다.
필수 속성은 제출하기 전에 입력 필드를 작성하세요(비워둘 수 없음).
참고: 필수 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란, 라디오 및 파일과 같은 <input> 태그 유형에 적용됩니다.
예
비워둘 수 없는 입력 필드:

사용자 이름: <input type="text" name="usrname" 필수> 🎜>
<input> 단계 속성
단계 속성은 입력 필드의 유효한 숫자 간격을 지정합니다. step="3"인 경우 유효한 숫자는 -3, 0, 3, 6 등입니다.팁: step 속성을 max 및 min 속성과 함께 사용하여 범위 값을 생성할 수 있습니다.
참고: step 속성은 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간, 주 등의 유형이 함께 사용되는 것과 같습니다.
인스턴스
는 입력 단계가 3임을 지정합니다.

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

<output> 요소
HTML5에는 스크립트로 작성된 출력과 같은 다양한 유형의 출력 결과를 나타내는 데 사용되는 새로운 요소 <output>도 도입되었습니다.
for 속성을 사용하여 출력 요소와 계산에 영향을 미치는 문서의 다른 요소(예: 입력 소스 또는 매개변수) 간의 관계를 지정할 수도 있습니다. for 속성의 값은 공백으로 구분된 다른 요소의 ID 목록입니다.
placeholder 속성
HTML5에는 placeholder라는 새로운 속성이 도입되었습니다. <input> 및 <textarea> 요소에 대한 이 속성은 사용자에게 필드에 입력할 수 있는 내용에 대한 힌트를 제공합니다. 자리 표시자 문자에는 캐리지 리턴이나 줄 바꿈을 포함할 수 없습니다.
다음은 자리 표시자 속성의 간단한 구문입니다.
<input type="text" name="search" placeholder="search the web"/> 🎜>
이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.
필수 속성 이제 제출할 수 없는 빈 텍스트 상자와 같은 클라이언트측 유효성 검사를 처리하기 위해 JavaScript를 사용할 필요가 없습니다. HTML5에 새로운 속성이 도입되었기 때문입니다. 필수 속성이라고 하면 입력 상자에 값이 있는지 확인하는 데 사용할 수 있습니다.

<input type="text" name="search" 필수/> 🎜>이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.
인스턴스 1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b> IE不支持form属性</p> </body> </html>
인스턴스 2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </body> </html>

지속적인 학습

||

새로운 파일

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action=""> 输入 1970-01-01 之前的日期: <input type="date" name="bday" max="1969-12-31"><br> 输入 2010-12-31 之后的日期: <input type="date" name="bday" min="2011-01-01"><br> 数量 (在1和9之间): <input type="number" name="quantity" min="1" max="9"><br> <input type="submit"> </form> </body> </html>

제출하다 코드 재설정
자동운전