양식 생성, 데이터 바인딩 및 데이터 유효성 검사를 위한 HTML5 입력 위젯
- 高洛峰원래의
- 2016-11-18 11:15:291655검색
1. 입력 유형 및 입력 속성
HTML5의 새로운 입력 유형은 기본적으로 일상적인 개발 요구 사항을 충족할 수 있는 다양한 유형을 사용해 볼 수 있습니다. 다양한 유형으로 인한 내부 차이점은 무엇입니까? 첫째, 브라우저는 type="email"과 같은 입력 유형을 기반으로 기본 데이터 확인을 수행합니다. 사용자 입력에 @ 기호가 포함되어 있지 않으면 이는 잘못된 입력이며 브라우저는 해당 팁을 제공합니다. 다양한 유형의 두 번째 영향은 모바일 단말기에서 브라우저에서 페이지를 탐색할 때 입력 항목 유형이 다른 경우 장치에서 제공하는 가상 키보드가 유형에 따라 다르다는 것입니다. "email" 입력 시 Apple 휴대폰에 부여된 키보드 종류에 @ 기호가 추가됩니다. 세 번째 포인트는 입력한 값이 색상 유형인 경우 해당 색상을 선택하거나 입력할 수 있는 색상 선택 패널을 제공하므로 이러한 색상 선택기를 별도로 구현하면 편리합니다. 유저들 입장하기가 좀 번거로운 것 같네요;.
입력 속성은 다음과 같은 세 가지 입력 속성을 제어합니다.
자리 표시자: 126개 사서함의 계정과 비밀번호가 모두 이 자리 표시자를 사용합니다. 자리 표시자는 실제로 텍스트 자리 표시자입니다. 사용자가 콘텐츠를 입력하면 자리 표시자가 자동으로 사라지고 프롬프트 역할을 합니다.
자동 초점: 예제를 보면 이해할 수 있습니다. 페이지가 로드될 때 초점을 맞춰야 하는 입력 요소를 정의하는 데 사용됩니다.
필수: 이 속성을 설정하면 사용자가 내용을 입력하지 않고 양식을 제출하면 브라우저에 해당 메시지가 표시됩니다.
2. min max 데이터-*입력 속성be6d67dae90cc1ad6469079e163d0939
max min 속성은 숫자 및 범위 입력의 최대값과 최소값을 정의합니다.
data-*의 역할은 키-값 쌍을 일부 요소에 바인딩하는 것입니다. dom 요소의 데이터세트 객체를 통해 획득:
<input type="number" data-price="21" > js代码： let element = document.getElementById('testid'); let price = element.dataset.price
be6d67dae90cc1ad6469079e163d0939 요소의 역할은 사용자에게 결과를 표시하는 것입니다:
<body>
<output id='test'>122</output>
</body>
<script type="text/javascript">
let ss = document.getElementById('test')
ss.value = 888;
</script>이 작은 예는 출력 값을 888로 설정;