CSSとJavaScriptで作るフォームエレメントのチュートリアル51 – creamu
1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C
フォーム上のリセットボタンはデメリット大 [ホームページ作成] All About
リセットボタンは脱力ボタン 入力フォームの「リセット」ボタンは、入力した内容をすべて破棄するボタンです。 このボタンは、誤ってクリックしてしまうだけでも入力内容がすべて消えてしまう危険なボタンです。 下記のサンプルフォーム内に適当に文字を入力後、「リセット」ボタンをクリックしてみて下さい。入力内容はすべて消えてしまいます。 ユーザが意図的に消したいと思ったのならともかく、そうでない場合に誤って消してしまうと、脱力して再入力する気力をなくしたり、いらだったりする要因になります。 フォームには、リセットボタンは配置しない方が望ましいでしょう。リセットボタンが存在しなければ、押し間違えることもありませんから。 入力した内容をすべて消したいと思う機会はそうそうありません。 また、最初からやり直したいなら、（リセットボタンがなくても）前のページに戻って再度アクセスし直せば済むことです。 送信をやめた
![フォーム上のリセットボタンはデメリット大 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
ログインフォームにおけるCSRF対策 - Study03.net 対シンバシ専用
大分前に、どこかのログインフォーム(ログインIDとパスワードを求めるような画面の事)にCSRF対策が施されてなくて良くないなーと思って、社内のセキュリティに詳しい人に、話してみたら、 「ログインフォームに関しては、CSRF対策が施されてなくても特に問題はない」 的な事を言われて、ちょっと面を食らった。 理由としては、「パスワード」自体が、本人しか知りえない「秘密の情報」であれば、外部サイトから、そのフォームに対してPOSTしたとしても「秘密の情報」が間違ってればエラーになるはずだから。 パスワード変更フォームとかでも、「現在のパスワード」を入力させてちゃんとチェックするようにすれば上記と同じ事が言える。 なるほど、同じような処理をするのでも、それに対する必要なセキュリティ対策というのはその性質によって求められるものが変わってくるんだなーと思った。 むしろログインページ(入力画面)が、htt
ひでぶろぐ。 ツイッターコンポーネント twitter component
[PR] 今日のニュースは？？ : 2ch自動まとめキュレクス [PR] 名言や格言をどうぞ！ : 名言満載！ [PR] 副業したい？ : 出張ホスト募集中 [PR] SEO最高峰のクオリティー : 知る人ぞ知る、SEOUP.com。テラプレミアムアクトは抜群におすすめ！ [PR] 口コミ対策 : 口コミでSEO対策。なんとびっくり、1円からご利用頂けます。 [PR] 出張キャバクラアゲハ : ちょっとした飲み会のお供に。デートのお相手に。 cakephpでtwitter、oauthを使用したボットを作りたかったが ベーシック認証のと混ざっててけっこう迷った。 で、とりあえずつぶやくまでできれば後は簡単なのでコンポーネントにしてみた。 ちなみにtwitterapiの登録設定画面は http://dev.twitter.com/apps/ 短縮URLの設定について参考は http://blo
Contact Form 7 (日本語) « iDeasilo
はじめまして タグ表示はなんとか使用で来たのですが メール設定のところに入れるタグがわかりません。 フォームのタグとメールのタグ とわかりやすく説明している資料などないでしょうか？ 教えてください。よろしくお願いします。 7/10 12:05に書き込みをしたfujiと申します。 wordpressを再インストールしてみたところ、解決いたしました。 現在、借りているサーバではwordpressが上手く動かない事があるので、 もしかしたらそれの影響があるのかもしれないですが、原因はよくわかりません。 やっぱり有料のサーバの方が、安定するのかもしれませんね。 メールフォームのカスタマイズも無事できました。 これからもずっと使っていこうと思っております。 ご迷惑をおかけいたしました。
フォームを作成するうえで心がけているたった1つのこと - cutmail's blog
以前から企業のHPなどのフォームを作っていた際に、 心がけていることがあります。 ユーザビリティとでもいうんでしょうか。 それは、ラジオボタンやチェックボックスを複数設置する場合は、 必ずラベルで囲って選択しやすくすること。 試しに以下のチェックボックスとラジオボタンを選択してみてほしい。 悪い例 item1 item2 item3 item1 item2 item3 良い例 item1 item2 item3 item1 item2 item3 どうだろう？ 明らかに良い例のほうが選択しやすくないだろうか？ 良い例であれば、文字を選択すればいいので、その分選択できる領域が広い。 <label><input type="checkbox" value="item1">item1</label> ただ、 <label>〜</label> で囲うだけである。 たしかにプログラムなどでhtmlを
フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」:phpspot開発日誌
prettyCheckboxes - custom checkboxes / radio buttons - by Stephane Caron プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」 チェックボックスは以下のように。 ラジオボックスは以下のように。 ＣＳＳでデザインできます。 jQueryベース。 関連エントリ チェックボックス、ラジオボックスをオシャレに表示するJS CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
Mozilla Re-Mix: テキストエリアの入力内容をコンテキストメニューからクリアできるFirefoxアドオン「Clear Text Fields」
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
http://www.designwalker.com/2009/03/form-design-2.html
IDEA * IDEA
https://blog.8-p.info/2009/03/textfield-js
ITクオリティ ユーザーが入力するフォームを素敵にするCSS
[CSS]ナビゲーションやフォームなどを実装するサンプル集 -CSS Portal
[JS]フォームのボタンやチェックボックスをかわいくするスクリプト | コリス
IDEA * IDEA
