MB-Support

パソコン初心者のサポートページ

8.送信ボタンの作成 submit reset

 フォームに入力された情報を実際に送るためのトリガーとなるのが「送信」ボタンです。


前回までのフォームの作り方で説明した内容で、クライアントに情報を入力してもらうフォームは自由に設置できると思います。 さて、それらのフォームに入力された情報を実際に送るためのトリガーとなるのが「送信」ボタンです。 ボタンを設置するには input type で submit を指定します。


・ソース

<input type="submit">

・実際の表示

実際には、送信する情報を入力するフィールド(テキストやプルダウン形式のメニューなど)と一緒に <form></form> で囲む必要があるので、ソースは以下の様になります。

・ソース

<form method="URL" action="POST">
お名前:<input type="text" name="name" size="45">
<input type="submit">
</form>

・実際の表示


ボタンを左クリックすれば、form の method で指定したアドレスに action で指定した方法で、form 内のフィールドに入力された全ての情報を転送する事ができます。 つまり、form 内に複数のテキストフィールドやプルダウンメニュー、ラジオボタンが設置されていても、ボタン1つで全ての情報を転送できます。



reset

・ソース

<input type="reset">

・実際の表示

typereset を記述すると、入力した情報をボタン一つで入力前の状態に戻す事ができます。

<form method="" action="">
コメント入力欄:<br />
<textarea name="A" cols="B" rows="C"></textarea>
<br />
<input type="reset">
</form>

テキストフィールドに何か入力して「リセット」ボタンを押してみましょう!


value

・ソース

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

・実際の表示

value に文字を入力すると、ボタンに表示されます。全角スペースでボタンの幅を変更できます。

・ソース

<input type="submit" value="     MB-Support     ">

・実際の表示


送信ボタンに画像を使う方法

・ソース

<input type="image" src="画像のアドレス" alt="投稿" value="投稿">

・実際の表示


typeimage を指定して、src に画像のアドレスを指定する事で、ボタンを画像に変更する事ができます。 上の例では MB-Support のバナーを使いましたが、これでも送信ボタンとして機能します(分かり難いですが)。 ボタンに利用する画像は、画像ソフトなどで制作しましょう!




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項