<option> 태그 내에서 href 링크 사용

다음 HTML 코드가 있습니다.

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

Home , Contact 및 Sitemap 값을 링크로 만들려면 어떻게 해야합니까? 다음 코드를 사용했는데 예상대로 작동하지 않습니다.

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

업데이트 (2015 년 11 월) : 이 시대에 드롭 메뉴를 원한다면 메뉴 를 구현하는 더 좋은 방법 이 많이 있습니다. 이 답변은 직접 질문에 대한 직접적인 답변이지만 공개 웹 사이트에 대해서는이 방법을 옹호하지 않습니다.

업데이트 (2020 년 5 월) : 누군가 가이 솔루션을 옹호하지 않는 이유를 의견에 물었습니다. 나는 그것이 의미론의 문제라고 생각합니다. HTML 요소는 의미 론적 회의를 가지며 목적을 가지고 장소를 취하고 목록에서 물건을 선택하기위한 목적을 가지고 있기 때문에 사용자 가 양식 선택을 위해 <a>계속 탐색하고 사용 하고 싶습니다 .<select>anchors<select>

당신이 (비 그래픽 브라우저 또는 화면 판독기 나 페이지가 프로그램에 액세스하거나, 자바 스크립트가 비활성화) 무엇을 다음 "의미"또는이의 "의도"하는 비 전통적인 브라우저 페이지를 보는 경우, 생각해 <select>당신은 탐색에 사용됩니까? 그것은 "페이지 이름을 선택하십시오"라고 말하고 다른 것은 많지 않습니다. 이것에 대한 쉬운 반응 well i know that my users will be using IE or whatever so shrug이지만 의미 상 중요한 점을 놓친 것입니다.

일부 일반 앵커를 포함하는 적절한 레이아웃 요소 (및 일부 js)로 구성된 펑키 드롭 다운 UI 요소는 레이아웃 요소가 손실 된 경우에도 여전히 의도를 유지합니다. .

다음은 의 오용 및 남용<select> 에 관한 기사 입니다 .

옵션 태그와 함께 href 태그를 사용할 수 없습니다. 그렇게하려면 자바 스크립트가 필요합니다.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

대신 실제 드롭 다운 메뉴를 사용하십시오 : 목록 ( ul, li) 및 링크. 양식 요소를 링크로 오용하지 마십시오.

스크린 리더가있는 리더는 일반적으로 자동으로 생성 된 링크 목록을 스캔하므로 이러한 중요한 정보를 놓치게됩니다. 많은 키보드 탐색 시스템 (예 : JAWS, Opera)은 링크 및 양식 요소에 대해 다른 키보드 단축키를 제공합니다.

여전히 아이디어를 버릴 수 없다면 적어도 핸들러를 select사용하지 마십시오 onchange. 이것은 키보드 사용자에게는 큰 고통이며 세 번째 항목에 거의 액세스 할 수 없게 만듭니다.

허용되는 솔루션은 좋아 보이지만 처리 할 수없는 경우가 하나 있습니다.

동일한 옵션을 다시 선택하면 "onchange"이벤트가 트리거되지 않습니다. 그래서 다음과 같은 개선 사항을 생각해 냈습니다.

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

(Toscho의 답변에 대해 언급 할만 큼 평판이 충분하지 않습니다.)

스크린 리더에 대한 경험이 없으며 포인트가 유효하다고 확신합니다.

그러나 키보드를 사용하여 선택을 조작하는 한 키보드를 사용하여 옵션을 선택하는 것은 간단합니다.

컨트롤 탭

선택 목록을 여는 스페이스

위 또는 아래 화살표를 사용하여 원하는 목록 항목으로 스크롤

원하는 항목을 선택하려면 ENTER

ENTER에서만 onchange 또는 (JQuery .change ()) 이벤트가 발생합니다.

개인적으로 간단한 메뉴에 폼 컨트롤을 사용하지는 않지만 폼 컨트롤을 사용하여 페이지의 프리젠 테이션 (예 : 정렬 순서)을 변경하는 웹 응용 프로그램이 많이 있습니다. 페이지 또는 이전 구현에서는 기본적으로 페이지 링크 인 새 페이지로드를 트리거하여

IMHO 이것들은 폼 컨트롤의 유효한 사용입니다.

<select>태그는 드롭 다운 목록을 작성합니다. 드롭 다운 안에 html 링크를 넣을 수 없습니다.

그러나 유사한 기능을 제공하는 JavaScript 라이브러리가 있습니다. 예를 들면 다음과 같습니다. http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

이 코드를 사용해보십시오

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>