LoginSignup
2

More than 5 years have passed since last update.

自分用CSSメモ③

Posted at

フォーム関連のタグ

- 入力されたデータそ送信するために必要な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;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2