HTMLでのフォームのサンプルです．

目次

  1. formタグ
    1. 例
  2. パーツ
    1. 1行テキスト入力欄
    2. メッセージ入力欄
    3. 送信ボタン
    4. ラジオボタン
    5. チェックボックス
    6. セレクトボックス

formタグ

<form action="送信先" method="転送方法" name="名前">
	パーツ
</form>
  • action属性の値：例えば，contact-form.phpなど
  • method属性の値：getやpost

例

値１を入力してください 値２を入力してください

※これはサンプルのため，特に何かactionするわけではありません．

<form action="./cgi-bin/test.py" method="post">
    値１を入力してください
    <input type="text" name="value1">
    値２を入力してください
    <input type="text" name="value2">
    <input type="submit" name="submit" value="送信">
</form>

適当な例ですが，渡された情報は755のパーミッションにしたtest.py側で，

import cgi
print("Content-Type: text/html")
form = cgi.FieldStorage()
print(form["value1"].value)
print(form["value2"].value)

のようにして利用します．

パーツ

1行テキスト入力欄

<input type="text" placeholder="入力欄に表示しておく文字列">

type属性の値はtext以外もある．

  • email：メールアドレス
  • tel：電話番号
  • url：URL
  • search：検索時のテキスト

メッセージ入力欄

<textarea placeholder="入力欄に表示しておく文字列" cols="20" rows="5"></textarea>

送信ボタン

<input type="submit" value="ボタンに表示される文字列">

ラジオボタン

<input type="radio" name="名前" value="送信される値1"> 選択肢として表示されるテキスト1
<input type="radio" name="名前" value="送信される値2" checked> 選択肢として表示されるテキスト2

例えば，以下の通り．

ラジオボタン1
ラジオボタン2

<input type="radio" name="NAME" value="YES">ラジオボタン1
<input type="radio" name="NAME" value="NO" checked>ラジオボタン2
  • checkedでデフォルトを指定できる．
  • checkedをdisabledにすると，選べないボタンにすることができる．

チェックボックス

チェックボックス1
チェックボックス2
チェックボックス3

<input type="checkbox" name="NAME" value="v1">チェックボックス1
<input type="checkbox" name="NAME" value="v2" checked>チェックボックス2
<input type="checkbox" name="NAME" value="v3">チェックボックス3

セレクトボックス

<select name="color" size="1">
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
  • selectタグのsize属性で表示行数を決めます．
  • optionタグのselected属性でデフォルトを指定できます．