더 나은 모바일 사용자 경험을위한 더 나은 양식 입력

모바일 애플리케이션 성능을 향상시키는 쉽고 실용적인 방법 : 항상 올바른 type , inputmode 및 autocomplete 속성으로 HTML 입력 필드를 구성하십시오. 이 세 가지 속성은 종종 별도로 논의되지만, 전체를 고려할 때 모바일 사용자 경험에서 가장 중요합니다.

우리 모두 알다시피, 모바일 장치의 양식을 채우는 것은 시간이 많이 걸리고 번거롭지 만 입력 필드를 올바르게 구성함으로써 데이터 입력 프로세스가 가능한 한 원활한지 확인할 수 있습니다. 더 나은 모바일 사용자 경험을 만들기 위해 몇 가지 예와 모범 사례를 살펴 보겠습니다.

올바른 입력 유형을 사용하십시오

이것이 가장 쉬운 일입니다. email , tel 및 url 과 같은 입력 유형은 다양한 브라우저에서 잘 지원됩니다. 보다 일반적인 text 유형이 아닌 데스크탑 브라우저에서 tel 유형을 사용하면 이점이 감지하기 어려울 수 있지만 모바일 장치를 한눈에 볼 수 있습니다.

올바른 유형을 선택하면 사용자가 Android 및 iOS 장치에 필드에 초점을 맞출 때 나타나는 키보드가 변경됩니다. 노력으로 적은 노력으로 올바른 유형의 이메일, 전화 번호, URL 및 검색 입력에 대한 사용자 정의 키보드를 표시 할 수 있습니다.

input type="email" 과 input type="url" 검증 함수가 있습니다. 사용자가 양식을 제출하면 최신 브라우저는 값이 예상 형식과 일치하지 않을 때 오류 메시지를 표시합니다. 이 기능을 끄려면 novalidate 속성을 포함 된 양식에 추가하십시오.

간단한 소개 날짜 유형

HTML 입력에는 특수 텍스트 입력뿐만 아니라 라디오 버튼, 확인란 등도 포함됩니다. 그러나이 기사의 목적을 위해 주로 더 많은 텍스트 기반 입력에 대해 논의합니다.

더 많은 프리 텍스트 입력과 라디오 버튼과 같은 입력 위젯 사이의 임계 공간에있는 입력 유형이 있습니다 . 날짜 입력 유형에는 많은 변형이 있으며 date , time , datetime-local 및 month 포함하여 모바일 장치에서 잘 지원됩니다. 그들이 집중하면, 이들은 iOS 및 Android에서 맞춤형 위젯을 팝업합니다. 전용 키보드를 트리거하는 대신 iOS에서 선택한 인터페이스를 표시하여 Android에서 다양한 유형의 위젯을 표시합니다 (날짜 및 시간 선택기가 특히 매끄 럽습니다).

처음에는 주변을 둘러 볼 때까지 모바일 장치에서 기본 기본 설정을 사용할 수있어서 기뻤습니다. 대부분의 주요 앱과 모바일 사이트는 기본 날짜 입력 유형 대신 사용자 정의 날짜 선택기를 사용한다는 것을 깨달았습니다. 이에 대한 몇 가지 이유가있을 수 있습니다. 첫째, 기본 iOS 날짜 선택기는 캘린더 유형 위젯만큼 직관적이지 않다는 것을 알았습니다. 둘째, 아름답게 설계된 Android 구현조차도 사용자 정의 구성 요소에 비해 상당히 제한적입니다. 예를 들어 단일 날짜 대신 날짜 범위를 입력하는 쉬운 방법은 없습니다.

그럼에도 불구하고 사용중인 사용자 정의 날짜 선택기가 모바일 장치에서 잘 작동하지 않으면 날짜 입력 유형을 시도해 볼 가치가 있습니다. iOS 및 Android에서 기본 입력 위젯을 시도하려면 데스크톱 사용자가 기본 드롭 다운 메뉴 대신 사용자 정의 위젯을 보도록하려면이 CSS 코드는 다음과 같은 데스크탑 브라우저의 캘린더 드롭 다운 메뉴를 숨길 수 있습니다.

 ::- WebKit-Calendar-Picker-Indicator {
  디스플레이 : 없음;
}

마지막으로, 우리가 논의 할 inputmode 속성에 의해 날짜 유형을 무시할 수 없다는 점에 유의해야합니다.

INPUTMode에 관심을 가져야하는 이유는 무엇입니까?

inputmode 속성을 사용하면 입력 유형으로 지정된 모바일 키보드를 무시하고 사용자에게 표시된 키보드 유형을 직접 선언 할 수 있습니다. 이 속성에 대해 처음 알게되었을 때 나는 감동을받지 못했습니다. 처음부터 올바른 유형을 사용하지 않겠습니까? 그러나 inputmode 일반적으로 불필요하지만 일부 장소에서는 매우 유용 할 수 있습니다. 내가 찾은 inputmode 의 가장 중요한 사용 사례는 더 나은 디지털 입력을 구축하는 것입니다.

url 및 email 과 같은 일부 HTML5 입력 유형은 간단하지만 input type="number" 는 다릅니다. 접근성 문제와 다소 어색한 UI가 있습니다. 예를 들어, Chrome과 같은 데스크탑 브라우저에는 스크롤 할 때 예기치 않게 쉽게 트리거되는 작은 증분 화살표가 표시됩니다.

따라서 이것은 나중에 기억하고 사용해야하는 패턴입니다. 대부분의 디지털 입력의 경우 다음을 사용하지 마십시오.

<input type="number">

… 실제로 이것을 사용하고 싶습니다.

<input type="text" inputmode="decimal">

inputmode="numeric" 대신 inputmode="decimal" 사용하지 않는 이유는 무엇입니까?

numeric 및 decimal 속성 값은 Android에서 동일한 키보드를 생성합니다. 그러나 iOS에서 numeric 숫자와 구두점을 모두 표시하는 키보드를 표시하는 반면, decimal 중복 전화 번호 관련 옵션이 없다는 점을 제외하고 tel 입력 유형과 거의 동일한 집중된 숫자 그리드를 보여줍니다. 그렇기 때문에 대부분의 유형의 숫자 ​​입력에 대한 첫 번째 선택입니다.

Christian Oliff는 inputmode 속성을 특별히 소개하는 훌륭한 기사를 썼습니다.

자동 완성을 잊지 마십시오

올바른 모바일 키보드를 보여주는 것보다 더 중요한 것은 유용한 자동 완성 제안을 표시하는 것입니다. 이것은 모바일 장치에서 더 빠르고 매끄러운 사용자 경험을 만드는 데 먼 길을갑니다.

브라우저에는 자동 완성 필드를 표시하는 휴리스틱이 있지만이를 의존 할 수 없으며 올바른 autocomplete 속성을 추가해야합니다. 예를 들어 iOS Safari에서 input type="tel" 옵션에 autocomplete="tel" 속성을 명시 적으로 추가하면 자동 완성 옵션 만 표시됩니다.

사용자가 신용 카드 번호 또는 주소 양식 필드를 작성하는 데 도움이되는 옵션과 같은 기본 자동 완성 옵션에 익숙하다고 생각할 수도 있지만 모든 옵션을 이해하는 것이 좋습니다. 사양에는 50 개 이상의 값이 나열됩니다! autocomplete="one-time-code" 알고 있습니까?

자동 완성에 대해…

자신의 사용자 정의 자동 완성 기능 인 datalist 를 만들 수있는 다른 요소를 언급하고 싶습니다. 데스크탑 크롬 및 사파리에서 약간의 기본적이지만, 약간 기본적이지만, 약간 기본적이지만, 자동 완성 된 경험을 만들어 내지 만, 종종 해당 위치에있는 키보드 바로 위의 편리한 라인으로 제안을 표시함으로써 iOS에서 눈에.니다. 또한 사용자는 텍스트와 선택적 입력을 전환 할 수 있습니다.

반면, Android에서 datalist 더 일반적인 자동 완성 드롭 다운 메뉴를 만듭니다. 키보드 위의 영역은 시스템 자체 유형 기능을 유지합니다. (iOS에서는 상위 3 개 일치 이외의 콘텐츠를 보려면 아래쪽 화살표 아이콘을 눌러 선택 선택기를 트리거해야합니다.)

이 데모를 사용하여 datalist 시도 할 수 있습니다.

내가 만든이 도구를 사용하여 모든 autocomplete 옵션과 inputtype 및 inputmode 값을 탐색하여 모바일 장치의 다양한 입력 구성을 빠르게 미리 볼 수 있도록 도와줍니다.

요약

양식을 구축 할 때, 나는 종종 데스크탑 경험을 완성하는 데 집중하고 모바일 네트워크를 나중에 생각하는 것으로 생각하는 경향이 있습니다. 그러나 모바일 장치에서 양식이 잘 작동하는지 확인하려면 약간의 추가 작업이 필요하지만 반드시 어렵지는 않습니다. 바라건대,이 기사에서는 몇 가지 간단한 단계를 통해 사용자에게 모바일 장치의 양식을보다 편리하게 만들 수 있음을 보여주었습니다.

위 내용은 더 나은 모바일 사용자 경험을위한 더 나은 양식 입력의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!