사용자 경험과 사용 편의성을 향상시키기 위한 HTML 입력 상자 최적화 자세한 소개

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

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

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입니다. onfocus를 사용하지 않는 경우 onfocus="this.select()"와 같이 onclick을 사용하여 동일한 효과를 얻을 수도 있습니다.

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

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

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

입력 상자 위에 마우스를 올리면 입력 상자의 테두리가 빨간색으로 변합니다. 단, 이 방법은 Firefox 브라우저 및 IE7 이상에서만 유효합니다. 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의 자리 표시자 속성을 사용할 수 있습니다. 직접:

코드는 다음과 같습니다.

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

위의 세 가지 효과는 비교적 간단한 JavaScript 응용 프로그램이지만 Html 코드의 범위를 벗어났습니다. HTML 및 웹페이지 제작에 적용하면 매우 편리하므로 필요할 경우 간단한 자바스크립트를 익히는 것이 필요합니다.

사용자 경험과 사용 편의성을 향상하기 위한 HTML 입력 상자 최적화에 대한 자세한 내용은 PHP 중국어 웹사이트에서 자세한 관련 기사를 확인하세요!