HTML5의 새로운 양식 컨트롤과 양식 속성은 무엇입니까?

HTML5는 인터넷의 차세대 표준이자 인터넷 콘텐츠를 구성하고 표현하기 위한 언어 방법입니다. 인터넷의 핵심 기술 중 하나로 간주됩니다.

HTML5는 웹의 핵심 언어 HTML의 사양입니다. 사용자가 어떤 수단을 사용하여 웹을 탐색할 때 보게 되는 콘텐츠는 원래 브라우저에서 일부 기술적 처리를 거쳐 식별 가능한 정보로 변환됩니다. HTML5는 이전 HTML4.01을 기반으로 몇 가지 개선 사항을 적용했습니다. 비록 기술 담당자가 개발 과정에서 이러한 새로운 기술을 적용할 수는 없지만 웹 사이트 개발 기술 담당자는 이 기술의 새로운 기능을 이해해야 합니다.

새로운 입력 양식 컨트롤:

• 이메일: 이메일 텍스트 상자, 일반 텍스트 상자와 다름 없음

• - 입력이 이메일이 아니면 확인이 통과되지 않습니다

• - 모바일 키보드 변경이 발생합니다.

• tel: 전화번호

• url: 웹페이지 URL

• 검색: 검색 엔진

• - 크롬 아래에 텍스트를 입력하면 추가로 닫힌 X

• 범위가 표시됩니다. 특정 범위 내의 값 선택기

• - min, max, step(단계 수)

• - 예: js를 사용하여 현재 값 표시

• 숫자: 숫자만 포함할 수 있는 입력 상자

• - 입력 상자 끝에 두 개의 화살표가 있습니다. 위쪽은 플러스이고 아래쪽은 마이너스입니다.

• 색상: 색상 선택기

• - 색상 버전을 표시하려면 클릭하세요.

• 날짜/시간: 전체 날짜 표시

• - 선택 선택 스타일과 유사

• datetime-local: 시간대를 제외한 전체 날짜 표시

• 시간: 시간대 제외 시간 표시

• 날짜: 표시 날짜 {년, 월, 일}

• 주: 주 표시 { 연, 월, 일 및 주}

• 입: 월 {년 및 월} 표시

(무료 동영상 튜토리얼: html 동영상 튜토리얼 )

<form>
  <input type="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="submit" />
</form>

새로운 양식 기능

• 자리 표시자: 입력 상자 프롬프트 정보

• - 예: Weibo 비밀번호 상자 프롬프트

• 자동 완성

• - 기본값은 켜져 있고 프롬프트를 끕니다. and select off

• 자동 초점: 입력 초점을 가져올 양식 지정

• 목록 및 데이터 목록: 입력 상자에 대한 선택 목록 구성

• - 목록 값은 데이터 목록 태그의 ID입니다

• 필수: 이 옵션은 필수이며 비워둘 수 없습니다.

• 패턴: 정기 확인

• - 패턴=" d{1,5}"

• Formaction은 submit

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" // 是否记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

에서 제출 주소를 정의합니다.

관련 권장사항: html5 튜토리얼

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