ウェブ学のすすめ

Study of Web Design & Programing

formの基本まとめ

HTML

form要素はお問い合わせなど入力フォームを作成するときに使用します。
実際にデータの送受信をするためにはCGI等が必要です。

主な属性

属性名内容
action送信先プログラムのURIを指定
methodサーバーにデータを送る形式をgetまたはpostで指定
enctypeエンコード形式を指定

フォームの部品

input要素
  • テキスト入力フィールド「type="text"」
<input type="text" name="(部品の名前)" value="(入力欄の初期値)" size="(入力欄の幅)" maxlength="入力できる最大文字数">

<input type="checkbox" name="(部品の名前)" value="(送信される文字列)" checked>

※checked：選択されている状態にする

<input type="radio" name="(部品の名前)" value="(送信される文字列)" checked>

※checked：選択されている状態にする

  • パスワード「type="password"」
<input type="password" name="(部品の名前)" value="(入力欄の初期値)" size="(入力欄の幅)" maxlength="入力できる最大文字数">
  • ファイル名入力フィールド「type="file"」
<input type="file" name="(部品の名前)" size="(入力欄の幅)">
  • 隠しフィールド「type="hidden"」
<input type="hidden" name="(部品の名前)" value="(送信される文字列)">
  • 実行ボタン「type="submit"」
<input type="submit" name="(部品の名前)" value="ボタンに表示される文字列">
textarea

複数行の入力フィールドを作成するときに使用します。

<textarea name="(部品の名前)" cols="(入力欄の幅)" rows="(入力欄の高さ)"></textarea>
select

セレクトボックスを作成するときに使用します。

<select name="(部品の名前)">
  <option value="送信されるデータ" selected>サンプル</option>
  <option value="送信されるデータ">サンプル</option>
  <option value="送信されるデータ">サンプル</option>
</select>

※selected：選択されている状態にする

label

フォーム部品とラベルを関連付けることで、文字の部分をクリックしても部品を選択できるようにします。

<label>〜フォームの部品〜</label>

<label for="(フォームの部品に付けたid名)">〜</label>

使用例

formの基本 - jsdo.it - share JavaScript, HTML5 and CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>formの基本</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容：<textarea name="subject" rows="5" cols="40">お問い合わせ内容</textarea></p>
<p>スマートフォン：
<label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
<label><input type="checkbox" name="mobile" value="2">Android</label>
<label><input type="checkbox" name="mobile" value="3">その他</label>
</p>
<p>性別：
<input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女性</label>
</p>
<p>言語：
<select name="language">
<option value="" selected>以下の言語を選択してください</option>
<option value="1">日本語</option>
<option value="2">英語</option>
<option value="3">フランス語</option>
<option value="4">スペイン語</option>
<option value="5">韓国語</option>
</select>
</p>
<p>パスワード：
<input type="password" name="password" size="10" maxlength="5">
</p>
<p>
<input type="file" name="picture">
</p>
<p>
<input type="hidden" name="user_id">
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

参考