<입력> 요소 안에 레이블을 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

문제

사용자가 클릭하면 실망하는 입력 요소 내부에 설명 텍스트를 삽입하고 싶습니다.

나는 그것이 매우 일반적인 속임수라는 것을 알고 있지만 어떻게 해야할지 모르겠습니다 ..

가장 간단하고 더 나은 솔루션은 무엇입니까?

도움이 되었습니까?

해결책 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

더 좋은 예는 SO 검색 버튼입니다! 그것이 내가이 코드를 얻은 곳입니다. 페이지보기 소스는 귀중한 도구입니다.

다른 팁

HTML5를 사용하는 경우 사용할 수 있습니다 placeholder 기인하다.

<input type="text" name="user" placeholder="Username">

제 생각에 최상의 솔루션에는 이미지가 포함되지 않거나 입력의 기본값을 사용하지 않습니다. 오히려 David Dorward의 솔루션과 같은 것 같습니다.

JavaScript가없는 스크린 리더 및 사용자를 위해 쉽게 구현하고 잘 저하됩니다.

여기에서 두 가지 예를 살펴보십시오.http://attardi.org/labels/

나는 보통 내 양식에 두 번째 방법 (labels2)을 사용합니다.

일반적인 접근 방식은 기본값을 레이블로 사용한 다음 필드가 초점을 얻을 때 제거하는 것입니다.

접근성과 유용성의 영향이 있기 때문에이 접근법은 정말 싫어합니다.

대신, 나는 필드 옆에있는 표준 요소를 사용하는 것으로 시작합니다.

그런 다음 JavaScript가 활성화되면 조상 요소에 클래스를 설정하여 새로운 스타일이 다음을 적용하게합니다.

  • 입력 및 레이블이 포함 된 DIV를 상대적으로 위치
  • 라벨을 절대적으로 배치하십시오
  • 입력을 라벨 위에 절대적으로 배치하십시오
  • 입력의 경계를 제거하고 배경색을 투명하게 설정하십시오.

그런 다음 입력이 초점을 잃을 때마다 입력에 값이 있는지 확인하기 위해 테스트합니다. 그렇다면 조상 요소에 클래스 (예 : "Hide-Label")가 있는지 확인하십시오. 그렇지 않으면 해당 클래스가 없도록하십시오.

입력이 초점을 얻을 때마다 해당 클래스를 설정하십시오.

스타일 시트는 셀렉터의 해당 클래스 이름을 사용하여 레이블을 숨 깁니다 (텍스트 표시 : -9999px; 보통).

이 접근법은 JS 비활성화 된 사용자와 스크린 리더를 사용하는 사용자를 포함하여 모든 사용자에게 알맞은 경험을 제공합니다.

@Cory Walker가 제안한 솔루션을 @Rafael의 확장자와 함께 @Tex 마녀 중 하나는 나에게 약간 복잡했으며 희망적인 솔루션을 생각해 냈습니다.

JavaScript 및 CSS가 비활성화 된 오류 방지.

형태 필드의 배경색으로 조작하여 레이블을 표시/숨 깁니다.

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

실제로 스크립트보기 : http://mattr.co.uk/work/form_label.html

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

Onblur 이벤트도 추가하십시오.

입력을 시작하면 사라집니다. 비어 있으면 다시 나타납니다.

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

가장 간단한 방법 ...

모든 브라우저에서 작품을 사용하고 HTML5 호환 브라우저에 매우 쉽게 자리 표시자를 사용하십시오. http://jamesallardice.github.io/placeholders.js/

HTML 속성에 대한 힌트 자리 표시 자 그리고 태그 Textarea, 사이에 공간이 없는지 확인하십시오 <textarea> 그리고 </textarea>, 그렇지 않으면 자리 표시 자 예를 들어 작동하지 않습니다.

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

사이에 공간이 있기 때문에 이것은 작동하지 않습니다.

이것을 사용하십시오

스타일:

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

HTML :

자바 스크립트 :

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

양식을 제출하기 전에 DefaultLabelClean () 함수를 호출하십시오.

잘 했어

이를 위해 JavaScript 코드가 필요하지 않습니다 ...
자리 표시 자 속성을 의미한다고 생각합니다. 코드는 다음과 같습니다.

<input type="text" placeholder="Your descriptive text goes here...">



기본 텍스트는 회색이되며 클릭하면 해소됩니다!

나는 라벨을 유지하고 위에서 언급 한 것처럼 자리 표시자를 사용하지 않는 것이 좋다고 생각합니다. 여기에 설명대로 UX에 좋습니다.https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

여기에 입력 필드 내부의 레이블이있는 예 : codepen.io/jdax/pen/mebjna

간단한 예는 다음과 같습니다. 이미지가 오버레이됩니다 (원하는 문구와 함께). 나는이 기술을 어딘가에서 보았다. 프로토 타입 라이브러리를 사용하고 있으므로 다른 것을 사용하는 경우 수정해야합니다. wind

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top