セクション7  テキスト

7-1 フォームの表示

文章アンケートをとったり、メールを送ったりするなど、入力フォームを作ることができます。
通常、フォーム内に<input type="submit" name="Submit" value="送信" />というボタンが一つあり、そのデータ内容を送信します。送信先として<form>タグ内のaction属性で、cgiやメールへの送信を指定します。
その他の付属の属性 例)cgiに送信するとき 例)メールに送信するとき
method="example" ethod="post" method="post"
action="example" action="/cgi-bin/mailforml.cgi" action="mailto:***@***.co.jp"など

サンプル ソースコード
お名前
サンプルなので送信できません
動作を確認しよう
  <form method="post" action="example"> お名前<input type="text" name="textfield"> <input type="submit" name="Submit" value="送信"> <input type="reset" name="reset"value="リセット"><br>
サンプルなので送信できません </form>

7-2 入力フォーム

テキストの入る”フィールド”をつくります。名前の記入をしてもらいたい時に使用します。
name="example"には半角英数字の変数を指定します (自分で考えた名前でよい)。
その他の付属の属性  
maxlength="example" テキストの入る最大文字数を指定できます
size="**" テキストの入る横幅を指定できます

サンプル ソースコード

お名前
動作を確認しよう
 
お名前<input name="textfield" type="text" size="30" maxlength="50">

7-3 複数行の入力フォーム

複数行のテキストの入る”フィールド”をつくります。用件を書き込んでもらいたい時に使用すると便利です。
name="example"には半角英数字の変数を指定します(自分で考えた名前でよい) タグの間にテキストを入れておくと初期値として表示されます。
その他の付属の属性  
row="**" 行数を指定します
col="**" 横、一行の文字数を指定します

サンプル ソースコード
動作を確認しよう
  <textarea name="textarea"cols="40" rows="5">
ご自由にご記入ください
</textarea>

7-4 選択肢(ラジオボタン)の作成

アンケートなどに使うラジオボタン(選択肢の中で1つだけ選択できる)を表示します。
name="example"には半角英数字の変数を指定します (自分で考えた名前でよい) 同じグループの選択肢には同じnameをつけておきます。 value="example"にはラジオボタンの選択肢を指定します。この値が実際に送信先に行くメッセージです。
その他の付属の属性  
checked 選択済みの初期値にする

サンプル ソースコード

好きな動物は? その他
動作を確認しよう
 
好きな動物は? <input name="radiobutton" type="radio" value="犬" checked="checked" /> <input name="radiobutton" type="radio" value="猫" /> <input name="radiobutton" type="radio" value="その他" /> その他

サンプル ソースコード
好きな動物は? その他
好きな鳥は? すずめ ハト その他
動作を確認しよう
  1. 二つ以上の項目でつくると
    フォームの材料はテーブルに入れても機能可能
  <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
好きな動物は?</td>
<td>
<input name="radiobutton1" type="radio" value="犬" checked="checked" /> </td>
<td>
<input name="radiobutton1" type="radio" value="猫" /> </td>
<td>
<input name="radiobutton1" type="radio" value="その他" /> その他</td>
</tr>
<tr>
<td>
好きな鳥は?</td>
<td>
<input name="radiobutton2" type="radio" value="すずめ" checked="checked" /> すずめ</td>
<td>
<input name="radiobutton2" type="radio" value="ハト" /> ハト</td>
<td>
<input name="radiobutton2" type="radio" value="その他" /> その他</td>
</tr>
</table>

7-5 選択肢(チェックボックス)の作成

アンケートなどに使うチェックボックス(選択肢の中で1つ以上選択できる)を表示します。
name="example"には半角英数字の変数を指定します(自分で考えた名前でよい) 同じグループの選択肢には同じnameをつけておきます。 value="example"にはチェックボックスの選択肢を指定します。この値が実際に送信先に行くメッセージです。
その他の付属の属性  
checked 選択済みの初期値にする

サンプル ソースコード

好きな食べ物は? りんご ぶどう その他
動作を確認しよう
 
好きな食べ物は?
<input name="check" type="checkbox" value="りんご"> りんご
<input name="check" type="checkbox" value="ぶどう"> ぶどう
<input name="check" type="checkbox" value="その他"> その他

7-6 メニューの表示

アンケートなどに使うプルダウン形式、リスト形式のメニューの表示
その他の付属の属性  
size="**" 表示行数を指定します(デフォルトは 1) プルダウン形式には"1"を指定 リスト形式は複数行を指定
<option value="example"> 送信の内容 <option>タグで囲んだテキストを表示し、value="example"の値を送信する
selected 最初から選択された状態にします

サンプル1 プルダウン ソースコード1 プルダウン

好きなラーメンは?
動作を確認しよう
 
好きなラーメンは?<br>
<select name="noodles" size="1">
<option value=
"0">選択してください</option>
<option value="1みそ">みそ</option>
<option value=
"2とんこつ">とんこつ</option>
<option value=
"3しょうゆ">しょうゆ</option>
<option value=
"4鶏がら">鶏がら</option>
</select>
サンプル1 リスト   ソースコード1 リスト
好きなラーメンは?
動作を確認しよう
  好きなラーメンは?<br />
<select name="noodles" size="3">
<option value=
"1みそ" selected>みそ</option>
<option value=
"2とんこつ">とんこつ</option>
<option value=
"3しょうゆ">しょうゆ</option>
<option value=
"4鶏がら">鶏がら</option>
<option value=
"5背あぶら">背あぶら</option>
<option value=
"6こがし醤油">こがし醤油</option>
<option value=
"7その他">その他</option>
</select>

7-7 フォームの材料とラベルの関連付け

項目名のテキストにラベルの関連付けをすると、項目名をクリックしても入力にフォーカスします。
その他の付属の属性  
input id="example" ラジオボタンやチェックボックスにfor="example"の値と同じものを記述して関連付けます

サンプル ソースコード

好きな動物は?
動作を確認しよう
  1. テキストを触ってもチェック可能
 
好きな動物は?
<input name="radiobutton" type="radio" value="犬" id="dog">
<label for="dog"></label>
<input name="radiobutton" type="radio" value="猫" id="cat"> <label for="cat"></label>
<input name=
"radiobutton" type="radio" value="その他" id="other">
<label for="other">その他</label>

7-8 フォームの材料のグループ化

姓や名前をグループ分けの表示をすることでユーザーにわかりやすいフォームを作れます。
その他の付属の属性  
input id="example" ラジオボタンやチェックボックスにfor="example"の値と同じものを記述して関連付けます

サンプル ソースコード

お客様情報(グループタイトル)


動作を確認しよう
  1. テキストを触ってもチェック可能
 
<fieldset>
<legend>
お客様情報(グループタイトル)</legend><br>
<input type="text" name="textfield" />
<input type="text" name="textfield" /><br>
</fieldset><br>
<input type="submit" name="Submit" value="送信" />