사용자가 양식을 진행하면서 입력 필드를 설명하는 상자는 어떻게 만듭니 까?

Question

양식의 각 필드에 어떤 종류의 데이터가 들어가야 하는지를 설명/명확히하는 질문 질문 페이지와 매우 흡사합니다. 이 페이지에서 "소스보기"를 시도했지만 단순히 어떤 일이 벌어지는 지 머리도 꼬리도 만들 수 없습니다. 누군가 설명해 주시겠습니까? 아니면 사용할 수있는 자습서가 있습니까?

예 :

1. 사용자가 상자가 회사의 여러 종류와이 회사 유형 분류

2. 드롭 다운 메뉴 이동해야하는지 설명하는 텍스트 입력에 클릭

   . 사용자가 각 유형의 의미를 이해하지 못하기 때문에 사용자가 잘못 분류되었습니다. 사용자가 드롭 다운 메뉴를 클릭하면 상자 내의 텍스트가 각 회사 유형을 설명합니다.

형태의 일부 스크린 샷에 대한

참조 링크 : http://imgur.com/TYOmT

나는 또한 항상되도록 상자 그냥 필드의 오른쪽에 (양식을 여행하고 싶은 그 사용자가 함께 작업 중임)

Thank you! 그래서 같은

Answer 1

감안할 때 HTML : 다음과 같은 자바 스크립트가 선택한 옵션의 data-description의 값을, 그리고 함께 #description을 채 웁니다

<form> 
     <select name="some_name" id="some_name"> 
      <option value="option1" data-description="Description of option1">option1</option> 
      <option value="option2" data-description="Description of option2">option2</option> 
     </select> 
    </form> 
    <div id="description"> 
     Default Description 
    </div>​ 

.

var $description = $('#description'); 
    $('#some_name').on('change', function(event){ 
     var $option = $(event.currentTarget).find(':selected'); 
     $('#description').html($option.attr('data-description')); 
    }); 

여기는 working example입니다.

각 입력에 대한 추가 처리기를 만들거나 양식의 입력에 대한 처리기를 만들면 특정 입력에 대한 추가 정보를 제공하는 항목을 쉽게 확장 할 수 있습니다.

display:fixed 또는 Twitter Bootstrap의 affix과 같은 것을 사용하여 설명을 고정 할 수있는 다양한 방법이 있습니다.