[html]ドロップダウン形式でリストを選択したら

やったことをまとめるように日記気分で書いていくことに決めた

今日やること

・htmlからリージョン情報を送信 ・app.pyで受けてリージョン毎のデータを返答 ・htmlで表示 までやる

・htmlからリージョン情報を送信

リージョンをリストでドロップダウンで選択して、リージョン情報を渡せるようにしたい 他のサイトのソースをまねてみるとこんなのが

input type hidden

なるほど、ドロップダウンで選択形式なのにそのまま値を送ることができるのかな
とか思ってたら全然できない

<form method="post" class="form-inline">
    <input id="region" type="submit" name="region">
    <select name="language" class="form-control">
        <option value="na1">NA</option>
        <option value="ja1">JP</option>
    </select>
</form>

今更だけど、form,input,selectについて復習をしようと思う

まずはformから

<form method="post">
</form>

インクラインは一旦無視するとして、フォームでinputたちを囲うように括るのが用法
また、methodを指定することでPOSTメソッドとしてデータを送信（リクエスト？）できる

action属性についてはこちらで確認をした
https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data

※抜粋
action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。

この例では、データを絶対 URL の http://example.com に送信します。

<form action="http://example.com">
</form>

こちらは、相対 URL を使用しています。データは同一オリジン上の別の URL に送信されます。

<form action="/somewhere_else"></form>

以下のように属性を指定しない場合は、

要素はフォームが表示されているページ自身に対してデータを送信します。

<form></form>

つまりformタグは
・inputたちのデータを囲って
・送信方法を決めて（method）
・どこに送信するかも決められる（action）
・なので表示には関係なく、箱としての役割

次にinput

<input id="region" type="submit" name="region">

基本的にはtype属性とname属性を使う
type属性はinputの入力方法を決める、どんな方法で値を入力するかを決める属性
例えばcolorとかfileとかtextとかで方法を決定

nameは変数として扱われる
なのでこの場合inputに"JP"と入力があれば
name="region"="JP"
として値を受け取ることができる

まとめると
・inputで入力方法を決定
・ここの中身が値になる（value）
・nameはinputの変数として扱える

次にlabel

基本的にはinputとセットで使われるとのこと どうやらinputのidと同じ値にfor属性を指定してあげるといいことが起きるとかなんとか その利点って何？と調べてもいまいちまとめて書いていない気がするのでこのサイトから簡易的にまとめると

・labelのテキストがinputのボタンと横並びになる
・labelの文字列をクリックするとinputのラジオボタンとかがクリックされるようになる（便利）
・プログラム的にも紐づいて、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げる

だそうで
必要なければいらないなとの認識
参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

次にselect

これはセレクトボックスを使う時用らしい 今回は使わないので解散

で結局今回のドロップダウンリストはどうやるの？

形としては、bootstrapから取ってくることにしよう

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu1" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>

求めていたドロップダウンはこんな感じだったのでコピペ
aタグをinputにすればいいのかな？

とか色々漁り、結局Javascriptが必要ということが分かったので一旦これは辞めます・・・
タイトル詐欺で済まぬ・・・

ドロップダウンリストから選んで、その後送信ボタンは一回押すようにすると下記サイトがいい感じだった。
https://moroto1122.hatenadiary.org/entry/20090111/1231679089

って結局select使ってるやん・・・
こうやって使うのかと納得理解

<form method="post" class="form-inline">
    <select class="form-control" name="my_region">
        {% if my_region =="jp1" %}
            <option selected value="jp1">JP</option>
        {% elif my_region =="na1" %}
            <option selected value="na1">NA</option>
        {% elif my_region =="kr" %}
            <option selected value="kr">KR</option>
        {% else %}
            <option selected >Select language</option>
        {% endif %}
        <option value="jp1">JP</option>
        <option value="na1">NA</option>
        <option value="kr">KR</option>
      </select>
　　<input class="btn btn-primary" type="submit" value="送信" />
</form>

色々あってフォームはこんな感じに

このフォームで、一回選択したらその選択したやつが選ばれてる状態にしたいんだけどどうやればいいのかわからず・・・
selectedというのをうまく使えば行けそうな気がするけどよくわからないのでやめ

今日はここまで

覚えたことは
form内でinputに直接入力させるか、値をもったselectを使ってsubmit、postmethodすればデータは送信されるとのこと

なんかここがいまだにしっくり来ていない
慣れよう・・・

でもうまくいって良かった
次回はデータドラゴンというAPI？からアイコンとかのファイルを取れるらしいのでそこの連携をやるか、試合情報を見ていくか

試合にしようかな