HTML5의 <select> 필드에 필수 속성을 적용 할 수 있습니까? 확인할 수

사용자가 무언가를 선택했는지 어떻게 확인할 수 있습니까? <select> HTML5 필드에서 있습니까?

나는 <select>새로운 것을 지원하지 않는 것을 본다required … 속성을 그때 자바 스크립트를 사용해야합니까? 아니면 내가 놓친 것이 있습니까? : /

답변

필수 : 첫 번째 값을 비 웁니다-빈 값에 필요한 작업

전제 조건 : 올바른 html5 DOCTYPE 및 이름 지정된 입력 필드

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

당으로 문서 (리스팅 (listing)와 대담은 내 꺼야)

필수 속성은 부울 속성입니다.
지정된 경우 사용자는 양식을 제출하기 전에 값을 선택해야합니다.

선택 요소가

  • 필수 속성이 지정되어 있습니다.
  • 여러 속성을 지정하지 않은 경우
  • 디스플레이 크기가 1 (SIZE = 2 이상이 아님-필요없는 경우 생략)
  • 및 옵션의 선택 요소의 목록에서 첫 번째 옵션 요소의 값이 (있는 경우) 빈 문자열 인 경우 (즉, 현재와 같은 value="")
  • 해당 옵션 요소의 상위 노드는 선택 요소이며 (optgroup 요소는 아님)

그 옵션은 요소의 자리 표시 자 레이블 선택 옵션입니다.

답변

<select>요소는 지원하지 않습니다 required사양에 따라, 속성 :

어떤 브라우저가 이것을 존중하지 않습니까?

(물론 사용자가 JavaScript를 사용할 수 있음을 보장 할 수 없으므로 서버에서 검증해야합니다.)

답변

selected옵션 요소 의 속성을 사용하여 기본적으로 선택 항목을 선택할 수 있습니다 . requiredselect 요소 의 속성을 사용하여 사용자가 무언가를 선택하도록 할 수 있습니다.

Javascript에서, selectedIndex선택된 옵션의 색인 value을 얻기 위해 특성을 점검하거나, 선택된 옵션 의 값을 얻기 위해 특성을 점검 할 수 있습니다 .

HTML5 사양에 따르면, selectedIndex“첫번째 선택된 항목의 인덱스를 반환합니다 (있는 경우) 또는 선택된 항목이없는 경우 -1을 value반환합니다 . 그리고 “있는 경우 첫 번째 선택된 항목의 값을 반환합니다 (있는 경우) 선택된 항목이 없습니다. “따라서 selectedIndex = -1이면 아무것도 선택하지 않은 것입니다.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

답변

예, 작동합니다.

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

첫 번째 옵션은 비워 두어야합니다.

답변

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

답변

먼저 첫 번째 옵션에서 빈 값을 할당해야합니다. 즉, 여기에서만 선택하십시오. 필요한 것만 작동합니다.

답변

선택 상자의 첫 번째 항목 값을 비워 두십시오.

따라서 FORM을 게시 할 때마다 빈 값을 얻고이 방법을 사용하면 사용자가 드롭 다운에서 아무것도 선택하지 않았다는 것을 알 수 있습니다.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>