[HTML] Select option의 value와 required 사용 시 주의할 점

Mdn의 Select에 대한 예시를 보았을 때 의문이 생겼다.

 

Mdn 예시)

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

 

제일 앞 옵션에 있는 --Please choose an option-- 의 value가 없는데 '빈값으로 준 이유가 뭘까? 아예 없어도 되지 않을까?'라는 의문이었다.

 

그래서 바로 테스트 예시를 만들어 보았다.

 

test1 예시)

<form action="" method="GET">

    <label for="pet-select">Choose a pet:</label>

    <select name="pets" id="pet-select" required>
        <option>--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
    </select>

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

테스트 예시에는 required 속성을 추가하고 option 속성의 value값을 빼고 진행해 보았다. 

 

결과는,

test1 예시 결과

value를 지정해 주지 않았지만 required 속성을 무시하고 위 이미지와 같이 잘 제출되었으며, url을 보면 --Please choose an option--가 붙어 있는 걸 볼 수 있다.

 

이번에는 Mdn의 예시처럼 value를 빈값으로 넣어 테스트해 보았다.

 

test2 예시)

<form action="" method="GET">

    <label for="pet-select">Choose a pet:</label>

    <select name="pets" id="pet-select" required>
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
    </select>

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

바로 결과를 보자면,

test2 예시 결과

value를 빈값으로 인식하고 required가 동작하여 submit가 안된 걸 알 수 있다.