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

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

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

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

코드 복사

코드는 다음과 같습니다.

입력 콘텐츠: < /label>

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

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

이 효과에는 두 가지 방법이 있습니다. 첫 번째 방법은 CSS의 의사 요소를 사용하는 것입니다. ; 방법 2는 여전히 짧은 자바스크립트를 사용하고 있습니다. 방법 1의 html 코드는 다음 단락이 CSS에 추가된다는 점을 제외하면 위의 예와 동일합니다. 🎜>
코드 복사

코드는 다음과 같습니다. input:hover { border:1px solid #F00 }

입력 상자 위에 마우스를 올리면 입력 상자 테두리가 빨간색으로 바뀌는데, 이 방법은 Firefox 브라우저와 IE7 이상에서만 유효하고 IE6에서는 지원하지 않으므로 일정한 제한이 있습니다. 두 번째 방법의 코드는 마우스 호버 코드 섹션이 끝에 추가된다는 점을 제외하면 위의 예와 거의 동일합니다.

코드 복사

코드는 다음과 같습니다.

;label for= "textfield">입력 콘텐츠:

이것을 사용하세요 code, big 대부분의 브라우저가 이를 지원할 수 있습니다.

3. 입력 상자를 클릭하면 기본 텍스트가 사라집니다

입력 상자를 마우스로 클릭하면 원래 기본 텍스트가 사라집니다. 다른 새 내용을 입력한 다음 마우스를 다른 곳으로 이동하면 입력 상자의 새 내용이 변경되지 않고 그대로 유지됩니다. 새 내용을 입력하지 않으면 마우스가 입력 상자에서 나가고 기본 텍스트가 복원됩니다. 이 효과는 판단할 짧은 자바스크립트 조각을 추가하여 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다. 다음:

입력 내용 :

입력의 자리표시자 속성은 HTML5에서 직접 사용할 수 있습니다:

코드 복사

코드는 다음과 같습니다.

위의 세 가지 효과는 비교입니다. 간단한 자바스크립트 애플리케이션은 HTML 코드의 범위를 넘어섰지만, 이를 마스터하면 HTML 애플리케이션 및 웹페이지 제작에 큰 편리성을 제공하므로 필요한 경우 간단한 자바스크립트를 마스터하는 것이 필요합니다.