menu
書いてる野郎
orebike@gmail.com
どのような状況になるとセレクトボックスに指定した required が効く(送信を抑止してくれる)のか?
option がそもそも存在せず選択できない場合
<form> <select name="hoge" required> </select> <button type="submit">okuru</button> </form>
効く(抑止される)
option があるがその option に value が指定されてないやつを選択した場合。
<form> <select name="hoge" required> <option>nashi</option> </select> <button type="submit">okuru</button> </form>
この場合 form の解釈は option タグの中身を value として送信するので、効かない
value が空文字の場合
<form> <select name="hoge" required> <option value="">nashi</option> </select> <button type="submit">okuru</button> </form>
効く(抑止される)
<form> <select name="hoge" required> <option value=" ">nashi</option> </select> <button type="submit">okuru</button> </form>
スペースを送信してしまう。つまり効かない
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>