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をクリック

こんな感じになります。

コメント