「お問い合わせ」ページを作成する
フォーム領域を作成する
コントロールを追加する
設問ごとのマージンを調整する
コントロールのスタイルを調整する
☆HTML5
base-form.html
...
<article>
<h1>......</h1>
<p>......</p>
<ul>
<li>......</li>
<li>......</li>
</ul> <!-- この場合liにはプライバシーポリシー等を記載する -->
<form action="#"> <!-- urlが未定の時は「#」にする。 -->
<p><label>.......(必須)<br>
<input type="text" name="name" required></label></p> /* (必須)の場合は、requiredを書きこむ */
<p><label>......(必須)<br>
<input type="email" name="mail" required></label></p>
<p>......<br>
<label><input type="radio" name="kind" value="0">......</label> <label><input type="radio" name="kind" value="1">......</label></p>
<p><label>......<br>
<textarea name="comment"></textarea></label></p>
<p><input type="submit" value="確認する"></p>
</form>
</article>
...
☆他のtype属性のときの書き方
base-form.html
<!-- 電話番号を入力するためのテキストフィールド -->
<input type="tel" name="コントロールの名前">
<!-- チェックボックス -->
<input type="checkbox" name="check" value="1">チェック１<input type="checkbox" name="check" value="2">チェック２
<!-- プルダウンメニューとリストボックス -->
<select name="multi" multiple>
<option vlue="">チケットを選択してください</option>
<option vlue="s">Ｓ席</option>
<option vlue="a">Ａ席</option>
<option vlue="c">Ｃ席</option>
</select>
inputタグのtype属性には、次のものがあります。
text、email、tel、radio、checkbox、submit、image
☆CSS3
設問ごとのマージンを調整する方法base-form.css
...
/* 「form」ページ ここから↓ */
form p {
margin-top: 0;
margin-bottom: ...px;
}
form p:nth-last-child(2) {
margin-bottom: ...px;
}
form p:last-child {
margin-bottom: 0;
}
/* テキストフィールド幅を指定する。ここから↓ */
input[type="text"] {
width: ...px;
}
input[type="email"] {
width: ...px;
}
/* テキストフィールド幅を指定する。ここまで↑ */
/* テキストエリアの幅と高さを大きくする ここから↓ */
textarea {
width: ...px;
height: ...px;
overflow-y: scroll;
}
/* テキストエリアの幅と高さを大きくする ここまで↑ */
/* 「form」ページ ここまで↑ */
...
base-form.css
input[required] {
background-color: #f3c8c1;
}
☆属性セレクターE[a$="b"]でマッチする要素の例
base-form.html
a[href$=".pdf"] → /* HTML <a href="download.pdf>"PDFファイルのダウンロード (PDF/450KB)></a> */
a[href$=".zip"] → /* HTML <a href="archive.zip>"ZIPファイルのダウンロード (ZIP/1.5MB)></a> */
base-form.css
a[href$=".pdf"] {
padding-right: 18px;
background-image: url(icon-pdf.png);
background-position: right center;
background-repeat: no-repeat;
}
a[href$=".zip"] {
padding-right: 18px;
background-image: url(icon-zip.png);
background-position: right center;
background-repeat: no-repeat;
}
☆属性セレクターには次のようなものがあります。
E[a] 要素Ｅに属性aが付いているときにマッチ
E[a-""b] 要素Ｅの属性aの値がbのときにマッチ
E[a~="b"] 要素Ｅの属性aに半角スペースで区切られた値が複数指定されているときに、そのうちの１つがbであるときにマッチ
E[a^="b"] 要素Ｅの属性aの値がbで始まる時にマッチ
E[a$="b"] 要素Ｅの属性aの値が
E[a*="b"] 要素Ｅ 属性a
E[a|="b"] 要素Ｅ 属性a
☆オールオーバーでヘルプチップを表示する方法
title属性を書き足す
base-form.html
<ul>
<li><a href="#" title="ヘルプチップ"> データ名(PDF/...KB)</a></li>
<li><a href="#" title="......"> ......(ZIP/...1.5MB)</a></li>
<li><a href="#" title="......"> ......(MPEG/...15MB)</a></li>
</ul>