電子書籍の厳選無料作品が豊富!

<html>
<head>
<title>test</title>
</head>
<body>
<form>
<input type="button" value="文字" onclick="document.location = 'http://www';" />
</form>
</body>
</html>

でも

<html>
<head>
<title>test</title>
</head>
<body>
<input type="button" value="文字" onclick="document.location = 'http://www/';" />
</body>
</html>

でも、問題なく動くのですが、formタグって必要ですか?

A 回答 (3件)

端的にいえば、type=buttonはスクリプトを前提とするタグなので


スクリプトのトリガーとしての意味合いから言えば必ずしもformとの
組み合わせでなくてもよいかと思います。
ただしbodyに直書きするのはどうかとおもうので最低限pタグなどで
囲んであげてください(form内に設置する場合もおなじ)
    • good
    • 0
この回答へのお礼

ありがとうございます。

お礼日時:2013/04/04 21:47

a要素の終了タグが抜けてました。


<p class="button" style="width:5em"><a href="https://www.google.co.jp/">Google</a></p>
    • good
    • 0
この回答へのお礼

ありがとうございます。

お礼日時:2013/04/04 21:47

>問題なく動くのですが、formタグって必要ですか?


 特定のブラウザで確かに動くでしょうが、それに期待してはなりません。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
・ブラウザは、HTML構文上間違いがあっても最大限その利用に尽力しなければなりません。
【引用】____________ここから
しかし、様々なHTMLバージョンの実装間での実験及び相互運用性を促進するため、次の動作を推奨する。
 ・認識できない要素があった場合、ユーザエージェントは、内容の
  レンダリングを試みねばならない。
 ・認識できない属性があった場合、ユーザエージェントは、当該属
  性定義全体(すなわち、属性とその値)を無視しなければならない。
 ・ 認識できない属性値があった場合、ユーザエージェントは、
  デフォルトの属性値を用いねばならない。
・・・【中略】・・・
 エラー条件をどのように処理するかはユーザエージェントにより様々なので、
HTML文書の著者もユーザも、特定のエラー復元方法に依存してはいけない。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[不正文書に関する注意( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
★HTMLが正しく書けているかは、必ず
  ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でチェックしておきましょう。[右上のDATAタブから]
 HTML文書が不正だと、ブラウザによって表示が違ったりする原因になります。

★それ以外の問題点
1) input要素は、フォームコントロールのひとつでformを使ってサーバーにデータを送る機能の一つです。デザインのために使用してはなりません。
 これはHTMLすべてについて言える、とても大事な点です。「配置のためにデザインを使用する」「行間が広いので段落を<br>でマークアップする」「スペース調整で画像を挿入する」等々・・
  ⇒スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
2) javascriptを利用できない、利用しない端末には無効です。
 『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
3) 「この様な外観にしたい」と言う場合は、【HTMLは正しく書いて】スタイルシートでデザインして行きます。
【引用】____________ここから
 スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
★このように文書構造とスタイルシートを使い分けることによって、(検索エンジンも含めて)様々な端末で利用可能になり、またデザインはいつでも好きに変更できます。

★実際にはどうするか?
[HTML]
単なるリンクでしたら、HTMLは次のようになるでしょう。
【例】段落なら<p></p>、リストでしたら<li></li>など・・
<p class="LinkButton" style="width:5em"><a href="https://www.google.co.jp/">Google</p>
 わかりやすくするためにLinkButtonというclass名をつけておきます。それを利用してスタイルシートを書くことが出来ます。
[スタイルシート]<head></head>内に
<style type="text/css" media="screen">
<!--
p.button{
text-align:center;line-height:2em;
margin:0.5em auto;
}
p.button a{
display:block;width:100%;height:100%;
border:outset 2px gray;border-radius:0.3em;text-decoration:none;
}
p.button a:hover{
background-color:yellow;}
p.button a:active{background-color:aqua;border-style:inset;}
-->
</style>
    • good
    • 0
この回答へのお礼

ありがとうございます。

お礼日時:2013/04/04 21:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!