HTML5/CSS3　フォームの書き方

<h3>「お問い合わせ」ページを作成する<br>
フォーム領域を作成する<br>
コントロールを追加する<br>
設問ごとのマージンを調整する<br>
コントロールのスタイルを調整する</h3>
<h4>☆HTML5</h4>

```html: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属性のときの書き方

```html: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
　　　　　　　　　<!-- input type="......." name="......" value="......" のtypeに代入します。 -->




<h4>☆CSS3</h4>
設問ごとのマージンを調整する方法

```css: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」ページ ここまで↑ */
...
```


```css:base-form.css
input[required] {
       background-color: #f3c8c1;
}
```

☆属性セレクターE[a$="b"]でマッチする要素の例

```html: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> */
```


```css: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属性を書き足す

```html: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>
```