AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」
TOP > WebDesign > AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」 ユーザーとコンタクトが取れる窓口的な役割を持つフォーム。ユーザーが実際に使う部分だけに、そのデザインやわかりやすさ使い勝手によって、目的が達成できるかどうか大きく変わります。今回紹介するのはAJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」です。 jQuery inline form validation ちょっとした仕掛けがあるものから、見た目が美しいもの、入力補助が効くものなどなど、様々なフォームがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■H
6 ways of styling a search form with css « CssFinest
Working with css i always had this little problem…hot to style a search form and maintain the cross browser compatibility, i will present 6 different ways on how you can do that… 1.Cssfinest - style 1 HTML <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> CSS /* style1*/
フォームタグの正しいマークアップとCSS | Nutspress
フォームのテンプレートを作成する際に正しいHTMLのマークアップをしましょうってことで、『How to create perfect form mark up and style it with CSS』というのを見つけたので自分用に覚書。 よく忘れられがちなのが、<fieldset>というタグで無料配布されているCGIやサーバー側で提供しているフォーム、Wordpressなんかでももともとのテンプレートの中に<fieldset>タグを見かけることはほとんどなかったりする。なので、そのままカスタマイズして忘れてしまうタグのひとつがこの<fieldset>タグと<lavel>タグ。 <fieldset>の役割としてはフォームの入力項目をグループ化するためのタグで抜けていてもとくに構文のエラーが出るわけでもないので、結構無視されがち。タグの勉強をしだした頃はしっかり<fieldset>を書くよ
シンプルでカッコいいFacebook風のWEBフォームレイアウトサンプル:phpspot開発日誌
woork: Beautiful CSS Form シンプルでカッコいいFacebook風のWEBフォームレイアウトサンプル。 次のように、シンプルだけどカッコいいフォームがダウンロード可能です。 動作デモ マークアップは次のように綺麗になっているようです。 <div class="box"> <h1>Sign in</h1> <p>Do you have an account? Sign in!</p> <form action="" method="post"> <label><span>E-mail</span> <input type="text"name="email" id="email" class="input-text"/> </label> <label><span>Password</span> <input type="password"name="psw" id=
CSSでフォームデザインをする際のチュートリアル:phpspot開発日誌
Stylize Forms With CSS - Webmonkey CSSでフォームデザインをする際のチュートリアル。 フォームデザインは、form, fieldset, legend, label なんかのタグが混じってきて複雑で、個人的にあまり得意ではありません。 今回紹介するページでは、マークアップとCSSが紹介されていて、フォームを記述、デザインする際の参考になります。 マークアップは以下。 <form action="#" class="myform"> <fieldset> <legend>Leave a Comment</legend> <ul> <li> <label for="name">Name:</label> <input id="name" /> </li> <li> <label for="email">Email:</label> <input id="em
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
フォームをちょこっとだけ使いやすくする小技いろいろ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
