사용자 경험 및 사용 편의성 향상을 위한 HTML 입력 상자 최적화_HTML/Xhtml_웹 페이지 제작

사용자 경험과 사용 편의성을 향상시키기 위해 일부 디자이너는 입력 상자와 같이 사용자가 웹 페이지에서 자주 사용하는 것을 최적화합니다. 일반 입력 상자는 어떻게 최적화되나요? 사용자 경험 측면에서 볼 때 사용자 단계를 단순화하고 사용자에게 더 편리하게 하면 사용성이 향상됩니다. 예를 들어 입력 상자 위에 마우스를 올리면 입력 상자의 색상이 변경되고 입력 상자의 기본 텍스트가 자동으로 선택됩니다. , 또는 클릭하여 입력 상자를 열 때 기본 내용을 자동으로 지우는 등.

이 효과는 복잡해 보이지만 실제로는 매우 간단합니다. 짧은 자바스크립트 코드만 있으면 해결할 수 있습니다. 다음은 여러 효과에 대한 코드를 소개합니다.

1. 입력 상자를 클릭하여 콘텐츠의 HTML 코드를 선택하세요.

이 코드에서 가장 중요한 부분은 onfocus 부분입니다. onfocus를 사용하지 않는 경우 onclick을 사용하면 동일한 효과를 얻을 수 있습니다. .선택하다()".

2. 마우스를 입력 상자 위로 가져갈 때 테두리 색상이나 배경색을 변경합니다.

이 효과에는 두 가지 방법이 있습니다. 첫 번째 방법은 CSS의 의사 요소를 사용하는 것입니다. ; 방법 2는 여전히 짧은 자바스크립트를 사용하고 있습니다. 방법 1의 html 코드는 다음 단락이 CSS에 추가된다는 점을 제외하면 위의 예와 동일합니다. 🎜>
코드 복사
입력 상자 위에 마우스를 올리면 입력 상자 테두리가 빨간색으로 바뀌는데, 이 방법은 Firefox 브라우저와 IE7 이상에서만 유효하고 IE6에서는 지원하지 않으므로 일정한 제한이 있습니다. 두 번째 방법의 코드는 마우스 호버 코드 섹션이 끝에 추가된다는 점을 제외하면 위의 예와 거의 동일합니다.

코드 복사





코드 복사


코드 복사