- 締切済み
ボタンにinputを使う場合と使わない場合がある？
ボタンにinputを使う場合と使わない場合がありますが、見た目がボタンでも 下記に該当しないものはaを使えばいいでしょうか。 inputタグ（input要素）は送信ボタンやリセットボタン、テキストの入力欄、チェックボックスなどを表します。 下記サイトはpの中にaタグを使って表現していますが、セマンティックだと思いますか？ http://jfarm-tomato.com/ pはコンテンツの一部を示すタグですよね。 このサイトの詳細はこちらボタンなどもコンテンツの一部と考えらるのでしょうか？
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- tracer
- ベストアンサー率41% (255/621)
セマンティックかどうかという観点で考えるならば、まったくセマンティックではないですね。 ご存知のように、webページは主に、html / css / javascript で構成されます。 非セマンティックだった昔は、これらが複雑に絡み合い、いわゆるhtmlにcssもjavascriptも依存していたわけですが、現在は、それぞれがそれぞれを独立して書くことができます。つまり、それぞれの都合に振り回されずに書けるわけです。 たとえば、装飾のためだけに空divなどを置くケースがありますが、あれはまったくセマンティックじゃないですよね。つまり、cssの都合でhtmlが書かれているわけです。同様に、jsやサーバーの都合でhtml要素の種類が決まる、あるいは、本来必要のない要素が増えることがあるとするならば、それはセマンティックではありません。なぜなら、コンテンツの内容(文書構造)によってhtmlが決定されることをセマンティックと呼ぶからです。逆から言うならば、jsやcssあるいはサーバーは、文書構造とは一切関係がないのです。 ただ、セマンティックでないことがイコール悪ではないので、そのあたりは解釈が難しいところではあります。しかしながら、セマンティックを目指すならば、決して褒められる文法ではないですね。
- kreikg
- ベストアンサー率39% (21/53)
なぜ同じようなボタンなのに２種類の書き分けをしてるのかわからないということでいいんでしょうか？ 例に出しておられるサイトでは「詳細はこちら」はaタグ、「カートに入れる」はinputタグを使っていますね。 「詳細はこちら」は別のページへのリンクなのでHTMLでリンクのために提供されているaタグを使っています。ボタンに見えますがCSSでボタン風にデザインされているだけでただのリンクです。 「カートに入れる」はこれをクリックするとサーバー側にあるPHPへデータを送信して処理するのでしょう。 これもHTMLでそのために提供されているformの機能を適切に使うためにinputタグを利用しているんだと思います。 わたしは基本的に次のようにしていますが、絶対そうでなければならないわけではありませんし例外も頻繁に発生します。 ・ボタンの見た目だろうが別ページへのリンクはaタグ ・サーバーとやり取りが必要なフォーム関連はformとinputタグ ・その他(任意のJavaScript実行など)はbuttonタグ ちなみにコンテンツの一部とかんがえられるのか？という質問は検索エンジンを意識しているのだと思いますがpタグの中ならコンテンツとして処理されるでしょう。どのタグがどういった重要度でとらえられるのか等の検索を有利に導く情報は検索エンジン側から公開されることはないはずです。（検索エンジンにヒットさせるために意図しないHTML記述をする人がいるのでそれを避けるため） ご存知とは思いますがHTMLは文章の構造を定義するための言語です。 h1やp、articleなどのタグの役割どおりに文書の体裁が整っていれば検索エンジンに変な捉えられ方をすることはないでしょう。
関連するQ&A
- input みたいなボタン
<ul> <li class=""><a href="・・・">りんく</a></li> <li class=""><a href="・・・">にっき</a></li> <li class=""><a href="・・・">ＢＢＳ</a></li> </ul> （タグはうるおぼえで正確ではないかもしれません。そのサイトもわからなくなってしまって・・） このタグを埋め込むとinputボタンみたいな中に、リンク・にっき・ＢＢＳ、というふうに表示されるサイトがありました。 スタイルシートでやってるみたいですが、外部スタイルシートのためやり方が伺えません。 どのようにしたらよいかおわかりの方いらっしゃいませんでしょうか？
- 締切済み
- レンタルサーバ・ASP
- aタグの中にdivタグを入れる場合について。
aタグの中にdivタグを入れる場合に付いて質問です。 html5の仕様書を読むと、 （http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element） aタグはフローコンテンツということになっておりますが、 フローコンテンツの子孫要素にdivを使用することは（仕様書的に）許されていますか？ あわせて、↑の回答の根拠となる仕様書の部分（URLなど）を記載していただくと助かります。
- ベストアンサー
- HTML
- フォームのプッシュボタンって、自分が用意した何らかのボタンに代用できませんか？
友達から教えてもらったサイトに、 <form><p align="center"><input type="button" value="かわでーす(^^)V" onclick="alert('\n呼ばれて飛び出てじゃじゃじゃじゃぁん \n\n ｂｙかわ(^.^)')"></input></p></form> というタグがありました。これは、ボタンを押すと、自分で決めたメッセージが注意みたいな感じで出てくるタグなのですが、この「ボタン」を、自分が用意したgifファイルにすることは可能でしょうか？ もしできるなら、そのタグや、関連サイトを教えてください！
- 締切済み
- HTML
- input ボタンを教えてください。
Aページで設定を行った後、Aページにあるボタンをクリックして、Bというページにジャンプします。 Bページで様々な設定を行った後、Bページにあるボタンをクリックして、再びAページに戻る一方、Bページでの設定をDBに飛ばします。 という仕様ですが、、、 問題点は、 BページのボタンをクリックしてAページに戻ると、Aページの設定は全部なくなってしまいます。 自分は下記のようにしましたが、Aページの設定はそのままでいいですが、Bページでの設定をDBに格納できません。 <input name="button" type="button" onclick="history.back()" style="background-image: url(images/button_ok.gif);font-size: 14px;color: #000000;height: 25px;width: 116px;background-repeat: no-repeat; border: 0px; " /> 逆に、<input type="submit"> こいうふうにやるとBページの設定をDBに飛ばせるが、Aページに戻ると設定がなくなり初期状態なります。 ぜひよろしくお願いいたします。 可能ならイメージボタンでお願いいたします。
- ベストアンサー
- JavaScript
- input値をボタンでoutput表示 Edgeで
現在公開しているホームページで、Firefoxでは作動するのにEdgeでは作動しない箇所が見つかり対応に苦慮しています。 問題点を分かりやすくするために、inputした値をGoボタンでoutputに表示するだけの簡単なサンプルに落とし込んでみました。 <html> <p> <label for="input">input</label> <input type="number" id="input" value="100"> </p> <input type="button" onclick="location.reload();" value="Go"> <p> <label for="output">output</label> <input type="number" id="output"> </p> <script> var input= document.getElementById("input").value; var output = document.getElementById("output"); output.value = input; </script> </html> 基本シロウトなので正確なことは分かりませんが、ブラウザ間でreloadの仕様が異なり、Edgeではreloadにより表示画面がリセットされてしまうことが原因のようです。 解決策、またreloadを使用しないもっと良い方法などありましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- FORMのINPUTタグについて
FORMタグ内のINPUTタグで例えばボタンを作成した場合。 そのボタンを押すと他のURLへリンクするという動作は出来るのでしょうか？ ＣＧＩを使わないで、HTMLのみで出来るのでしょうか。？ よろしくお願いいたします。
- ベストアンサー
- HTML
- フレームをリセットする方法
とあるサイトで下記のようにリセットボタンを設けていたのですが これはどうやるのでしょうか？ 左と右にフレームで区切っていて、 左側はメニュー・コンテンツ、右側には本文が表示されます。 一例）検索サイトから入った場合 検索サイト→該当サイト→左メニュー1クリック（右にはコンテンツ1が表示）→左メニュー2クリック（右にはコンテンツ2が表示）→ 左メニューのリセットをクリック→ブラウザの戻るをクリック→検索サイトへ 要するに、リセットボタンを押すことによって、コンテンツ1と2を表示させた履歴が消えている状態です。 リセットを押さずにブラウザの戻るをすると、当然一旦コンテンツ1を挟んで、ようやく元のページに戻ります。
- 締切済み
- HTML
- 【htmlタグ】inputタグの書き方について
現状は <input type="text">のテキスト入力エリアが存在します。 それを<form>タグで囲い、 <input type="button">のボタン押下にてform内容を送信していますが、 ボタンではなく、<a>タグのように、ハイパーリンクのような見た目にしてform内容を送信したいです。 どのように修正すればよろしいのでしょうか。宜しくお願いします。
- ベストアンサー
- HTML
- input type ボタン
お世話になります。 inputtype ログインボタン・検索ボタンの事で、お尋ねいたします。 あちらこちらのサイトを参考にログインと検索ができるプログラムを 真似て作成いたしています。初めての事で内容も半分ぐらいしか理解出来ていないままのスタートです。 参考サイトのhtml部分・CSSソースを作りかけの自分のサイトに記載しますとログインボタンと検索ボタンのレイアウトが崩れて 表示されません。 何が原因なのか不明のままです！！ お手数かけますが、ご指導お願い申しあげます。 下記に簡単にinputの部分だけソースを書きますので宜しくお願い いたします。 また別ページ（新規に）html＜body＞～＜body＞間に同じソースを 書きますと検索ボタンもログインボタンもきちっと表示されます。 中身のプログラムソースに入る前にレイアウトを先に手掛けたのですが 意気消沈しています。 他のCSSとかjavascriptかのソースと競合するのでしょうか？ 解らない事ばかりです。 奇麗に表示ができれば幸いです。 宜しくお願い申し上げます。 googleサーチのinputです。 <div class="entry_search"> <form method="get" action="http://www.google.co.jp/search" target="_parent"> <table width="166" border="0" bgcolor="#ffffff"> <tbody> <tr> <td width="160" height="32" align="left" valign="top" nowrap="nowrap"><a href="http://www.google.co.jp" target="_blank"> <img src="imges/common/poweredby_google.gif" alt="Google" border="0" /></a> <br /> <input type="text"name="q" size="17" maxlength="255" value="" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type="hidden" name="hl" value="ja" /> <input type="hidden" name="domains" value="#" /> <input type="submit" name="btnG" value="検索" /></td> </tr> <tr> <td nowrap="nowrap"><table> <tbody> <tr> <td ><input type="radio" name="sitesearch" value=" " /> <font color="#000000" size="-1">Web</font></td> <td><input type="radio" name="sitesearch" value="#" checked="checked" /> <font color="#000000" size="-2">サイト内</font></td> </tr> </tbody> </table> <input name="client" value="pub-5778690733142083" type="hidden" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type=hidden name=hl value="ja" /> <input name="cof" value="GALT:GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:ffffff;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" type="hidden" /> <input type="hidden" name="hl" value="ja" /></td> </tr> </tbody> </table> </form> こちらがログオンの一部です。 <div class="AA_approach_b"> <h4 class="AA_blockHead AA_loginHead">ログイン</h4> <form name="login" action="#" method="post"><input name="action" value="login" type="hidden"> <input name="#" value="4b96bbf140d2a3cb9821cc2cba76395e21feb0f5b9ab041b561f0a03fc15ef2a" type="hidden"><table class="bestfood_loginTable"> <tbody><tr> <th class="CC_th">E-mail</th> <td class="CC_td"><input name="loginEmailAddress" value="" type="text"></td> </tr> <tr> <th class="CC_th">password</th> <td class="CC_td"><input name="loginPassword" value="" type="password"></td> </tr> <tr> <td colspan="2" button type="class="CC_submit" value="submit"> <input value="ログイン" type="submit"> </button> </td> </tr> </tbody></table> <div class="AA_annotation"><a href="#">パスワードをお忘れの方</a></div> <input name="referer" value="block" type="hidden"> </form> 上記の他にCSSと手元にCGIソースがあります。 お手数ですが宜しくお願い申し上げます。 初めての事ですので表現や考えに間違いありますればご容赦を....!!
- 締切済み
- その他([技術者向] コンピューター)
- フォームボタンがフッターにあるときの記述について
１．フォームを使用し、下のようなサイトを作る場合 このようなコードで作ったのですが、どのような書きかたがスマートなのでしょうか？ （※商品選択からカートに入れるボタンまでの間に、他に要素がたくさんあります。） よろしくお願いいたします。 <div id="header"> ・ ・ ・ </div> <div id="contents"> <form> <input> <select> ・ ←商品選択フォーム ・ ・ </select> </div> <div id="footer"> ・ ・ ・ <input>←カートに入れるボタン </form> </div>
- ベストアンサー
- HTML
お礼
ありがとうございました。 ただのリンクならa、JS、CSSアニメーション（サーバとやり取りしないもの）のフックならbuttonタグということですかね？