TOPページ > フォームを作成する
フォームを作成する

フォームを作成する

WEBサイトからアンケートや掲示板などメッセージの送信を行う際にはフォームを使用します。

実際にフォームでデータを扱う場合には CGI等の知識が必要になりますが、HTMLの内容を書き換えるだけで質問内容などを変更できるレンタルCGIなどのサービスを利用すれば、初心者の方でも簡単にお好みのフォームに仕上げることができます。

フォームを作成する 項目一覧

JavaScript でフォームデータを制御する場合、action や method の指定は不要です。簡単なJavaScriptを使って、クッキングタイマーを...

ホームページやブログなどのウェブサイトから フォームで送信するデータは、<input>タグや<textarea>などのテキスト入力欄、...

ホームページやブログなどのウェブサイトから、テキスト入力欄などのデータを CGI や JavaScript などのスクリプトに 送信するために 送信ボタンを使...

ホームページやブログなどのウェブサイトで ファイルをアップロードしたり、送信したりする場合に便利な ファイル選択ボタンを作ることができます。ボタンを押すと、フ...

ホームページやブログなどのウェブサイトに、パスワード用のテキスト入力欄を作成します。普通のテキスト入力欄と異なり、入力した文字は『*****』や『●●●●●』...

ホームページやブログなどのウェブサイトで INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータは、cgi スクリプトで処理することが...

JavaScriptでフォームデータを制御する場合、action や method の指定は不要です。簡単なサンプルをご紹介します。 function cluc...

ホームページやブログなどのウェブサイトから、INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータを CGI スクリプトにデータを渡し...

<textarea>タグを使えば ホームページやブログなどのウェブサイトに、複数行の文書を入力できるテキスト入力欄を作成できます。 <tex...

ホームページやブログなどのウェブサイトに、ボタンを作成します。このボタンは、JavaScript や VBScript を使って動作をコントロールするもので、h...

ホームページやブログなどのウェブサイトに、送信ボタンを作成します。テキスト入力欄などのデータを CGI や JavaScript などのスクリプトに 送信する...

ホームページやブログなどのウェブサイトに、リセットボタンを作成します。入力欄などを初期の状態に戻すためのボタンです。 <input type="...

ホームページやブログなどのウェブサイトに、選択メニューを作成します。プルダウン式で選択できるメニュー一覧です。この選択メニューは、CGI やJavaScrip...

ホームページやブログなどのウェブサイトに、チラジオボタンを作成します。ラジオボタンはチェックボックスと違い、name属性が同じラジオボタン内で選択できるのは、...

ホームページやブログなどのウェブサイトに、チェックボックスを作成します。チェックボックスはラジオボタンと違い、複数チェックすることが可能です。このチェックボッ...

ホームページやブログなどのウェブサイトに、1行の文書を入力できるテキスト入力欄を作成します。入力された文字や文章は、CGI やJavaScript などのスク...

2006年04月04日

JavaScript でフォームデータを制御する場合、action や method の指定は不要です。簡単なJavaScriptを使って、クッキングタイマーを作る例をご紹介します。

min sec
JavaScript CookingTimer
時間(分)を入力して Startボタンを押してください

このサンプルで使用している JavaScriptのイベントおよびタイマーは次の通りです。

続きを読む "JavaScriptを使ってクッキングタイマーを作る" »

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="最大入力文字数">
  1. 識別名:テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
  2. 入力欄の初期表示文字:テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
  3. 横幅:テキスト入力欄の横幅を、半角文字数で指定します。指定しなければ、ブラウザにお任せとなります。
  4. 最大入力文字数:テキスト入力欄に入力できる最大文字数を、指定します。最大入力文字数を制限する必要がなければ省略してかまわないでしょう。

サンプルです。

続きを読む "パスワード入力欄を作成する" »

ホームページやブログなどのウェブサイトで INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータは、cgi スクリプトで処理することができます。

簡単な cgi スクリプトを用意しました。下記のフォームを適当に書き換えて(そのままでも構いません)『送信』ボタンを押してみてください。別ウィンドウが開いて、送信内容が表示されます。

このスクリプトは下記のフォームから送信されたデータの、生データと、日本語のデータはそのままでは読めませんので 整形した状態のそれぞれについて表示するものです。

Q1.好きな色は、何ですか?




Q2.お住まいは、どこですか?


Q3.コメントをどうぞ。

このフォームのソースは次のようになっています。

続きを読む "cgi スクリプトでフォームデータを制御する" »

JavaScriptでフォームデータを制御する場合、action や method の指定は不要です。簡単なサンプルをご紹介します。

掛け算のプログラムです。そのまま、あるいは 1つ目と 2つ目のテキスト入力欄の数値を入力して、『計算』ボタンを押してみてください。

x =  

このソースは、次のようになります。

続きを読む "JavaScriptでフォームデータを制御する" »

2006年02月07日

ホームページやブログなどのウェブサイトから、INPUT、SELECT、TEXTAREA などのフォーム要素に入力されたデータを CGI スクリプトにデータを渡したり、メールでデータを送信したりするためのフォームを作成します

<form action="送信先" method="送信方法">
フォーム要素
</form>
  1. 送信先:送信先の CGIプログラムの URLや、メールアドレスを指定します。メールアドレスを指定すると直接送信されますが、日本語は文字がそのままでは読めない状態で送信されます。プロバイダによっては、日本語に復元してメール送信する CGIが用意されています。

    また、お使いのメーラーによっては警告メッセージが表示され、上手く送信されない場合があります。

例1. cgiスクリプトにデータを送信する場合
<form action="/cgi-bin/test.cgi" method="post"></form>
例2.メールアドレスにデータを送信する場合
<form action="mailto:appelle@appelle.jp" method="post"></form>
  1. 送信方法:送信形式を、『 get 』または『 post 』のいずれかで指定します。『 get 』では 255バイトまでしか送信できません。通常は、『 post 』を指定します。
  2. フォーム要素:フォームを構成する要素を指定します。<input>タグや<textarea>タグによるテキスト入力欄やボタン、<select>タグによる選択メニューなどを入れることができます。

サンプルです。

続きを読む "フォームを作成する" »

<textarea>タグを使えば ホームページやブログなどのウェブサイトに、複数行の文書を入力できるテキスト入力欄を作成できます。

<textarea name="識別名" rows="行数" cols="横幅" wrap="改行データ送信方法">
初期表示文字
</textarea>
  1. 識別名:テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
  2. 行数:表示行数を指定します。
  3. 横幅:テキスト入力欄の横幅を、半角文字数で指定します。
  4. 改行データ送信方法:フォーム送信時の改行データの送信方法を指定します。下記から選択することができます。
    off改行コードはすべて省く
    soft実際に改行されている部分のみ改行データを送信
    hard実際に改行されている部分と、画面上で改行されている部分に改行データを入れて送信
  5. 初期表示文字 テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。

サンプルです。

続きを読む "複数行入力可能なテキスト入力欄を作成する" »

ホームページやブログなどのウェブサイトに、ボタンを作成します。このボタンは、JavaScript や VBScript を使って動作をコントロールするもので、html からは制御できません

<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>
  1. 識別名:選択メニューに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
  2. 複数選択可能かどうか:複数選択可能とする場合は、ここに『 multiple 』と記述します。
  3. 送信内容:そのメニューが選択された状態で送信ボタンが押された際に、送信するデータを指定します。
  4. 初期選択状態:あらかじめ選択しておきたい項目がある場合は、ここに『 selected 』と記述します。指定しない場合は、一番上の項目が初期表示されます。

サンプルです。

続きを読む "選択メニューを作成する" »

ホームページやブログなどのウェブサイトに、チラジオボタンを作成します。ラジオボタンはチェックボックスと違い、name属性が同じラジオボタン内で選択できるのは、1項目だけです。このラジオボタンは、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます

<input type="radio" name="識別名" value="送信内容" 初期チェック状態>
  1. 識別名:ラジオボタンに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
  2. 送信内容:そのボタンがチェックされた状態で送信ボタンが押された際に、送信するデータを指定します。
  3. 初期チェック状態:あらかじめチェックマークを表示しておきたい場合には、ここに『 checked 』と記述します。

サンプルです。

続きを読む "ラジオボタンを作成する" »

ホームページやブログなどのウェブサイトに、チェックボックスを作成します。チェックボックスはラジオボタンと違い、複数チェックすることが可能です。このチェックボックスは、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます

<input type="checkbox" name="識別名" value="送信内容" 初期チェック状態>
  1. 識別名:チェックボックスに識別名を付けます。送信されるデータは、『識別名=送信内容で指定した値』となります。
  2. 送信内容:そのボックスがチェックされた状態で送信ボタンが押された際に、送信するデータを指定します。
  3. 初期チェック状態:あらかじめチェックマークを表示しておきたい場合には、ここに『 checked 』と記述します。

サンプルです。

続きを読む "チェックボックスを作成する" »

ホームページやブログなどのウェブサイトに、1行の文書を入力できるテキスト入力欄を作成します。入力された文字や文章は、CGI やJavaScript などのスクリプトで処理すれば いろいろの目的に使うことができます。

<input type="text" name="識別名" value="初期表示文字" size="横幅" maxlength="最大入力文字数">
  1. 識別名:テキスト入力欄に識別名を付けます。送信されるデータは、『識別名=入力文字』となります。
  2. 入力欄の初期表示文字:テキスト入力欄に最初から表示しておく文字を指定します。必要がなければ省略してかまわないでしょう。
  3. 横幅:テキスト入力欄の横幅を、半角文字数で指定します。指定しなければ、ブラウザにお任せとなります。
  4. 最大入力文字数:テキスト入力欄に入力できる最大文字数を、指定します。最大入力文字数を制限する必要がなければ省略してかまわないでしょう。

サンプルです。

続きを読む "テキスト入力欄を作成する" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス