タグ

フォームに関するmomochin44のブックマーク (3)

  • 効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD

    画像の出典:form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測(アイトラッキング)、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

    効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • コンタクトフォームの作成(PHP) | Web Design Leaves

    PHP を使ったコンタクトフォームの作り方のメモ。 (2016年2月14日 全面的に書き換えました。) 以下のページもご覧ください。 PHP を使ったフォームの操作 目次 基的なコンタクトフォーム このコンタクトフォームは「入力ページ → 確認ページ → 完了ページ」の順で遷移します。 サンプル1(メールは送信されません) ページデザイン 入力ページ ユーザーが「名前」「e-mail」「件名」「問い合わせ内容」を入力するページです。 スパム防止のために、画像認証機能(Securimage)を付けます。(reCAPTCHA を使ったサンプルもあります) 確認ページ 入力された値を確認・検証して、不備がある場合は、エラーを表示して再度入力フォームを表示します。 入力された値に問題がなければ、入力された値をユーザーに確認してもらい、間違いがなければ送信ボタンをクリックして送信してもらいます。

  • 1