BlueGriffon で簡単な お問い合わせフォーム の作り方を紹介します。
目次
BlueGriffonを起動
「新規作成」をクリック

「Dual View」をクリック

「index.html」で保存
CSSの作成
「パネル」「スタイルシート」をクリック

スタイルシートを追加(+)をクリック

「文書からリンクする」「新しいファイル」をクリック

index.htmlと同じフォルダにstyle.cssで保存
<form>で入力フォームを作る
「挿入」「フォーム」「フォーム」をクリック

「URL:confirm.php」「POST」を選択して「OK」をクリック


<label>タグで関連付け
<label>タグとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。
「挿入」「フォーム」「ラベル」をクリック

「コントロールのID:name」を入力して「OK」をクリック

「挿入」「フォーム」「入力」「文字入力」をクリック

「名前:お名前」と入力し「OK」をクリック

<input>へCSS(スタイルシート)を指定するには、id属性を使います。
<input>へ名前を付け、スタイルシートを指定します。
<input>をクリック

<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「大きさ」「幅:700px」「高さ:25px」と入力し「Please enter an ID」に「name」と入力してokクリック

メールアドレスの設定
メールアドレスも同様に設定します。
「挿入」「フォーム」「ラベル」をクリック

「コントロールのID:mail」を入力して「OK」をクリック
「挿入」「フォーム」「入力」「メールアドレス」をクリック

「名前:メールアドレス」と入力し「OK」をクリックします。

<input>へ名前を付け、スタイルシートを指定します。
<input>をクリック

<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「大きさ」「幅:700px」「高さ:25px」と入力し「Please enter an ID」に「mail」と入力してokをクリック
「お問い合わせ内容」の設定
「挿入」「フォーム」「ラベル」をクリック

「コントロールのID:text」を入力して「OK」をクリック
「挿入」「フォーム」「文字入力」をクリック

「名前:お問い合わせ内容」と入力し「OK」をクリック

<textarea>へ名前を付け、スタイルシートを指定します。
<textarea> をクリック

<textarea> を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「大きさ」「幅:700px」「高さ:100px」と入力し「Please enter an ID」に「text」と入力してokをクリック

「入力内容確認」の設定
「挿入」「フォーム」「入力」「送信ボタン」をクリック

<input>へ名前を付け、スタイルシートを指定します。
<input>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「大きさ」「幅:300px」「高さ:30px」と入力し「Please enter an ID」に「submit」と入力してokをクリック

こんな感じになります。


ホームページの作り方 無料
- 無料のホームページ作成ソフトBlueGriffonのダウンロードとインストールの方法
- BlueGriffon で ホームページを作成 する レイアウト
- BlueGriffon で ホームページを作成 サイドバー
- BlueGriffon で ホームページを作成 フッター
- CSS の編集に Visual Studio Code 使っています。
- ホームページ 公開方法
- BlueGriffon で簡単な お問い合わせフォーム の作り方
- BlueGriffon でログインフォームの作り方
- htmlで数字付き箇条書き
- ホームページビルダーをいじってます。
