HTML文書では、アンケートや掲示板のような書き込みのできる領域を入力フォームといいます。HTML入力フォーム内には、入力欄や選択肢の枠を作ることができます。
入力欄や選択肢にはいろいろな種類があるので、用途に応じて使い分けます。
入力欄や選択肢の枠を作る前に、入力フォームを作っておく必要があります。
→アンケートや掲示板のような、書き込みのできる入力フォームを作る
- 文字列を1行だけ入力する欄を作る−1行テキストボックス枠−
- 複数行の文字列を入力する欄を作る−複数行テキストボックス枠−
- パスワードを入力する欄を作る−パスワードタイプ−
- 一覧表示形式の選択肢を作る−選択ボックス枠−
- ボタン形式の選択肢を作る−オプションボタン枠−
- チェックボックスを作る−チェックボックス枠−
- プッシュボタンを作る−プッシュボタン枠−
- 画像ファイルを使ったボタンを作る−イメージボタン枠−
▼注意
- HTML入力フォ−ムは、一太郎上では動作しません。ブラウザ上で動作を確認してください。
- HTML入力フォームは、一太郎8以前のバージョンでは編集できません。
■文字列を1行だけ入力する欄を作る−1行テキストボックス枠−
■操作
- HTML入力フォ−ムの範囲内で、1行テキストボックス枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTML1行テキストボックス枠の作成]をクリックします。
HTML1行テキストボックス枠が作られます。
- 1行テキストボックス枠上で右クリックして表示されるメニューから、[HTML1行テキストボックスの変更]を選択します。
[HTML1行テキストボックスの変更]ダイアログボックスが表示されます。
- [名前]や[テキスト]などを設定します。
- [OK]をクリックします。
HTML1行テキストボックス枠に設定した内容が反映されます。
●こんなときは
- [HTML1行テキストボックスの変更]ダイアログボックスの[テキスト]に文字列を入力しておくと、その文字列があらかじめ入力された状態になります。
■複数行の文字列を入力する欄を作る−複数行テキストボックス枠−
■操作
- HTML入力フォ−ムの範囲内で、複数行テキストボックス枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTML複数行テキストボックス枠の作成]をクリックします。
HTML複数行テキストボックス枠が作られます。
- 複数行テキストボックス枠上で右クリックして表示されるメニューから、[HTML複数行テキストボックスの変更]を選択します。
[HTML複数行テキストボックスの変更]ダイアログボックスが表示されます。
- [名前]や[テキスト]などを設定します。
- [OK]をクリックします。
HTML複数行テキストボックス枠に設定した内容が反映されます。
■パスワードを入力する欄を作る−パスワードタイプ−
1行テキストボックス枠をパスワードタイプにすると、入力された文字は「*」で表示され、文字列を確認することはできません。
ブラウザで表示させたくない文字列を入力する欄を作りたいときに便利です。
■操作
- HTML入力フォ−ムの範囲内で、1行テキストボックス枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTML1行テキストボックス枠の作成]をクリックします。
HTML1行テキストボックス枠が作られます。
- 1行テキストボックス枠上で右クリックして表示されるメニューから、[HTML1行テキストボックスの変更]を選択します。
[HTML1行テキストボックスの変更]ダイアログボックスが表示されます。
- [名前]や[テキスト]などを設定します。
- [パスワードタイプ]をクリックして
にします。
- [OK]をクリックします。
HTML1行テキストボックス枠に設定した内容が反映され、入力した文字列が表示されない入力欄になります。
■一覧表示形式の選択肢を作る−選択ボックス枠−
■操作
- HTML入力フォ−ムの範囲内で、選択ボックス枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTML選択ボックス枠の作成]をクリックします。
HTML選択ボックス枠が作られます。
- 選択ボックス枠上で右クリックして表示されるメニューから、[HTML選択ボックスの変更]を選択します。
[HTML選択ボックスの変更]ダイアログボックスが表示されます。
- [追加]をクリックします。
- 選択肢にしたい項目の[名前]と[値]を設定します。
- [OK]をクリックします。
設定した選択肢が[HTML選択ボックスの変更]ダイアログボックスの[選択肢と値]一覧に表示されます。
- 操作4〜6 を繰り返し、複数の選択肢を設定します。
- [行数]を設定します。
[行数]を1に設定すると、ドロップダウン形式の一覧表示になります。
[行数]を2以上に設定すると、設定した行数分が、あらかじめ一覧表示されている形式になります。 - [OK]をクリックします。
選択ボックスに設定した内容が反映されます。
●こんなときは
- 設定した選択肢を変えたい場合は、[HTML選択ボックスの変更]ダイアログボックスで一覧表示されている選択肢のうち、変えたいものを選択して[変更]をクリックします。[選択肢の変更]ダイアログボックスで変えたい選択肢の[名前]と[値]を入力し、上記操作6 以降を行います。
■ボタン形式の選択肢を作る−オプションボタン枠−
■操作
- HTML入力フォ−ムの範囲内で、オプションボタン枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTMLオプションボタン枠の作成]をクリックします。
HTMLオプションボタン枠が作られます。
- オプションボタン枠上で右クリックして表示されるメニューから、[HTMLオプションボタンの変更]を選択します。
[HTMLオプションボタンの変更]ダイアログボックスが表示されます。
- [名前]や[値]などを設定します。
- [OK]をクリックします。
HTMLオプションボタン枠に設定した内容が反映されます。
- 操作1〜5 を繰り返して、必要な数のオプションボタンを作ります。
●こんなときは
- 同じグル−プとして扱いたいオプションボタンは、[HTMLオプションボタンの変更]ダイアログボックスで、[名前]を同じものに設定します。
■チェックボックスを作る−チェックボックス枠−
■操作
- HTML入力フォ−ムの範囲内で、チェックボックスを作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTMLチェックボックス枠の作成]をクリックします。
HTMLチェックボックス枠が作られます。
- チェックボックス枠上で右クリックして表示されるメニューから、[HTMLチェックボックスの変更]を選択します。
[HTMLチェックボックスの変更]ダイアログボックスが表示されます。
- [名前]や[値]などを設定します。
- [OK]をクリックします。
HTMLチェックボックス枠に設定した内容が反映されます。
■プッシュボタンを作る−プッシュボタン枠−
※このボタンは「送信」「リセット」などのボタンによく使われるため、「送信」「リセット」ボタンとして2つセットで作られます。ボタンを1つだけ作りたい場合は、できたボタンの1つを削除してください。
■操作
- HTML入力フォ−ムの範囲内で、プッシュボタン枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTMLプッシュボタン枠の作成]をクリックします。
送信ボタンとリセットボタンが作られます。
【送信ボタンとリセットボタンを作る場合】
- プッシュボタン枠上で右クリックして表示されるメニューから、[HTMLプッシュボタンの変更]を選択します。
[HTMLプッシュボタンの変更]ダイアログボックスが表示されます。
- [名前]を入力します。
- [値]には、ボタンに表示する文字列やサーバーに送信するデータを入力します。
- [OK]をクリックします。
プッシュボタンに設定した内容が反映されます。
ボタンのラベルには、[値]に入力した文字列が表示されます。
【ファイル名を入力する欄と、ファイルを選択するダイアログボックスを表示するボタンを作る場合】
- 作られた2つのプッシュボタンのうちの一方をクリックして選択し、Deleteキーを押します。
選択したプッシュボタン枠が削除されます。
- 残ったプッシュボタン枠上で右クリックして表示されるメニューから、[HTMLプッシュボタンの変更]を選択します。
[HTMLプッシュボタンの変更]ダイアログボックスが表示されます。
- [名前]を入力します。
- [値]に、あらかじめ表示しておきたいファイル名があれば入力します。
- [種類]の右端の
をクリックして、[ファイル選択]を選択します。
- [OK]をクリックします。
プッシュボタンに設定した内容が反映されます。
ボタンのラベルには、[ファイル選択]などの文字列(ブラウザによって表示される文字列は異なります)が表示され、ボタンの横にファイル名を入力する欄が作られます。※この欄は一太郎上では表示されません。
【上記以外のボタンを作る場合】
- プッシュボタン枠上で右クリックして表示されるメニューから、[HTMLプッシュボタンの変更]を選択します。
[HTMLプッシュボタンの変更]ダイアログボックスが表示されます。
- [名前]を入力します。
- [値]に、ボタンに表示する文字列やサーバーに送信するデータを入力します。
- [種類]の右端の
をクリックして、[一般]を選択します。
- [OK]をクリックします。
プッシュボタンに設定した内容が反映されます。
ボタンのラベルには、[値]に入力した文字列が表示されます。
■画像ファイルを使ったボタンを作る−イメージボタン枠−
■操作
- HTML入力フォ−ムの範囲内で、イメージボタン枠を作りたい位置にカーソルを合わせます。
- [HTML]ツールボックスの
[HTMLイメ−ジボタン枠の作成]をクリックします。
[HTMLイメージボタン枠の作成]ダイアログボックスが表示されます。
- [場所]の右端の
をクリックして、画像ファイルが存在するドライブ・フォルダを選択します。
- ファイルの一覧から、ボタンにしたい画像ファイルを選択します。
- [枠の基準]と[枠のまわりの余白]を設定します。
- [OK]をクリックします。
選択した画像ファイルのボタンが作られます。
●こんなときは
- 作ったイメージボタンを変えたい場合は、イメージボタン枠上で右クリックして表示されるメニューから、[HTMLイメージボタンの変更]を選択します。