CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。

はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl

CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性（押せる状態）と非活性（押せない状態）を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B

前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。 縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。 フォームを縦書きにするには、writing-mode: vertical-rl;を設定します。サポートブラウザは、Safari 17.4+, Firefox 120+をはじめ、Chrome, Edgeも119からサポートされており、間もなくリリース予定のChrome 124で正式にサポートされる予定です。 writing-mode: Vertically-oriented form controlsのサポートブラウザ 詳しくは、下記をご

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、

この記事を書いたのは しょーご（@samurabrass） このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。 フォームコーディングの注意点リセットCSSについて各ブラウザにはデフォルトでCSSがついていますが、これを初期化するために、通常「リセットCSS」が用いられます。 個人的に好きな「destyle.css」もフォームのスタイルを全て消すので、まっさらな状態になります。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.0/destyle.css" />今回はリセットCSSを導入していない前提になるので、個々人によって表示が記事通りにならない可

ラジオボタンは以下のコードで実装しておきましょう。 <!-- //MW WP form出力部分 --> <span class="mwform-radio-field horizontal-item"> <label > <input type="radio" name="radio" value="radio1" /> <span class="mwform-radio-field-text">radio1</span> </label> </span> <span class="mwform-radio-field horizontal-item"> <label > <input type="radio" name="radio" value="radio2" /> <span class="mwform-radio-field-text">radio2</span> </label

WordPressなどのCMSを使用していれば、お問い合わせフォームをプラグインで簡単に設置することができます。 しかし残念ながら静的HTMLファイルのみのサイトではそうもいきません。 以前は「お問い合わせフォームのためだけにWordPress化する」ことをしていましたが、そんな手間を掛ける必要はありません。 間違っても一からPHPで作ったら、セキュリティがザルなダメダメフォームが爆誕するだけです。 今回は「PHP工房での静的サイトへのお問い合わせフォームの設置方法」を徹底解説します。 PHP工房では以下のようなフォームを簡単に実装することができます。 https://www.php-factory.net/demo/mail/MailForm01_02/contact.php

フォームにおいてバリデーションやエラーメッセージの表示方法は、ユーザーエクスペリエンスを向上させる上で非常に重要な要素です。 フォームのエラーメッセージの表示の仕方や送信ボタンの扱いについて、以下のポイントを考えてみたいと思います。 エラーメッセージの出し方送信ボタンの制御エラーメッセージの出し方フォームへの入力内容についてのバリデーションの結果は、エラーメッセージで表現されます。 エラーメッセージは、ユーザーに対して下記のコミュニケーションを行います。 ユーザーに入力についての問題があることを知らせる入力した内容の問題の原因を明確にする解決方法を提供するタイミングと場所エラーメッセージの表示は、入力項目ごとに表示する方法と画面レベルでまとめて表示する方法の2つがあります。 これらをどのように採用するかは、 ユーザーのエクスペリエンスやコンテキスト、フォームのシステムに合わせて検討する必要

フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.

HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため

今回は時刻を入力UIについて、考えてみます。 以前書いた入力UI系の記事「生年月日の入力UIについて考える」「生年月日の入力UIについてさらに考える」は、生年月日を入力するという特定の目的に絞った入力UIについて考えた記事でした。その際は生年月日の入力UIにカレンダー選択のUIは向かないと書きました。 時刻を入力するUIについても、特定の目的に対してはそれに適したUIがありそうだと考えています。 時刻入力UIのパターン時刻を入力する際の入力UIパターンは下記のようなものでしょうか。主に動きや操作に注目して挙げたパターンです。 使い勝手はそれぞれ違いますが、これらUIは使用される場面によって選ばれているように思います。 時間と分を設定したプルダウン時間・分でそれぞれ分かれて設定したプルダウン1つの入力ボックスに時間・分を数字で入力時間と分を設定したプルダウン＋数字での手入力編集も可のハイブリ

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

アンケートなどを簡単に制作できるGoogleフォームをAPI経由で作成、編集できる「Google Forms API」が発表されました。 The #DeveloperCommunity has more power! Thanks to the new Google Forms API, you have the ability to build powerful integrations on top of forms. Check out automation use cases https://t.co/3rwg3qr5Vg — Google Developers (@googledevs) October 12, 2021 Googleフォームは、質問項目や選択肢が並んだフォーム画面を作り、公開すると、自動的に結果がGoogle Spreadsheetに集計され、容易にグラフ化など

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに

講演会や会員への登録、メールマガジンへの登録の際の顧客と企業の窓口となるのが「登録フォーム」です。登録フォームを設置すれば、24時間の登録受付や顧客の管理、分析まで自動で行うことができます。 しかし、サイトに登録フォームを設置したいけど、作り方やその際の注意点がわからないという方もいらっしゃるのではないでしょうか。そんな方々のために、本記事では登録フォームの作り方から作る際のポイント、おすすめのフォーム作成ツールの紹介するのでぜひ参考にしてみてください。 ▼注目のフォーム作成ツール 「ツールが多すぎて何から見るべきかわからない...」という方は、以下のフォーム作成ツールからのご検討がおすすめです。 ・formrun（フォームラン） ・HubSpot（ハブスポット） ・Tayori（タヨリ） 目次 登録フォームとは 登録フォームの構造 登録フォームの作り方 Wordpressのプラグインを利