フォームについて

フォームとは

• ユーザーがウェブページからデータをサーバに送信するためのもの

form要素

forn要素

<form action="#" method="POST">
</form>

• action属性・・・どこにデータを送信するのかを記述する
• method属性・・・HTTPリクエストメソッドの種類を記述

HTTPメソッドの種類

• GET・・・サーバからデータを取得する場合に使用

• POST・・・サーバへデータを送信する場合に使用

input要素

input要素

<input type="text">

• データを入力するフォームの部分を作成する要素

• type属性を指定することでいろいろなフォームを作成可能

• inputの型
  [MDN]https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

単一行のテキスト入力欄の作成

テキスト入力欄の作成

<dt>お名前</dt>
<dd><input type="text" name="username"></dd>

<dt>メールアドレス</dt>
<dd><input type="text" name="email"></dd>

プルダウンメニューの作成

プルダウン

<select name="area">
  <option value="" selected>選択してください</option>
  <option value="hokkaido">北海道</option>
  <option value="okinawa">沖縄</option>
</select>

• selectedを指定することで、選択肢が初期状態で選択される
• select要素内で１つのオプションだけがselected属性を持てる

[MDN:select]https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
[MDN:option]https://developer.mozilla.org/ja/docs/Web/HTML/Element/option

ラジオボタン

ラジオボタン

<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="male" checked>男性
<input type="radio" name="gender" value="female">女性
</dd>

• name属性には同じ名前をつける
• checkedをつけると初期状態で選択されるようになる

[MDN:input]https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

テキストエリア

テキストエリア

<dt>お問い合わせ内容</dt>
<dd><textarea name="contents"></textarea></dd>

[MDN:textarea]https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

チェックボックス

チェックボックス

<dt>プライバシポリシーに同意する</dt>
<dd><input type="checkbox" name="privacy" value="1"></dd>

• 初期状態でチェックを付けたい場合はcheckedをつける

[MDN:checkbox]https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox

送信ボタン

送信ボタン

<input type="submit" name="submit" value="送信">

• form属性のアクション属性に指定したパスにデータが送られる

ラベル

• ラベルをクリックしても選択が可能になる
• ラベルを付けたい要素にidをつけることでラベルを付与できる

ラベル

<dt><label for="username">お名前</label></dt>
<dd><input id="username" type="text" name="username"></dd>