BETA

いつも忘れるHTMLのフォーム関連要素について、よく使うものをまとめてみる

投稿日:2019-11-09
最終更新:2019-11-10

本当にいつも忘れて毎回ググっている気がするので、一回まとめてみることにした。

form要素

actionで入力されたデータの送信先URL(フォームのデータを受け取るプログラムファイルのパス)を、methodで送信方式POSTまたはGETを記述する。

使い方

<form action="XXX.php" method="post">  
</form>  

input要素

主要なものは以下4つ。

  • input type=”text”
  • input type=”emai”
  • input type=”password”
  • input type=”tel”

使える属性

属性名 内容
name プログラム側で判別するための名前
value プログラムに送られる値
placehoder 入力欄に初期表示する内容
required 必須かどうか

使い方

<input type="text" name="プログラム側で判別するための名前" value="プログラムに送られる値" placeholer="入力欄に初期表示する内容" required>  

textarea要素

これはinputと違ってタグ必ず閉じる必要がある。
<textarea></textarea>

使える属性

属性名 内容
name プログラム側で判別するための名前
value プログラムに送られる値
placehoder 入力欄に初期表示する内容
rows 高さを指定
cols 横幅を指定
required 必須かどうか

使い方

<textarea name="プログラム側で判別するための名前" value="プログラムに送られる値" placeholer="入力欄に初期表示する内容" rows="5" cols="50" required></textarea>  

ラジオボタン(input type="radio)

使える属性

属性名 内容
name プログラム側で判別するための名前
value プログラムに送られる値
checked 初期状態でチェックされているか

使い方

<input type="radio" name="プログラム側で判別するための名前" value="プログラムに送られる値" checked="checked">  

セレクトボックス

使える属性

属性名 内容
name プログラム側で判別するための名前
value プログラムに送られる値
size リスト形式の時の選択肢の数を指定

使い方

<select name="プログラム側で判別するための名前" size="2">  
        <option value="プログラムに送られる値">選択肢1</option>  
        <option value="プログラムに送られる値">選択肢2</option>  
</select>  

ボタン

主要なものは以下三つ。

  • input type="submit" 送信ボタン
  • input type="reset" リセットボタン
  • input type="button" ただのボタン"

ボタンにおいてはvalue属性でボタンテキストを表す。

使える属性

属性名 内容
value ボタンのテキスト

使い方

<input type="submit" value="送信する">  

使い方まとめ

<!-- フォームタグ -->  
<form action="XXX.php" method="post">  

        <!--  一行テキストフィールド-->  
        <div class="form-item>  
                <label for="name">名前</label>  
                <input type="text" name="name" placeholder="名前を入力">  
        </div>  
         <div class="form-item>  
                <label for="email">メールアドレス</label>  
                <input type="email" name="email" placeholder="メールアドレスを入力" required>  
        </div>  
         <div class="form-item>  
                <label for="password">パスワード</label>  
                <input type="password" name="password" value="password" required>  
        </div>  
         <div class="form-item>  
                <label for="tel">電話番号</label>  
                <input type="tel" name="tel" placeholder="電話番号を入力">  
        </div>  

        <!-- テキストエリア -->  
        <div class="form-item>  
                <label for="content">内容</label>  
                <textarea name="content" placeholder="内容を入力" rows="5" cols="50"></textarea>  
        </div>  

        <!-- ラジオボタン -->  
        <div class="form-item">  
                <label>性別</label>  
                <label><input type="radio" name="gender" value="man" checked="checked">男</label>  
                <label><input type="radio" name="gender" value="woman">女</label>  
                <label><input type="radio" name="gender" value="other">その他</label>  
        </div>  

        <!-- チェックボックス -->  
        <div class="form-item">  
                <label>ご利用のSNS</label>  
                <label><input type="checkbox" name="sns" value="twitter" checked="checked">Twitter</label>  
                <label><input type="checkbox" name="sns" value="instagram">Instagram</label>  
                <label><input type="checkbox" name="sns" value="facebook">Facebook</label>  
        </div>  

        <!-- セレクトボックス -->  
        <div class="form-item">  
                <label>好きな食べ物</label>  
                <select name="food">  
                        <option value="meat">肉</option>  
                        <option value="fish">魚</option>  
                        <option value="vegetable">野菜</option>  
                        <option value="fruit">果物</option>  
                        <option value="other">その他</option>  
                </select>  
        </div>  
        <div class="form-item">  
                <label>好きな季節</label>  
                <select name="season" size="4">  
                        <option value="spring">春</option>  
                        <option value="summer">夏</option>  
                        <option value="fall">秋</option>  
                        <option value="winter">冬</option>  
                </select>  
        </div>  

        <!-- ボタン -->  
        <input type="submit" value="送信する">  
        <input type="reset" value="リセット">  
        <input type="button" value="ただのボタン">  
</form>  

上記の記述のこんな感じのフォームが出来上がる↓

以下のURLで自由に編集できます。
https://codepen.io/bbbbruno/pen/JjjZmaa

いろいろ多いけど一回まとめてみると案外覚えられる

今回まとめてみて、だいぶ覚えることができたと思う。
忘れてもここでまとめたことを何度も見て、定着させていこうと思う!

参考記事

フォーム部品の種類について最低限必要なものだけを解説
フォーム作成に必須!HTMLでlabelタグを使う方法【初心者向け】

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!