집 > 기사 > 웹 프론트엔드 > 사용자 경험과 사용 편의성을 향상시키기 위해 HTML 입력 상자를 최적화하는 방법

사용자 경험과 사용 편의성을 향상시키기 위해 HTML 입력 상자를 최적화하는 방법

php中世界最好的语言원래의: 2018-02-02 10:04:362014검색

이번에는 사용자 경험과 사용 편의성을 향상시키기 위해 HTML 입력 상자를 최적화하는 방법을 가져오겠습니다. 사용자 경험과 사용 편의성을 향상시키기 위해 HTML 입력 상자를 최적화할 때 주의해야 할 주의 사항은 무엇입니까? 다음은 실제 사례를 한 번 살펴보겠습니다.

사용자 경험과 사용 편의성을 향상시키기 위해 일부 디자이너는 입력 상자와 같이 사용자가 웹 페이지에서 자주 사용하는 것을 최적화합니다. 일반 입력 상자는 어떻게 최적화되나요? 사용자 경험 측면에서 볼 때 사용자 단계를 단순화하고 사용자에게 더 편리하게 하면 사용성이 향상됩니다. 예를 들어 입력 상자 위에 마우스를 올리면 입력 상자의 색상이 변경되고 입력 상자의 기본 텍스트가 자동으로 선택됩니다. , 또는 클릭하여 입력 상자를 열 때 기본 내용을 자동으로 지우는 등.
이 효과는 복잡해 보이지만 실제로는 매우 간단합니다. 짧은 javascript 코드만 있으면 해결할 수 있습니다. 다음은 여러 효과에 대한 코드를 소개합니다.
1. 콘텐츠의 HTML 코드를 선택하려면 입력 상자를 클릭하세요.

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

이 코드에서 가장 중요한 부분은 onfocus 부분을 사용하지 않는 경우 onclick을 사용해도 동일한 효과를 얻을 수 있습니다. onfocus="this.select( )"로.

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

이 효과에는 두 가지 방법이 있습니다. 방법 1은 CSS의 의사 요소를 사용하는 것입니다. 방법 2는 작은 요소를 사용하는 것입니다. javascript의 첫 번째 방법은 html입니다. 코드는 다음 섹션이 CSS에 추가된다는 점을 제외하면 위의 예와 동일합니다.

input:hover { border:1px solid #F00; }

마우스를 입력 상자 위로 가져가면 입력 상자의 테두리가 빨간색으로 바뀌지만 이 방법은 Firefox 및 IE7 이상에서만 사용할 수 있습니다. IE6에서는 유효하고 IE6에서는 지원되지 않으므로 특정 제한 사항이 있습니다. 두 번째 방법의 코드는 마지막에 마우스 호버 코드가 추가된다는 점을 제외하면 위 예제와 거의 동일합니다.

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" /> 
</form>

이 코드를 사용하면 대부분의 브라우저에서 이를 지원할 수 있습니다.

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

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

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" onFocus="if (value ==&#39;Dreamweaver&#39;){value =&#39;&#39;}" onBlur="if (value ==&#39;&#39;){value=&#39;Dreamweaver&#39;}"/> 
</form>

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

<input type="search" name="user_search" placeholder="Search W3School" />

위의 세 가지 효과는 Html을 능가하지만 비교적 간단한 JavaScript 응용 프로그램입니다. 코드의 범위가 크지만 이를 마스터하면 Html 애플리케이션 및 웹 페이지 제작에 큰 편리성을 가져오므로 필요할 경우 간단한 자바스크립트도 마스터해야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!