HTML 새 양식 속성

HTML의 새로운 양식 속성

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

<form>새 속성:

자동 완성

검증 없음

<input> 새 속성:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

높이 및 너비

목록

min 및 max

다중

패턴(정규 표현식)

자리 표시자

필수

단계

/ autocomplete 속성

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

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

팁: 자동 완성 속성은 양식 요소에서 활성화될 수 있지만 입력 요소에서는 비활성화될 수 있습니다.

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

<form> novalidate 속성

novalidate 속성의 부울 속성입니다.

novalidate 속성은 제출 시 지정합니다. 양식 양식 또는 입력 필드의 유효성을 검사해서는 안 됩니다.

<input> autofocus 속성

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

autofocus 속성은 다음과 같습니다. 페이지가 로드되면 도메인이 자동으로 포커스를 받습니다.

<input> 양식 속성

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

팁: 두 개 이상의 양식을 참조하려면 공백으로 구분된 목록을 사용하세요.

<input> formaction 속성

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

formaction 이 속성은 <form> 요소의 action 속성을 재정의합니다.

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

<input> formenctype 속성

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

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

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

<input> formmethod 속성

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

formmethod 속성은 <form> 요소의 method 속성을 재정의합니다.

참고: 이 속성은 type="submit" 및 type="image"와 함께 사용할 수 있습니다.

<input> formnovalidate 속성

novalidate 속성은

novalidate 속성을 설명합니다. ; 양식 제출 시 요소의 유효성을 검사할 필요가 없습니다.

formnovalidate 속성은 <form> 요소의 novalidate 속성을 재정의합니다.

참고: formnovalidate 속성은 type="submit

과 함께 사용됩니다.

<input> formtarget 속성

formtarget 속성은 양식 제출 데이터를 수신한 후 표시할 이름이나 키워드를 지정합니다.

formtarget 속성은 <form> 요소의 target 속성을 재정의합니다.

참고: formtarget 속성은 type="submit" 및 type="image"와 함께 사용됩니다.

<input> 높이 및 너비 속성

높이 및 너비 속성은 유형의 <input> 태그에 사용되는 이미지 높이와 너비를 지정합니다. 영상.

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

팁: 이미지는 일반적으로 높이와 너비 속성을 모두 지정합니다. 이미지에 높이와 너비가 설정된 경우 페이지가 로드될 때 이미지에 필요한 공간이 유지됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며 적절한 공간을 확보할 수 없습니다. 이미지로 인해 로드 프로세스 중에 페이지 레이아웃 효과가 변경됩니다(이미지가 로드된 경우에도).

<input> 목록 속성

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

<input> min 및 max 속성

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

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

<input> 다중 속성

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

다중 속성은 <input> ; 요소는 여러 값을 선택할 수 있습니다.

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

<input> 패턴 속성

pattern 속성은 <input> 요소의 값.

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

팁: 전역 제목 속성 모드.

<input> 자리 표시자 속성

자리 표시자 속성은 입력 필드에서 예상하는 값을 설명하는 힌트를 제공합니다. .

사용자가 값을 입력하기 전에 입력 필드에 간단한 프롬프트가 표시됩니다.

참고: 자리 표시자 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호 등의 <input> 태그 유형에 적용됩니다.

<input> 필수 속성

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

필수 속성은 제출 전에 지정해야 합니다. 입력 필드를 채웁니다(비워둘 수 없음).

참고: 필수 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란, 라디오 및 파일과 같은 <input> 태그 유형에 적용됩니다.

<input> 단계 속성

단계 속성은 입력 필드의 유효한 숫자 간격을 지정합니다.

step="3"인 경우 유효한 숫자는 -3, 0, 3, 6 등입니다.

팁: step 속성을 max 및 min 속성과 함께 사용하여 생성할 수 있습니다. 범위 값.

참고: 단계 속성은 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간 및 주 유형과 함께 사용됩니다.


아래에서는 자주 사용되는 몇 가지 속성을 설명했습니다. 코드와 코드 옆의 주석을 직접 보고 브라우저의 실행 결과를 비교해 보면 그 의미를 이해할 수 있습니다

아아아아


지속적인 학습
||
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head> <body> <!-- placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点 --> <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索"> <!-- novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue --> <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <br/><br/> <!-- required:必填 autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容, 这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可 --> <input type="text" name="UserName" value="" required autocomplete="off"> <br/><br/> <!-- multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传 --> 选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br/><br/> <!-- list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入 --> 区号: <input type="text" name="age" value="" list="list1"> <br/><br/> <datalist id="list1"> <option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option> </datalist> <br/><br/> <!-- formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式 --> <input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~