form の内側の囲み方



0   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
797のご質問での p についてのお答えを拝見して 以前かすかに疑問に感じながら
そのままにしていたことを思い出しました。
検索窓などを p で囲むのも 正しい方法ではないのでしょうか?

Movable Type でブログを作り 元の XHTML 1.0 Transitional を Strict にしようとすると
lint に「 form の内側の書き方が良くない。」と言われ 探して p を見つけました。
p で囲むと100点になったので 安心していたのですが・・・

気になって いろいろ見て回ると p 以外にも div, ul li, fieldset legend など
様々なものが使われているようでした。
サイドバーに以下のように並べている私は どれを使うのが相応しいのでしょうか?

 検索(見出し)
  サイト内検索:
  「検索窓」「検索ボタン」
  「ラジオボタン」
  一行あけて
  ブログを検索:
  「検索窓」「検索ボタン」

どうぞ よろしくお願いいたします。

1   名前: カヅサツ ◆ThCi95HEzw : 2006/07/16(日) 17:19  [URL]  ID:f0UXxXRM
・検索窓というのは input type="text" で良いですか?
・検索ボタンというのは input type="submit" で良いですか?(あるいはbutton要素)
・そのラジオボタンの使い道がイマイチわかりません。何のために配置していますか?

2   名前: ????? : 2006/07/16(日) 17:19  ID:iY/AI05E
XHTML 1.0 Strict //ENの場合だと、<form>の直接の子要素になり得るのはブロックレベルの要素だけだからでしょう、だから<P>要素に限ったわけではありません。レイアウトに合わせていろいろやってみればいいと思いますけど。
正確なことはW3Cのホームページを参照して下さいね。

3   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
カヅサツさん ?????さん お返事ありがとうございます。
説明不足で申し訳ありません。 
お手数をかけますが ご覧いただけますでしょうか。

 http://www.nagominoniwa.net/blog/

厚かましいお願いで恐縮ですが p 以外にも お気付きの点などございましたら
ご指摘いただけると 有り難く存じます。
よろしくお願いいたします。

4   名前: のっと : 2006/07/16(日) 17:19  ID:943Mtr/I
<hx>検索</hx>
<form method="..." action="...">
  <dl>
    <dt>サイト内検索:</dt>
    <dd>
      <ul>
        <li><input type="text" name="..." value="..." /> <input type="submit" name="..." value="検索"
        <li><input type="radio" name="..." value="..." /></li>
      </ul>
    </dd>
  </dl>
</form>
<form method="..." action="...">
  <div>
    <input type="hidden" name="..." value="..." />
    ...
  </div>
  <dl>
    <dt>ブログを検索:</dt>
    <dd>
      <ul>
        <li><input type="text" name="..." value="..." /> <input type="submit" name="..." value="検索" /></li>
    </dd>
  </dl>
</form>


dl {
  margin: 1em 0 0 0; /* 1行分 (厳密には違いますが) の余白。 */
}


定義済みリストでのマークアップはあくまでも“一例”でしかありません。
ちなみに私は、この例では“段落”ではない気がしたので、p要素は用いていません。

5   名前: カヅサツ ◆ThCi95HEzw : 2006/07/16(日) 17:19  [URL]  ID:f0UXxXRM
>>3
1つしかないラジオボタンに何の意味があるのでしょうか?
チェックボックスの間違いではないですか?

6   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
のっとさん お返事ありがとうございました。
教えていただいたようにテンプレートを書き換えることにいたします。

やはり p は相応しくないのですね。
検索窓やボタンって paragraph? と チラッと感じたのですが 100点と Valid をいただいて
安心してしまいました。
これからは もう少し深く考えるように努力いたします。
ありがとうございました。

7   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
カヅサツさん お返事ありがとうございました。
あのボタンは「ラジオボタン」と呼ぶのではないのですね。

form というのが よくわかりません。
Google からのいただき物のソースを 様子を見ながら書き換えたり
消したりいたしました。
もう一つあった www を検索 というボタンは消しました。
サイト名にチェックの入ったボタンも消したかったのですが 消してみると
機能しなかったので 一つだけ残しました。 ヘンですか?

Google のロゴマークも消してしまいましたが まずいでしょうか?
「サイト内検索」の横に 「by Google」とか 書いた方がよろしいのでしょうか?

8   名前: カヅサツ ◆ThCi95HEzw : 2006/07/16(日) 17:19  [URL]  ID:f0UXxXRM
ななみ> お手数をかけますが ご覧いただけますでしょうか。
ななみ> http://www.nagominoniwa.net/blog/

カヅサツ> 1つしかないラジオボタンに何の意味があるのでしょうか?
カヅサツ> チェックボックスの間違いではないですか?

ななみ> あのボタンは「ラジオボタン」と呼ぶのではないのですね。

ええええええっと。
http://www.nagominoniwa.net/blog/ の「『和みの庭』検索」の左にあるのはラジオボタンです。それは合っています。普通、あのボタンはラジオボタンと呼ばれます。
で、私が(質問に正しく回答するために)尋ねているのは、ラジオボタンを1つしか置いてませんが、何か意味があるのですか?(そのラジオボタンは何のために置きましたか?)ということです。

文の意味に沿ってマークアップするのですから、その意味を理解しないとマークアップのしようがないのです。

9   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
カヅサツさん 申し訳ありません。 おっしゃる意味が よく理解できませんでした。

ラジオボタンを何のために置いたか?
私が置いた訳ではありませんが Google のソースに元々二つあったボタンを一つにしたのは 私です。

なぜ 一つにしたのか?
たしか サイト名にチェックの入ったボタンを消すと検索が機能しなくなったので やむなく残した・・・ハズです。
ちょっと記憶が定かでなく 自信が揺らいできましたが ボタンを二つとも消したいと思ったことは確かです。
でも うまくいかなくて 一つだけ残した・・・ような気がします。
「ブログを検索」のように ボタンの無い あっさりとした形にできるといいのですが。

「www を検索」のボタンを消したのは 「サイト内検索だけ」にしたかったのです。
これくらいで お答えになっていますでしょうか?

10   名前: のっと : 2006/07/16(日) 17:19  ID:943Mtr/I
>「www を検索」のボタンを消したのは 「サイト内検索だけ」にしたかったのです。

ならば:

<form method="..." action="...">
  <div>
    <input type="hidden" name="sitesearch" value="nagominoniwa.jp" />
  </div>
  <dl>
    <dt>サイト内検索:</dt>
    <dd>
      <ul>
        <li><input type="text" name="..." value="..." /> <input type="submit" name="..." value="検索"
        <!-- <li><input type="radio" name="sitesearch" value="nagominoniwa.jp" /></li> -->
      </ul>
    </dd>
  </dl>
</form>


とすると良いと思います。
Google側がラジオボタンを提供したのは、 "WWW検索" と "サイト内検索" をユーザー側で選択できる様にするためで、その値が固定 (この場合は、“サイト内検索に限る”ということ) される場合は、わざわざラジオボタンを設置する意味はなく、type属性値をhiddenとしたinput要素で "sitesearch" の値を渡せば良い、ということです。

11   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
のっとさん お返事ありがとうございます。
分かりが遅くて申し訳ありません。 「ラジオボタンを設置する意味」の意味が
なんとなく分かりかけてきました。 カヅサツさんのお尋ねも そのようなこと
だったのかもしれません。

sitesearch についても調べたように思うのですが Google フリー検索(カスタマイズ版)の
検索結果画面を変えられる(色だけですが)ということに魅力を感じました。
私のサイトの一部 のように見えて うれしかったのです。

もう一度 サイト内検索について勉強してみることにいたします。
理解するのに とても時間がかかりますので 迷った時は また改めて質問させていただきます。
いろいろ教えていただいて ありがとうございました。

12   名前: カヅサツ ◆ThCi95HEzw : 2006/07/16(日) 17:19  [URL]  ID:f0UXxXRM
ようやく理解できました。

なら、私ならこうします。

fieldset{
	border-width: 0px;
	padding: 0px;
}

<h1>検索</h1>
<form method="..." action="...">
	<fieldset>
		<legend>サイト内検索</legend>
		<input type="text" name="..." value="..." />
		<input type="submit" name="..." value="検索">
		<input type="hidden" name="sitesearch" value="nagominoniwa.jp" />
	</fieldset>
</form>
<form method="..." action="...">
	<fieldset>
		<legend>ブログを検索</legend>
		<input type="text" name="..." value="..." />
		<input type="submit" name="..." value="検索">
	</fieldset>
</form>


13   名前: ななみ : 2006/07/16(日) 17:19  ID:DZPWBbPA
カヅサツさん 何度もお手数をかけてしまって 申し訳ありませんでした。
おかげさまで できました。

 http://www.nagominoniwa.net/blog/

チェック付きのラジオボタンが無くても 私のバナー付きの検索結果画面が出ますし
ブログ内検索と見た目も揃って 以前よりずっといい感じになりました。
とても嬉しく思っております。
別のページの検索も同じように書き換えます。

分かりの良くない私に 丁寧にいろいろ教えていただいて 本当に感謝しております。
ありがとうございました。

一覧へ戻る