【HTML】formまとめ

HTML5

Last updated at 2024-10-02Posted at 2024-10-01

formとは

form.html

<form action="/action/">

</form>

httpにリクエストが送れるタグ
form自体には見た目に影響はない。ただの器。

属性の説明
属性	説明
action	「どこ」にフォームの情報を送信するか指定

input

form.html

<form action="/action/">
    <input type="text" placeholder="テキストを入力" />
    <input type="month" placeholder="日付" />
    <input type="number" placeholder="数を入力" />
</form>

実行結果

実際に入力欄を作るタグ

属性の説明
属性	説明
type	どんな入力欄にするか
placeholder	入力されていないときに表示される文字

label

form.html

<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
</form>

実行結果

文字と入力欄を関連付ることができる
関連付けると、文字をクリックしても入力欄にフォーカスが当たる

属性の説明
属性	説明
for	inputのid属性と同じ名前にすることで関連付けれる

*labelはbuttonとかにもつけられるみたいです。

button

form.html

<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
    
    <button type="submit">送信</button>
    
</form>

実行結果

ボタンを設置できる
ボタンを押すと、URLが/form.htmlから/action/に変わる
→これは、formのaction属性に書いているURLに変わっている。
別の動作をさせたい場合はtype属性で指定する。

属性の説明
属性	説明
type	ボタンの役割を指定する

input-name属性

form.html

<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
    
    <button type="submit">送信</button>
    
</form>

サーバーに送る情報に名前がつけられる

どういうこと？？具体例を見よう！↓

具体例
上記のform.htmlのユーザー名（abc）とパスワード（abcd）を入力して、送信ボタンを押した場合

URLが/form.htmlから/action/?username=abc&password=abcdに変わる
この時のusername=abcとpassword=abcdの部分は、inputのname属性で指定している名前と同じになっている。
つまり、入力して送信された情報（今回はabcとabcd）に名前をつけることができている

コラムここまでの知識を使えばこんなこともできる！

form.html

<form action="https://www.google.com/search">
    <label for="google">Google検索</label>
    <input type="text" name="q" id="google" />
    <button type="submit">送信</button>
</form>

実行結果

送信を押すと、、

実際にGoogleで検索できる！

解説

Googleでいつも通り検索すると、以下のようなリンクが表示される
https://www.google.com/search?q=犬&gs_lcrp=EgZjaHJvbWUyDggAE・・・
https://www.google.com/search?q=犬に注目！
さっきの/action/?username=abc&password=abcdに似てない？
そう。formのaction属性に、https://www.google.com/search入れて、inputのname属性にqを入れればできちゃう！
Googleに限らず、youtubeとかでもできる！

input-type属性-チェックボックスなど

form.html

<form action="/action2">

    <!-- チェックボックス -->
    <p>
        <input type="checkbox" name="agree_tos" id="agree" />
        <label for="agree">利用規約に同意します</label>
    </p>

    <!-- ラジオボタン -->
        <p>
        <label for="s">S:</label>
        <input type="radio" name="size" id="s" value="s">

        <label for="m">M:</label>
        <input type="radio" name="size" id="m" value="m">

        <label for="l">L:</label>
        <input type="radio" name="size" id="l" value="l">
    </p>

    <button>送信</button>

</form>

実行結果

type属性の種類
種類	説明	チェックして送信を押した時のURL
checkbox	チェックボックス	/action2?agree_tos=on
radio	ラジオボタン	/action2?size=m

　　
checkbox解説

checked属性をつけると初期でチェックがついてる状態にできる

radio解説

チェックボックスとの違い：グルーピングすると複数の中から1つしか選択できない
グルーピングする方法：nameを統一する
value属性をつけないと、リクエストのURLに選択した値が具体的に何なのか反映されない
例：Mを選択：×size=on　⚪size=m

select-プルダウン

form.html

<form action="/action3">
    <p>
        <label for="size">サイズを選択してください</label>
        <select name="size" id="size">
            <option value="s">Sサイズ</option>
            <option value="m" selected>Mサイズ</option>
            <option value="l">Lサイズ</option>
        </select>
    </p>
    <button>提出</button>
</form>

実行結果

<select>と<option>でプルダウンが作れる
selectの属性：nameは値に名前をつけるため、idはlabelと関連付けるため
optionの属性：valueは選択した値が何かを判別できるようにするため
selectedをつけるとデフォルトの値を設定できる

HTMLバリデーション

form.html

<form action="/action">

    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名" required>
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード" minlength="5" maxlength="10">
    </p>

    <button type="submit">送信</button>

</form>