HTMLのお問い合わせフォーム

お問い合わせフォーム

フォーム開始

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

※actionで提出ボタンを押したときに飛ぶphpファイルを指定する。phpがないとお問い合わせフォームは送信することができない。

入力欄

 <label >お名前：<input type="text" name="お名前" required /></label><br>

または

  <label for="△△">お名前：</label><input type="text" name="お名前" required id="△△"/><br>

※type=""の内容をemailにすればメール入力欄　telにすれば電話入力欄　passwordにすればパスワード入力欄になる
　required をつけると入力必須の欄になる
　labelで囲むことによってお名前：の文字をクリックしたときでもカーソルが入力欄に入るようになる。
　nameはphpのところで使うパラメータ。英語が推奨だが日本語でも動く。

※2つ目のものは</label>の位置が違う。labelで全体が囲めていないので△△に同じものを入れて関連付ける。

選択肢欄

 <label >種別：
 <select name="種別">
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 </select></label><br>

※selectで枠を作成しoptionのABCを作成する。ABCの中から選ぶ選択欄が作成できる。

ラジオボタン

 <fieldset>
   <legend>性別を選択してください：</legend>
   <label><input type="radio" name="gender" value="male" required> 男性</label>
   <label><input type="radio" name="gender" value="female"> 女性</label>
   <label><input type="radio" name="gender" value="other"> その他</label>
 </fieldset><br>

※fieldsetとlegendを使うと枠線が入る。いらないなら消す。

チェックボックス

   <fieldset>
     <legend>趣味（複数選択可）：</legend>
     <label><input type="checkbox" name="hobby[]" value="reading"> 読書</label><br>
     <label><input type="checkbox" name="hobby[]" value="sports"> スポーツ</label><br>
     <label><input type="checkbox" name="hobby[]" value="music"> 音楽鑑賞</label><br>
     <label><input type="checkbox" name="hobby[]" value="travel"> 旅行</label><br>
     <label><input type="checkbox" name="hobby[]" value="gaming"> ゲーム</label><br>
   </fieldset><br>

※fieldsetとlegendを使うと枠線が入る。いらないなら消す。
　nameを配列にして複数の選択肢が入るようになっている。nameに[]がいる。
　
長文記入欄

 <label >メッセージ：<textarea  name="メッセージ" rows="5" required></textarea></label>

提出ボタン

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

フォーム終了

 </form>

フォーム例

フォーム.html

 <form action="フォーム送信.php" method="post">
 <label >お名前：<input type="text" name="お名前" required /></label><br>
<button type="submit">送信する</button>
 </form>

フォーム2.html

 <form action="メール送信.php" method="post">
 <label >メール：<input type="email" name="メール" required /></label><br>
<button type="submit">送信する</button>
 </form>

GETのフォーム

GETのフォーム.html

 <form action="GETフォーム.php" method="get">
 <label >お名前<input type="text" name="NAME" required /></label><br>
<button type="submit">送信する</button>
 </form>

formのmethodをgetにする。
とんだ先のURLがphpのファイル名＋name名と入力欄に入れた内容になる
nemeを日本語にしていると日本語はURLに使えないため％を使った文字列になる。