html5의 새로운 양식 속성은 무엇입니까?

html5개의 새로운 양식 속성에는 autocomplete, novalidate, autofocus, form, formaction, formmethod, formnovalidate, formtarget, list, min, max, step 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 새 양식 속성

HTML5의

및 태그에 몇 가지 새 속성이 추가되었습니다.

autocomplete
novalidate
새로운 속성:

autocomplete: 자동 완성, 다음 입력 제안을 위해 이전에 제출된 데이터를 자동으로 기록할지 여부.
autofocus: 자동으로 입력 초점을 얻습니다.
form: 값은 양식의 ID입니다. 설정하면 입력 필드를 양식 외부에 배치할 수 있습니다.
formaction: 양식 제출을 설명하는 데 사용되는 URL 주소
formenctype: 서버에 양식 제출의 데이터 인코딩을 설명합니다(양식 양식의 method="post" 양식에만 해당)
formmethod: 정의된 방법 양식이 제출되었습니다.
formnovalidate: 양식을 제출할 때 요소의 유효성을 검사할 필요가 없음을 설명합니다.
formtarget: 양식 제출 데이터가 수신된 후 표시되는 이름이나 키워드를 지정합니다.
높이 및 너비: 이미지 유형의 태그에 사용되는 이미지 높이와 너비를 지정합니다.
list: 입력 필드의 데이터 목록을 지정합니다. datalist는 입력 필드에 대한 옵션 목록입니다.
min 및 max: 입력 개수의 최소값 또는 최대값을 제한합니다.
multiple: 여러 입력값 허용 여부 이 속성을 선언하면 쉼표로 구분된 여러 값을 입력할 수 있습니다. 입력 상자.
pattern(regexp): 입력의 유효성을 검사하는 정규식을 지정합니다. (일반적으로 시작과 끝 부분에 ^$를 추가하는 것이 기본값입니다.)
자리 표시자: 입력 상자에 프롬프트 텍스트를 표시하는 데 사용되며 값과 달리 제출할 수 없습니다.
필수: 양식이 제출되면 입력이 있는지 확인합니다. 그렇지 않은 경우 프롬프트 메시지가 나타납니다.
step: min과 함께 사용되는 입력 숫자의 단계 크기를 제한합니다.
maxlength: 최대 길이를 제한합니다. 입력이 있을 때만 유용합니다. 중국어와 영어를 구분하지 않습니다.
minlength: 최소 길이를 제한하지만 H5 표준 속성이 아니며 일부 브라우저에서만 지원됩니다.

novalidate 속성 novalidate 속성은 부울(Boolean) 속성입니다.

novalidate 속성은 양식을 제출할 때 양식 또는 입력 필드의 유효성을 검사하지 않도록 지정합니다.

예:

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

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

자동 완성 속성 autocomplete 속성은 양식 또는 입력 필드에 자동 완성 기능이 있어야 함을 지정합니다.

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

팁: 자동 완성 속성은 양식 요소에서 켜져 있지만 입력 요소에서는 꺼져 있을 수 있습니다.

참고: 자동 완성은 태그뿐만 아니라 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상과 같은 유형의 태그에서도 작동합니다.

예:

양식에서 자동 완성 켜기(입력 필드에 대한 자동 완성 끄기):

<form action="demo-form.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>

팁: 일부 브라우저에서는 이 속성을 적용하려면 자동 완성 기능을 활성화해야 할 수도 있습니다.

novalidate 속성 novalidate 속성은 양식을 제출할 때 양식 또는 입력 필드의 유효성을 검사하지 않도록 지정합니다.

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

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

formaction 속성

formaction 속성은 양식 제출의 URL 주소를 설명하는 데 사용됩니다.formaction 속성은 < form> 요소 작업 속성입니다.

참고: formaction 속성은 type="submit" 및 type="image"에 사용됩니다.

예: 다음 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 속성은 양식을 통해 서버에 제출된 데이터의 인코딩을 설명합니다(양식 양식의 method="post" 양식에만 해당) formenctype 속성은 enctype 속성을 재정의합니다. 양식 요소의

주로: 이 속성은 type="submit" 및 type="image"와 함께 사용됩니다.

예:

첫 번째 제출 버튼은 기본 인코딩으로 양식 데이터를 보내고 두 번째 제출 버튼은 "multipart/form-data" 인코딩으로 양식 데이터를 보냅니다.

<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 属性定义了表单提交的方式。

formmethod 属性覆盖了 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

示例：重新定义表单提交方式实例:

<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 属性是一个 boolean 属性.

novalidate属性描述了 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

示例：

两个提交按钮的表单(使用与不适用验证 ):

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

【推荐课程：HTML5视频教程、web前端入门教程】

위 내용은 html5의 새로운 양식 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!