Are you ready? Let’s get started! Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore the first video will focus on how to create, but mainly how to style, your contact form using CSS3. Your Designer Toolbox Unlimited Downloads: 500,000+ Web Template
SurveyMonkeyは、あらゆる用途・ニーズに対応します。SurveyMonkeyを探索して、その活用方法をご確認ください。
【１】はユーザーの誤入力との戦いになります。入力を受け付けてから，間違ったデータをどう処理するかを決める必要があります。 【２】はプルダウンから選ばせるので，誤入力がほぼなくなります。「4月31日」などをどう防ぐか，あるいは警告をどう出すか，「年」をどこから開始するのかなど，開発者のセンスは問われます。 【３】選択肢の中に「月」や「日」を入れたものです。どちらが選びやすいか，という観点で差が出ると思います。 【４】年数を汎用的にしたものです。年の開始をどうするかなどの問題がクリアできます。2000年代を選べないので，問題を選ぶかもしれません。 【５】カレンダーで日付を選ぶというもので，誕生日といった幅の広い選択肢よりは，飛行機の搭乗日などの時に使われますし，プルダウン方式と併用して用いられる場合も多くなってきています。祭日などの情報にも注意をしなければならないので，開発にはコストがかかりま
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんり Google Chrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには) Google Chrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値を email とか sname
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
An arrow pointing left An arrow pointing right An arrow pointing left A magnifying glass The Twitter logo The Facebook logo The LinkedIn logo The Google Plus logo The RSS feed symbol The Wufoo by SurveyMonkey Logo The Wufoo by SurveyMonkey Logo A credit card A tray with an upwards pointing arrow A diamond with two arrows leading to different boxes Two bars in a chart Two pages A painter's palette
TextExpander についてはこれまでも何回か紹介してきましたが、使えば使うほど時間が節約できるという点がライフハック的で気に入っています。 その TextExpander が先日バージョン 3 にアップデートされていて、大きく変わりました。最大の変化は、これまでシステム環境設定のなかに存在していた TextExpander が独立したアプリとなった点です。 システム環境設定のなかではウィンドウの大きさなどで制限があったのですが、この変化によって今後の開発に拍車がかかりそうです。 もう一つの大きな追加機能がテンプレートの中に任意のフィルインを設定できる Fill-In 機能です。たとえば９割は固定したテキストでも、名前や要件の部分だけを編集する必要がある場合に効果を発揮します。 Fill-In についてはみてみないとわからない部分も多いと思いますので動画にまとめてみました。TextE
いろいろなシーンに 対応 必要な時、スピーディに フォームとページ を作成できます。 あらゆる課題を解決する活用法やサンプルを紹介！ イベント・セミナー キャンペーン ネット販売 アンケート お問い合わせ 予約 登録 採用 ホームページ 社内の報告書
Primary & Secondary Actions in Web Forms by Luke Wroblewski August 27, 2007 In recent months, I’ve been working on refining the design recommendations in my upcoming book, Web Form Design Best Practices, through actual usage data. To that end, I’ve had the pleasure of working with London-based usability firm Etre on several eye-tracking and usability studies focused on specific aspects of Web form
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
