JavaScriptを使ってクッキングタイマーを作る
JavaScript でフォームデータを制御する場合、action や method の指定は不要です。簡単なJavaScriptを使って、クッキングタイマーを作る例をご紹介します。
このサンプルで使用している JavaScriptのイベントおよびタイマーは次の通りです。
TOPページ ＞ フォームを作成する
フォームを作成する
フォームを作成する
WEBサイトからアンケートや掲示板などメッセージの送信を行う際にはフォームを使用します。
実際にフォームでデータを扱う場合には CGI等の知識が必要になりますが、HTMLの内容を書き換えるだけで質問内容などを変更できるレンタルCGIなどのサービスを利用すれば、初心者の方でも簡単にお好みのフォームに仕上げることができます。
2006年04月04日
2006年02月08日
隠し項目を作成する
ホームページやブログなどのウェブサイトから フォームで送信するデータは、<input>タグや<textarea>などのテキスト入力欄、あるいは<select>タグによる選択メニューなどで表示しますが、送信したいデータのなかでも表示する必要のないものや、ユーザーに変更されたくない項目は見えない設定（非表示）にすることができます。
<input type="hidden" name="識別名" value="送信内容">
- 識別名：隠し項目にに識別名を付けます。送信されるデータは、『識別名=value属性で指定した値』となります。
- 送信内容：送信するデータを指定します。
サンプルです。
送信ボタンの代わりに画像を表示する
ホームページやブログなどのウェブサイトから、テキスト入力欄などのデータを CGI や JavaScript などのスクリプトに 送信するために 送信ボタンを使用しますが、このボタンは代わりに画像を使用することができます。
<input type="image" src="画像URL">
- 画像URL：ボタンの代わりに表示する画像ファイルのURLです。絶対パスまたは相対パスで指定できます。
サンプルです。
ファイル選択ボタンを作成する
ホームページやブログなどのウェブサイトで ファイルをアップロードしたり、送信したりする場合に便利な ファイル選択ボタンを作ることができます。ボタンを押すと、ファイルの選択ウィンドウが開き、ローカルなどに保存してあるファイルを選択できます。
<input type="file" name="識別名" value="初期表示文字">
- 識別名：テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=選択したファイルのパス名』となります。
- 初期表示文字：ファイル選択ボタンの左側に表示されるファイル入力欄に、最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
サンプルです。
パスワード入力欄を作成する
ホームページやブログなどのウェブサイトに、パスワード用のテキスト入力欄を作成します。普通のテキスト入力欄と異なり、入力した文字は『*****』や『●●●●●』などと表示されて見えなくなります。
<input type="password" name="識別名" value="初期表示文字" size="横幅" maxlength="最大入力文字数">
- 識別名：テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
- 入力欄の初期表示文字：テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
- 横幅：テキスト入力欄の横幅を、半角文字数で指定します。指定しなければ、ブラウザにお任せとなります。
- 最大入力文字数：テキスト入力欄に入力できる最大文字数を、指定します。最大入力文字数を制限する必要がなければ省略してかまわないでしょう。
サンプルです。
cgi スクリプトでフォームデータを制御する
ホームページやブログなどのウェブサイトで INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータは、cgi スクリプトで処理することができます。
簡単な cgi スクリプトを用意しました。下記のフォームを適当に書き換えて（そのままでも構いません）『送信』ボタンを押してみてください。別ウィンドウが開いて、送信内容が表示されます。
このスクリプトは下記のフォームから送信されたデータの、生データと、日本語のデータはそのままでは読めませんので 整形した状態のそれぞれについて表示するものです。
このフォームのソースは次のようになっています。
JavaScriptでフォームデータを制御する
JavaScriptでフォームデータを制御する場合、action や method の指定は不要です。簡単なサンプルをご紹介します。
掛け算のプログラムです。そのまま、あるいは 1つ目と 2つ目のテキスト入力欄の数値を入力して、『計算』ボタンを押してみてください。
このソースは、次のようになります。
2006年02月07日
フォームを作成する
ホームページやブログなどのウェブサイトから、INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータを CGI スクリプトにデータを渡したり、メールでデータを送信したりするためのフォームを作成します。
<form action="送信先" method="送信方法">
フォーム要素
</form>
- 送信先：送信先の CGIプログラムの URLや、メールアドレスを指定します。メールアドレスを指定すると直接送信されますが、日本語は文字がそのままでは読めない状態で送信されます。プロバイダによっては、日本語に復元してメール送信する CGIが用意されています。
また、お使いのメーラーによっては警告メッセージが表示され、上手く送信されない場合があります。
例１． cgiスクリプトにデータを送信する場合
<form action="/cgi-bin/test.cgi" method="post">～</form>
<form action="/cgi-bin/test.cgi" method="post">～</form>
例２．メールアドレスにデータを送信する場合
<form action="mailto:appelle@appelle.jp" method="post">～</form>
<form action="mailto:appelle@appelle.jp" method="post">～</form>
- 送信方法：送信形式を、『 get 』または『 post 』のいずれかで指定します。『 get 』では 255バイトまでしか送信できません。通常は、『 post 』を指定します。
- フォーム要素：フォームを構成する要素を指定します。<input>タグや<textarea>タグによるテキスト入力欄やボタン、<select>タグによる選択メニューなどを入れることができます。
サンプルです。
複数行入力可能なテキスト入力欄を作成する
<textarea>タグを使えば ホームページやブログなどのウェブサイトに、複数行の文書を入力できるテキスト入力欄を作成できます。
<textarea name="識別名" rows="行数" cols="横幅" wrap="改行データ送信方法">
初期表示文字
</textarea>
- 識別名：テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
- 行数：表示行数を指定します。
- 横幅：テキスト入力欄の横幅を、半角文字数で指定します。
- 改行データ送信方法：フォーム送信時の改行データの送信方法を指定します。下記から選択することができます。
off 改行コードはすべて省く soft 実際に改行されている部分のみ改行データを送信 hard 実際に改行されている部分と、画面上で改行されている部分に改行データを入れて送信 - 初期表示文字 テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
サンプルです。
ボタンを作成する
ホームページやブログなどのウェブサイトに、ボタンを作成します。このボタンは、JavaScript や VBScript を使って動作をコントロールするもので、ｈｔｍｌ からは制御できません。
<input type="button" name="識別名" value="表示文字">
- 識別名：ボタンに識別名を付けます。これは、主に JavaScript や VBScript で利用するために用意されています。
- 表示文字：ボタンに表示される文字を指定します。
サンプルです。
送信ボタンを作成する
ホームページやブログなどのウェブサイトに、送信ボタンを作成します。テキスト入力欄などのデータを CGI や JavaScript などのスクリプトに 送信するためのボタンです。
<input type="submit" value="表示文字">
- 表示文字：ボタン上に表示させる文字を指定します。指定しない場合は、『 クエリ送信 』などブラウザ設定の文字が自動的に表示されます。
サンプルです。
リセットボタンを作成する
ホームページやブログなどのウェブサイトに、リセットボタンを作成します。入力欄などを初期の状態に戻すためのボタンです。
<input type="reset" value="表示文字">
- 表示文字：ボタン上に表示させる文字を指定します。指定しない場合は、『 Reset 』などの文字が自動的に表示されます。
サンプルです。
選択メニューを作成する
ホームページやブログなどのウェブサイトに、選択メニューを作成します。プルダウン式で選択できるメニュー一覧です。この選択メニューは、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます。
<select name="識別名" 複数選択可能かどうか>
<option value="送信内容" 初期選択状態>表示文字 ･･･項目の数だけ繰返し
</select>
- 識別名：選択メニューに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
- 複数選択可能かどうか：複数選択可能とする場合は、ここに『 multiple 』と記述します。
- 送信内容：そのメニューが選択された状態で送信ボタンが押された際に、送信するデータを指定します。
- 初期選択状態：あらかじめ選択しておきたい項目がある場合は、ここに『 selected 』と記述します。指定しない場合は、一番上の項目が初期表示されます。
サンプルです。
ラジオボタンを作成する
ホームページやブログなどのウェブサイトに、チラジオボタンを作成します。ラジオボタンはチェックボックスと違い、name属性が同じラジオボタン内で選択できるのは、1項目だけです。このラジオボタンは、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます。
<input type="radio" name="識別名" value="送信内容" 初期チェック状態>
- 識別名：ラジオボタンに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
- 送信内容：そのボタンがチェックされた状態で送信ボタンが押された際に、送信するデータを指定します。
- 初期チェック状態：あらかじめチェックマークを表示しておきたい場合には、ここに『 checked 』と記述します。
サンプルです。
チェックボックスを作成する
ホームページやブログなどのウェブサイトに、チェックボックスを作成します。チェックボックスはラジオボタンと違い、複数チェックすることが可能です。このチェックボックスは、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます。
<input type="checkbox" name="識別名" value="送信内容" 初期チェック状態>
- 識別名：チェックボックスに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
- 送信内容：そのボックスがチェックされた状態で送信ボタンが押された際に、送信するデータを指定します。
- 初期チェック状態：あらかじめチェックマークを表示しておきたい場合には、ここに『 checked 』と記述します。
サンプルです。
テキスト入力欄を作成する
ホームページやブログなどのウェブサイトに、1行の文書を入力できるテキスト入力欄を作成します。入力された文字や文章は、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます。
<input type="text" name="識別名" value="初期表示文字" size="横幅" maxlength="最大入力文字数">
- 識別名：テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
- 入力欄の初期表示文字：テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
- 横幅：テキスト入力欄の横幅を、半角文字数で指定します。指定しなければ、ブラウザにお任せとなります。
- 最大入力文字数：テキスト入力欄に入力できる最大文字数を、指定します。最大入力文字数を制限する必要がなければ省略してかまわないでしょう。
サンプルです。
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら
クリックをお願いします。
当サイト掲載カテゴリは
コンピュータとインターネット > データ形式 > HTML > リファレンス
コンピュータとインターネット > データ形式 > HTML > リファレンス
- HTMLの基礎
- スタイルシート（CSS）の記述
- 簡単JavaScript
- 簡単Perl/CGI
- 色を指定する/カラー見本
- 記事の投稿
- テーブルを作成する
- フィルタ（特殊）効果で文字や画像を修飾する
- フォームを作成する
- リンクを貼る
-
文字を修飾する（書体、色、大きさなど...）
- 文字の大きさを指定する（FONTタグ）
- 文字の修飾方法を指定する
- 文字を点滅させる
- ルビ（ふりがな）の位置揃えを指定する
- ルビ（ふりがな）の表示位置を指定する
- 文字にルビ（ふりがな）を付ける
- 文章の一部にスタイルを適用する
- 文字を等幅文字にする
- 文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
- 文章の書体を指定する（スタイル指定）
- 文章の段落を指定する
- 文字をイタリック/斜体にする
- 文字の書体を指定する（専用タグ）
- 文字に下線をつける（アンダーライン）
- 文字を見え消しにする（取消線）
- 文字を強調する
- 文字の太さを指定する
- 文字を太字にする
- 上付き/下付き文字にする
- 文字の色を変える
- 文字を一段大きく/小さくする
- 文字の大きさを指定する（スタイル指定）
-
文章を修飾する（背景色、画像、枠など...）
- フィールド指定して文章を枠で囲む
- 文字や文章、画像の行揃えを指定する
- 文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
- 文章や文字、画像を囲む枠の種類を指定する
- 文字や文章、画像を囲む枠の色を指定する
- 文章や文字、画像を枠で囲む
- マージンとパディングの違い
- 余白を入れる（パディング）
- 余白を入れる（マージン）
- 改行する/改行を禁止する
- 文章の背景色、背景画像、配置方法をまとめて指定する
- 文字や文章、テーブルなどの背景画像の位置を指定する
- 文章の背景に画像を固定表示する
- 文章の背景に指定した画像を繰返し表示する
- 段落文章の横幅を指定する
- 文章の行間隔を指定する
- 文章の背景画像を指定する
- 文章の背景色を指定する
- 段落の表示（表示位置、表示/非表示など...）
- 水平線を表示する
- 特殊文字、その他
- 画像を表示する/動画/サウンド
- 箇条書きにする