自分用CSSメモ③

#フォーム関連のタグ
-　入力されたデータそ送信するために必要なURLなどの設定情報を指定する<form>タグ
-　閲覧者が操作できるコントロールを表示するためのタグ
<input>,<textarea>,<select>タグ

####<input>タグはtype属性の値によって様々なコントロールを表示可能
ex.
<input type="text">=>

また、すべてのコントロールはname属性を持つ。

#<form>タグ
<form>タグはフォーム領域を作成すると同時に、入力された内容を送信する先のURLを指定する役割を果たす。

method属性 => HTTPメソッドの種類？　要出典
action属性 => 送信先URL

#プルダウンメニュー
プルダウンメニューは<select name="hoge">タグと<option value="hoge">タグを組み合わせる。
<select name="hoge">の子要素としては、選択肢の数だけ<option value="hoge">を含める。
それぞれname,value属性は必須

contact.html

<div>
      <select name="kind">
        <option value="reservation">パーティの予約について</option>
        <option value="contact">一般的な問い合わせ</option>
      </select>
    </div>

#ラジオボタン
同じ質問に対する選択肢は同じname属性にしておくことが必要
value属性は必須
片方にはchecked属性を追加してある。これはデフォルトの値を指定するため。

contact.html

<div>
      はじめてのお問い合わせですか？<br>
      <input type="radio" name="first" value="yes" checked>はい
      <input type="radio" name="first" value="no">いいえ
    </div>

#チェックボックス
同じ質問に対する選択肢は同じname属性にしておくことが必要。
value属性は必須。

contact.html

<div>
      当カフェをお知りになったきっかけは?<br>
      <input type="checkbox" name="how" value="friends">知り合いの紹介で
      <input type="checkbox" name="how" value="magazine">雑誌・Webサイトで見て
    </div>

#テキストフィールド
改行はできない。

contact.html

<div>
      お問い合わせの件名<br>
      <input type="text" name="subject" value="お問い合わせ">
</div>

#テキストエリア
複数行の入力が可能。
name属性は必須だが、value属性は存在しない。
デフォルトの値を入れておきたい時は
<textarea name="hoge">デフォルト値</textarea>とする。

contact.html

<div>
      お問い合わせの具体的な内容<br>
      <textarea name="message"></textarea>
</div>

#送信ボタン

contact.html

<input type="submit" id="title" name="submit" value="送信">

#ラベル
<label>タグとコントロールを関連付けるには2つの記述法がある。

####1.for属性とid属性に同じ値をつける
プルダウンメニューにラベルを付加する

<label>タグのfor属性には関連するコントロールのid属性と同じものをつける。ただし、<label>タグでコントロールを囲むときはfor属性はつけない。

####2.コントロールやラベルのテキストごと<label>タグで囲む
どのコントロールとも関連づいていない<label>タグを記述することも可能。

contact.html

<div>
      <label>当カフェをお知りになったきっかけは?</label><br> /* どのコントロールとも関連付けられていない */
      <label><input type="checkbox" name="how" value="friends">知り合いの紹介で</label>
      <label><input type="checkbox" name="how" value="magazine">雑誌・Webサイトで見て</label>
    </div>
    <div>
      <label>お問い合わせの件名<br> /* テキストフィールドと関連づいている */
      <input type="text" name="subject" value="お問い合わせ">
      </label>
    </div>

#属性セレクタ
タグの属性や値を判断する。
input[name=subject] =><input>のうちname属性値が"subject"の要素にマッチする。つまり、以下の部分

contact.html

<div>
      <label>お問い合わせの件名<br>
      <input type="text" name="subject" value="お問い合わせ">
      </label>
    </div>

input[type=submit]　=><input>のうちtype属性が"submit"の要素、すなわち送信ボタンにマッチする。

style.css

/* contact.html */
form div {
  padding: 12px;
  border-bottom: 1px dashed #d6c2b5;
}
select{
  width: 30em;
}
label {
  color: #442220;
}
input[name=subject] {
  width: 30em;
}
textarea {
  width: 30em;
  height: 6em;
}
input[type=submit] {
  margin: 20px 12px;
  width: 30em;
}