HTML5 양식의 속성은 무엇입니까?

양식 요소에 대한 자세한 설명을 보려면 여기에서 HTML5 양식 요소에 대한 자세한 설명을 참조하세요

위에서 양식 요소에 대해 설명했으니 이제 몇 가지 새로운 속성을 살펴보겠습니다

안 보셨다면 다음 링크를 클릭하세요: HTML5 양식 요소에 대한 자세한 설명

HTML5의 새로운 양식 속성은 주로 두 가지 측면, 즉

요소의 새로운 속성입니다.

HTML5 양식 속성

새 양식 속성:

• autocomplete

• novalidate

새 입력 속성:

• autocomplete

• autofocus

• 양식

• 양식 재정의(formaction, formenctype, formmethod, formnovalidate, formtarget)

• height 및 width

• list

• min, max 및 step

• multiple

• 패턴(정규 표현식)

• placeholder

• required

autocomplete attribute

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

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

사용자가 자동 ​​완성 필드에 입력을 시작하면 브라우저에 필드를 채울 수 있는 옵션이 표시되어야 합니다.

<form action="demo_form.asp" method="get" 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>

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

autofocus 속성

autofocus 속성은 페이지가 로드될 때 필드에 자동으로 초점이 맞춰지도록 지정합니다.

참고: autofocus 속성은 모든 태그 유형에 적용됩니다.

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form 속성

form 속성은 입력 필드가 속하는 하나 이상의 양식을 지정합니다.

참고: 양식 속성은 모든 태그 유형에 적용됩니다.

form 속성은 자신이 속한 양식의 ID를 참조해야 합니다.

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

참고: 두 개 이상의 양식을 참조해야 하는 경우 공백으로 구분된 목록을 사용하세요.

양식 재정의 속성

양식 재정의 속성을 사용하면 양식 요소의 특정 속성 설정을 재정의할 수 있습니다.

Form rewrite 속성은 다음과 같습니다.

formaction - 양식의 action 속성을 다시 작성합니다.

formenctype - 양식의 enctype 속성을 다시 작성합니다.

formmethod - 양식의 메서드 속성을 다시 작성합니다.

formnovalidate - novalidate 속성을 다시 작성합니다. form

formtarget - form의 target 속성을 다시 작성합니다

참고: form rewrite 속성은 submit 및 image와 같은 태그 유형에 적용 가능합니다.

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

참고: 이러한 속성은 다양한 제출 버튼을 만드는 데 유용합니다.

높이 및 너비 속성

높이 및 너비 속성은 이미지 유형의 입력 태그에 사용되는 이미지 높이와 너비를 지정합니다.

참고: 높이 및 너비 속성은 이미지 유형의 태그에만 적용됩니다.

<input type="image" src="img_submit.gif" width="99" height="99" />

list 속성

list 속성은 입력 필드의 데이터 목록을 지정합니다. datalist는 입력 필드에 대한 옵션 목록입니다.

참고: 목록 속성은 텍스트, 검색, URL, 전화, 이메일, 날짜 선택기, 숫자, 범위 및 색상과 같은 태그 유형에 적용 가능합니다.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min, max 및 step 속성

min, max 및 step 속성은 숫자나 날짜가 포함된 입력 유형에 대한 제한(제약 조건)을 지정하는 데 사용됩니다.

max 속성은 입력 필드에 허용되는 최대값을 지정합니다.

min 속성은 입력 필드에 허용되는 최소값을 지정합니다.

step 속성은 입력 필드의 유효한 숫자 간격을 지정합니다(step="3"인 경우 유효한 숫자는 -3,0,3,6 등입니다).

참고: min, max 및 step 속성은 날짜 선택기, 숫자 및 범위와 같은 태그 유형에 적용됩니다.

다음 예는 3단계로 0에서 10 사이의 값을 허용하는 숫자 필드를 보여줍니다(즉, 유효한 값은 0, 3, 6, 9입니다).

Points: <input type="number" name="points" min="0" max="10" step="3" />

다중 속성

다중 속성 입력 필드에서 여러 값을 선택할 수 있도록 지정합니다.

참고: 다중 속성은 이메일 및 파일과 같은 태그 유형에 적용됩니다.

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

novalidate 속성

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

참고: novalidate 속성은 및 다음 유형의 태그에 적용 가능합니다: 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

pattern 속성

패턴 속성은 입력 필드의 유효성을 검사하는 데 사용되는 패턴을 지정합니다.

패턴은 정규식입니다. JavaScript 튜토리얼에서 정규식에 대해 배울 수 있습니다.

참고: 패턴 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호 등의 태그 유형에 적용됩니다.

다음 예에서는 세 글자만 포함할 수 있는 텍스트 필드를 보여줍니다(숫자 및 특수 문자 제외).

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

placeholder 속성

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search php" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

【相关推荐】

html的基础元素，让你零基础学习HTML

HTML和HTML5的发展历史

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