[B! <button>] mimimi0101のブックマーク

ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ

CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。今日は、フォームにつきもののボタンについて考えてみます。私たちがボタンに求めるモノって、何でしょう。データを送信（submit）するどのブラウザでも同じように見える使い回しが聞くボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しないボタンの大きさ＝クリックできるエリアの大きさ画像がdiableされていても使用可 CSSがdisableされていても使用可ボタンのように見えて実はただのリンクの時のもあるこれらの要求を解決してくれる方法が複数出

mimimi0101 2009/02/19

リンク

CSSとButtonタグを使ったクールなボタンサンプル集:phpspot開発日誌

Digital Web Magazine - Push my button If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can rem ember. CSSとButtonタグを使ったクールなボタンサンプル集。 Formのsubmit ボタンを作る場合、<input type="submit" value="送信"> の形式が最も使われていますが、 <button type="submit"></button> タグを使い、その内部にHTMLを入れこんでCSSでデザインすることでリッチなボタンが作れる実例。 <in

mimimi0101 2009/02/17

リンク

buttonタグの落とし穴 - 重箱のスミガキ

ウノウさんやPHPSPOT開発日誌さんでも紹介され、私も普段大いに活用させてもらっているbuttonタグだが、ものすごく今更ながらに、万能でもないことがわかった。何かというと、 enter（return）キーで、submitされてしまうこと。ちなみに、同form内にinput（textなど）タグを使用しているとき。これは別にbuttonタグだから、というわけでもない。 input のtype="submit"でも、同様の問題がある。が、いかんせん、inputタグの方は、いわば標準的なボタンのタグなので、JavaScriptなどを使い対応されている方も多い。また、enterキーがsubmit扱いになるのは、ブラウザどころかOSレベルでの仕様だったりもする。けど、たとえば、コミュニティサイト新規開発において、会員登録させたい場合、idやメールアドレスを入力させたいことも多いだろう。

mimimi0101 2009/02/10

* buttonタグのtype="submit"をtype="button"に変更 * buttonタグをonClickした際にJSによるform送信

リンク

Programming Magic is under construction

Thank you for being patient. We are doing some work on the site and will be back shortly.

mimimi0101 2009/02/10

リンク

Enterキーでフォームが誤送信されるのを防ぐ方法 [ホームページ作成] All About

フォームの入力欄にカーソルが入っている状態(＝フォーカスがある状態)で[Enter]キーを押すと、フォームの内容が送信されることがあります。これは、[Enter]キーの押下が「フォームの送信ボタンを押す操作」と同じように扱われる場合があるためです。検索窓などのように1項目しか入力欄がない場合ならこの仕様は便利でしょう。しかし、入力欄が複数個あって、未入力項目が残っている状況で送信されてしまうと困ります。下記に、[Enter]キーだけで送信されてしまう入力フォームの例を2つご紹介いたします。 ■[Enter]キーの押下で、送信ボタンを押したことになる例：下記に掲載した3つのテキスト入力欄のうち、どれか1つをクリックして入力欄内にカーソルを入れた後、キーボードの[Enter]キーを押してみてください。少なくとも代表的なブラウザでは、下部に用意された「送信する！」ボタンをクリックしなくても

mimimi0101 2009/02/10

リンク

formタグで、エンターキーを押したときに送信しないようにする

kazinaが作ってるWebサービスやソフトについての情報、プログラミングのメモなどをたまに。あとはAGAT18Kなどカメラやシルバーアクセ作りについて、映画についてなどなど駄文です。 formタグ内の、特にテキストフィールド（type="text"）などでエンターキーを押すと、送信ボタンをクリックしたのと同じ動作になってしまいます。そのまま送信すればいい場合は便利ですが、input type="submit"ではなく、buttonタグとJavaScriptを組み合わせて事前チェックなどを行っていた場合は送信されては困る場合があります。マチウケメール便もボタンをクリックした時はAjax処理がメインで送信はほとんど使っていません。基本的には、formタグ内にsubmitが無ければエンターキーを押しても送信はされません。submitというのは<input type="submit">、ある