찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5_html5 튜토리얼 기술로 양식의 공통 속성과 새로운 속성을 구성합니다.

HTML5_html5 튜토리얼 기술로 양식의 공통 속성과 새로운 속성을 구성합니다.

WBOY
WBOY원래의
2016-05-16 15:46:001690검색

HTML5의 새로운 양식 속성
HTML5의

및 태그에 몇 가지 새로운 속성이 추가되었습니다.
새 속성:
자동 완성
novalidate
새 속성:
자동 완성
자동 초점
form
formaction
formenctype
formmethod
formnovalidate
formtarget
높이 및 너비
목록
최소 및 최대
다중
패턴(정규 표현식)
자리 표시자
필수
단계


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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <양식 액션="demo-form.php " 자동 완성="on">
  2. 이름:<입력 유형= "텍스트" 이름="f이름"><br>
  3. 성: <입력 유형= "텍스트" 이름="lname"><br>
  4. 이메일 : <입력 입력="이메일" 이름="이메일" 자동완성="끄기"><br>
  5. <입력 입력="제출" >
  6. 양식>


novalidate 속성
novalidate 속성의 부울 속성
novalidate 속성은 양식을 제출할 때 양식 또는 입력 필드의 유효성을 검사하지 않도록 지정합니다. .
예
제출된 양식 데이터를 확인할 필요가 없습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <양식 액션="demo-form.php "검증 안함>
  2. 이메일 : <입력 입력="이메일" 이름="user_email">
  3. <입력 입력="제출" >
  4. 양식>


autofocus 속성
autofocus 속성은 부울 속성입니다.
autofocus 속성은 페이지가 로드될 때 필드가 자동으로 포커스를 얻도록 지정합니다.
예
페이지가 로드될 때 "이름" 입력 필드가 자동으로 초점을 맞추도록 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 이름:<입력 유형= "텍스트" 이름="fname" 자동 초점>


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

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


XML/HTML 코드
클립보드에 콘텐츠 복사
  1. <양식 액션="demo-form.php ">  
  2.   이름: <입력 유형= "텍스트" 이름="f이름"><br>  
  3.   성: <입력 유형= "텍스트" 이름="lname"><br>  
  4.   <입력 입력="제출"  값="제출"><br>  
  5.   <입력 입력="제출"  형성="demo-admin.php"  
  6.   값="관리자로 제출">  
  7. 양식>  


<입력> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖는 元素적 enctype의 属性을 형성합니다.
主要: 该" multipart/form-data" 编码格式发送表单数据:


XML/HTML 코드
复复内容到剪贴板
  1. <양식 액션="demo-post_enctype.php " 방법="게시물">  
  2.   이름: <입력 유형= "텍스트" 이름="f이름"><br>  
  3.   <입력 입력="제출"  값="제출">  
  4.   <입력 입력="제출"  formenctype="multipart/form-data"  
  5.   값="멀티파트/양식 데이터로 제출">  
  6. 양식>  


<입력> formmethod 属性
formmethod 属性属性覆盖了 元素的的 메소드 🎜 注意 : 该属性可以与 type = "제출"和 type = "image"配合使用。




XML/HTML 코드

复复内容到剪贴板
  1. <양식 액션="demo-form.php " 방법="get">  
  2.   이름: <입력 유형= "텍스트" 이름="f이름"><br>  
  3.   성: <입력 유형= "텍스트" 이름="lname"><br>  
  4.   <입력 입력="제출"  값="제출">  
  5.   <입력 입력="제출"  양식 방법="게시물" 형성="demo-post.php"  
  6.   값="POST를 사용하여 제출">  
  7. 양식>  


<입력> formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 元素는 属性会覆盖 元素의 novalidate 속성.
주의: formnovalidate 属性与type="submit 一起使用
实例
两个提交按钮的表单(使用与不适用验证):

XML/HTML 코드复复内容到剪贴板
  1. <양식 액션="demo-form.php ">  
  2.   이메일: <입력 입력="이메일" 이름="사용자 ID"><br>  
  3.   <입력 입력="제출"  값="제출"><br>  
  4.   <입력 입력="제출"  formnovalidate 값="검증 없이 제출">  
  5. 양식>  

<입력> formtarget 属性
formtarget 属性指定一个name称或一个关键字来指明表单提交数据接收后的表示。
formtarget 属性覆盖 元素的target属性.
注의미: formtarget의 属性与type="submit" 와 type="image"配합체사용.
实例
两个提交按钮的表单, 在不同窗口中显示:

XML/HTML 코드复复内容到剪贴板
  1. <양식 액션="demo-form.php ">  
  2.   이름: <입력 유형= "텍스트" 이름="f이름"><br>  
  3.   성: <입력 유형= "텍스트" 이름="lname"><br>  
  4.   <입력 입력="제출"  값="정상적으로 제출">  
  5.   <입력 입력="제출"  formtarget="_blank"  
  6.   값="새 창에 제출">  
  7. 양식>  


<입력> 높이 와 너비 属性
높이 와 너비 属性规定用于 image 类型的 标签 의 이미지 높이와 크기.
유의 사항: 높이와 너비 属性只适用于 image 类型的 标签.
提示: 图이미지는 일반적으로 동일한 크기와 크기를 갖습니다.果没有这些属性， 浏览器不知道图이미지적대소，并不能预留 适当的 空间.图文은 加载过程中会使页face布局效果改变 （尽管图文已加载）。
实例
정정了一个图image提交按钮, 使用了 높이 와 너비 属性:

XML/HTML 코드复复内容到剪贴板
  1. <입력 유형="이미지"  src="img_submit.gif" alt="제출" 너비="48" 높이="48">  

<입력> list 属性
list 属性规入域的选项列表。
OperaSafariChromeFirefoxInternet Explorer
实例
에서 中预결정义 <입력> 值:

XML/HTML 코드复复内容到剪贴板
  1. <입력 목록="브라우저" >  
  2.   
  3. <데이터 목록 id="브라우저" >  
  4.   <옵션 값="인터넷 익스플로러 ">  
  5.   <옵션 값="Firefox" >  
  6.   <옵션 값="Chrome" >  
  7.   <옵션 값="오페라" >  
  8.   <옵션 값="Safari" >  
  9. 데이터 목록>  

<입력> min 및 max 属性
min, max 및 step 属性用于为包含数字或日期的 input 类型规定限束.
유의 사항: min, max 와 step 属性适用于以下类型的 & lt; 입력> 标签：날짜 선택기, 숫자 以及 범위。
实例

XML/HTML 코드复复内容到剪贴板
  1. <입력> 요소 최소값 및 최대값 설정:
  2. 1980-01-01 이전 날짜를 입력하세요.
  3. <입력 유형="날짜" 이름="생일" 최대="1979-12-31">
  5. 2000-01-01 이후 날짜를 입력하세요.
  6. <입력 유형="날짜" 이름="생일" 분="2000-01-02">
  8. 수량(1~5개):
  9. <입력 유형="숫자" 이름="수량" 분="1" 최대="5">


다중 속성
다중 속성은 부울 속성입니다.
다중 속성은 요소.
참고: 다중 속성은 이메일 및 파일과 같은 태그 유형에 적용됩니다. : 이메일, 파일.
예
여러 파일 업로드:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 이미지 선택: <입력 유형= "파일" 이름="img"여러>


패턴 속성
패턴 속성은 요소의 값을 확인하는 데 사용되는 정규식을 설명합니다.
참고: 패턴 속성은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호 등의 태그 유형에 적용됩니다.
팁: 패턴을 설명하기 위해 전역 제목 속성과 함께 사용됩니다. .
예
다음 예는 세 글자(숫자 및 특수 문자 제외)만 포함할 수 있는 텍스트 필드를 보여줍니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 국가 코드: <입력 유형= "텍스트" 이름="국가 코드" 패턴="[A-Za-z]{3}" 제목=" 3자리 국가 코드">


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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <입력 입력="텍스트" 이름="fname" 자리 표시자="이름"> 


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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 사용자 이름: <입력 유형="텍스트" 이름="사용자 이름" 필수>


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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <입력 유형="숫자" 이름="포인트" 단계="3"> 


요소
HTML5에는 스크립트로 작성된 출력과 같은 다양한 유형의 출력 결과를 나타내는 새로운 요소 도 도입되었습니다.

for 속성을 사용하여 출력 요소와 계산에 영향을 미치는 문서의 다른 요소(예: 입력 소스 또는 매개변수) 간의 관계를 지정할 수도 있습니다. for 속성의 값은 공백으로 구분된 다른 요소의 ID 목록입니다.

placeholder 속성
HTML5에는 placeholder라는 새로운 속성이 도입되었습니다. 및