文章アンケートをとったり、メールを送ったりするなど、入力フォームを作ることができます。 通常、フォーム内に<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> |
テキストの入る”フィールド”をつくります。名前の記入をしてもらいたい時に使用します。 name="example"には半角英数字の変数を指定します (自分で考えた名前でよい)。 |
その他の付属の属性 | |
maxlength="example" | テキストの入る最大文字数を指定できます |
size="**" | テキストの入る横幅を指定できます |
サンプル | ソースコード | |
お名前 動作を確認しよう |
お名前<input name="textfield" type="text" size="30" maxlength="50"> |
複数行のテキストの入る”フィールド”をつくります。用件を書き込んでもらいたい時に使用すると便利です。 name="example"には半角英数字の変数を指定します(自分で考えた名前でよい) タグの間にテキストを入れておくと初期値として表示されます。 |
その他の付属の属性 | |
row="**" | 行数を指定します |
col="**" | 横、一行の文字数を指定します |
サンプル | ソースコード | |
動作を確認しよう |
<textarea name="textarea"cols="40" rows="5"> ご自由にご記入ください </textarea> |
アンケートなどに使うラジオボタン(選択肢の中で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="その他" /> その他 |
サンプル | ソースコード | ||||||||||
動作を確認しよう
|
<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> |
アンケートなどに使うチェックボックス(選択肢の中で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="その他"> その他 |
アンケートなどに使うプルダウン形式、リスト形式のメニューの表示 |
その他の付属の属性 | |
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> |
項目名のテキストにラベルの関連付けをすると、項目名をクリックしても入力にフォーカスします。 |
その他の付属の属性 | |
input id="example" | ラジオボタンやチェックボックスにfor="example"の値と同じものを記述して関連付けます |
サンプル | ソースコード | ||
好きな動物は? 動作を確認しよう
|
好きな動物は? <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> |
姓や名前をグループ分けの表示をすることでユーザーにわかりやすいフォームを作れます。 |
その他の付属の属性 | |
input id="example" | ラジオボタンやチェックボックスにfor="example"の値と同じものを記述して関連付けます |
サンプル | ソースコード | ||
動作を確認しよう
|
<fieldset> <legend>お客様情報(グループタイトル)</legend><br> 姓 <input type="text" name="textfield" /> 名 <input type="text" name="textfield" /><br> </fieldset><br> <input type="submit" name="Submit" value="送信" /> |
©2006 WEB DESIGN STUDIO Powered by VISUAL LITERACY |