양식 생성, 데이터 바인딩 및 데이터 유효성 검사를 위한 HTML5 입력 위젯-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

양식 생성, 데이터 바인딩 및 데이터 유효성 검사를 위한 HTML5 입력 위젯

高洛峰

Nov 18, 2016 am 11:15 AM

html5

1. 입력 유형 및 입력 속성

HTML5의 새로운 입력 유형은 기본적으로 일상적인 개발 요구 사항을 충족할 수 있는 다양한 유형을 사용해 볼 수 있습니다. 다양한 유형으로 인한 내부 차이점은 무엇입니까? 첫째, 브라우저는 type="email"과 같은 입력 유형을 기반으로 기본 데이터 확인을 수행합니다. 사용자 입력에 @ 기호가 포함되어 있지 않으면 이는 잘못된 입력이며 브라우저는 해당 팁을 제공합니다. 다양한 유형의 두 번째 영향은 모바일 단말기에서 브라우저에서 페이지를 탐색할 때 입력 항목 유형이 다른 경우 장치에서 제공하는 가상 키보드가 유형에 따라 다르다는 것입니다. "email" 입력 시 Apple 휴대폰에 부여된 키보드 종류에 @ 기호가 추가됩니다. 세 번째 포인트는 입력한 값이 색상 유형인 경우 해당 색상을 선택하거나 입력할 수 있는 색상 선택 패널을 제공하므로 이러한 색상 선택기를 별도로 구현하면 편리합니다. 유저들 입장하기가 좀 번거로운 것 같네요;.

입력 속성은 다음과 같은 세 가지 입력 속성을 제어합니다.

자리 표시자: 126개 사서함의 계정과 비밀번호가 모두 이 자리 표시자를 사용합니다. 자리 표시자는 실제로 텍스트 자리 표시자입니다. 사용자가 콘텐츠를 입력하면 자리 표시자가 자동으로 사라지고 프롬프트 역할을 합니다.

자동 초점: 예제를 보면 이해할 수 있습니다. 페이지가 로드될 때 초점을 맞춰야 하는 입력 요소를 정의하는 데 사용됩니다.

필수: 이 속성을 설정하면 사용자가 내용을 입력하지 않고 양식을 제출하면 브라우저에 해당 메시지가 표시됩니다.

2. min max 데이터-*입력 속성

　max min 속성은 숫자 및 범위 입력의 최대값과 최소값을 정의합니다.

data-*의 역할은 키-값 쌍을 일부 요소에 바인딩하는 것입니다. dom 요소의 데이터세트 객체를 통해 획득:

<input type="number" data-price="21" >
js代码：
let element = document.getElementById(&#39;testid&#39;);
let price = element.dataset.price

로그인 후 복사

　 요소의 역할은 사용자에게 결과를 표시하는 것입니다:

<body>
    <output id=&#39;test&#39;>122</output>
</body>
<script type="text/javascript">
    let ss = document.getElementById(&#39;test&#39;)
    ss.value = 888;
</script>

로그인 후 복사

이 작은 예는 출력 값을 888로 설정;

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.