HTML5/要素/セレクトボックス

HTML5/要素/セレクトボックス

required の効き

どのような状況になるとセレクトボックスに指定した required が効く(送信を抑止してくれる)のか?

option が無い

option がそもそも存在せず選択できない場合

<form>
    <select name="hoge" required>
    </select>
    <button type="submit">okuru</button>
</form>

効く(抑止される)

option はあるが value が無い

option があるがその option に value が指定されてないやつを選択した場合。

<form>
    <select name="hoge" required>
        <option>nashi</option>
    </select>
    <button type="submit">okuru</button>
</form>

この場合 form の解釈は option タグの中身を value として送信するので、効かない

value が空文字

value が空文字の場合

<form>
    <select name="hoge" required>
        <option value="">nashi</option>
    </select>
    <button type="submit">okuru</button>
</form>

効く(抑止される)

value がスペース

<form>
    <select name="hoge" required>
        <option value=" ">nashi</option>
    </select>
    <button type="submit">okuru</button>
</form>

スペースを送信してしまう。つまり効かない

name が無い

select から name を除去してしまった場合、つまり UI として使うけど送信パラメータとしては使わないような安全スイッチ的に使いたい場合

<form>
    <select required>
        <option value="abc">nashi</option>
    </select>
    <button type="submit">okuru</button>
</form>

パラメータ自体は送信されないが、抑止もされない。つまり効かない。

無効化している

無効化している場合

<form>
    <select name="hoge" disabled required>
        <option value="abc">nashi</option>
    </select>
    <button type="submit">okuru</button>
</form>

送信もされないし、抑止もされない、

コピペ

時間5分刻み

<select id="" name="">
	<option value="">00</option>
	<option value="">01</option>
	<option value="">02</option>
	<option value="">03</option>
	<option value="">04</option>
	<option value="">05</option>
	<option value="">06</option>
	<option value="">07</option>
	<option value="">08</option>
	<option value="">09</option>
	<option value="">10</option>
	<option value="">11</option>
	<option value="">12</option>
	<option value="">13</option>
	<option value="">14</option>
	<option value="">15</option>
	<option value="">16</option>
	<option value="">17</option>
	<option value="">18</option>
	<option value="">19</option>
	<option value="">20</option>
	<option value="">21</option>
	<option value="">22</option>
	<option value="">23</option>
</select>
<select id="" name="">
	<option value="">00</option>
	<option value="">05</option>
	<option value="">10</option>
	<option value="">15</option>
	<option value="">20</option>
	<option value="">25</option>
	<option value="">30</option>
	<option value="">35</option>
	<option value="">40</option>
	<option value="">45</option>
	<option value="">50</option>
	<option value="">55</option>
</select>
html/html5/elements/select.txt · 最終更新: 2020-10-02 19:11 by ore