사용자 경험_형태 효과에 맞는 아름다운 입력 상자 만들기

오늘은 입력 상자 처리에 대한 자세한 처리 및 경험에 대해 이야기하겠습니다. 실제로 CSS 표준, FF/IE7/IE6 및 기타 주류 브라우저와 완벽하게 호환되고 사용자 경험에 맞는 입력을 만드는 것은 어렵지 않습니다. 먼저 클릭하시면 아래 효과를 보실 수 있습니다!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>스크립트홈-www.jb51.net 폼효과</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font-size:63%; color:#000; } /*input*/ .input_on{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_off{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } .input_move{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_out{ /*height:16px;默认高度*/ padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } /*form*/ ul.input_test{ margin:20px auto 0 auto; width:500px; list-style-type:none; } ul.input_test li{ width:500px; height:22px; margin-bottom:10px; } .input_test label{ float:left; padding-right:10px; width:100px; line-height:22px; text-align:right; font-size:1.4em; } .input_test p{ float:left; _margin-top:-1px; } .input_test span{ float:left; padding-left:10px; line-height:22px; text-align:left; font-size:1.2em; color:#999; } </style> <ul class="input_test"> <li> <label for="inp_name">이름: </label> <p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'"></p> <span>이름을 입력해주세요</span> </li> <li> <label for="inp_email">이메일: </label> <p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'"></p> <span>이메일을 입력해주세요</span> </li> <li> <label for="inp_web">웹사이트: </label> <p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'"></p> <span>귀하의 웹사이트를 입력해주세요</span> </li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

입력 항목 위에 마우스를 올리면 입력 색상이 변경됩니다. 또한 제목(<라벨>의 역할)이나 입력 상자를 클릭하면 커서가 있는 입력 색상이 변경됩니다. 다른 입력 상자와도 다릅니다. 이것이 에서 JS의 역할입니다. 사용자 경험은 사용자에게 무엇을 입력할 수 있는지, 현재 입력이 어디에 있는지 알려줍니다. 또한 키보드의 Tab 키를 전환하여 현재 내용을 입력한 후 다음 입력창으로 이동하는 것이 더욱 편리해집니다. 이것이 CSS의 합리적인 레이아웃 구조의 역할입니다.

전체 구조는

와
• 로 구성되며, 각
• 는 한 줄의 콘텐츠를 표시합니다. 라벨은 제목을 표시하고,

  input은 입력 상자를 제어하며, 설명 정보를 표시합니다. 여기서는 다양한 브라우저에서 의 행 높이 설정이 FF에 영향을 미치지 않으므로 패딩을 사용하여 텍스트 위치를 제어하는 ​​것이 좋습니다. 입력 상자. <입력>브라우저의 기본 높이는 16px로, 하단 테두리를 추가하는 경우와 동일합니다. 특히 을 더 크게 만들어야 하는 경우 패딩을 사용하여 제어하는 ​​것이 좋습니다.
  
  JS 부분에 대해 이야기해 보겠습니다. onblur(커서 유지), onfocus(커서 유지), onmousemove(마우스 유지), onmouseout(마우스 유지)는 마우스의 움직임을 제어하는 ​​데 사용됩니다. 해당 CSS 스타일을 정의하기만 하면 JS를 몰라도 문제가 되지 않습니다. JS 작업에 도움을 준 클래식 포럼의 WellFrog에게 특별한 감사를 표하고 싶습니다.
  
  요즘 무엇인가를 배우는 것보다 숙달하는 데 훨씬 더 많은 에너지와 시간이 소요됩니다. CSS 표준을 준수하고, FF/IE7/IE6와 같은 주류 브라우저와 완벽하게 호환되며, 사용자 경험을 충족하는 것을 만드는 것은 실제로 매우 간단합니다.