フォームデザイン虎の巻：フォームの基礎をおさえる - builder by ZDNet Japan
身近な改善の第一歩！ ニューノーマルな働き方を前提にした これからの時代のWi-Fi環境構築のポイント EDRトップランナー対談：後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 セキュリティモデルは変わった！ クラウド活用、リモートワークはあたりまえ いま求められるゼロトラスト実現のために ITインフラ運用からの解放 HCI＋JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 ともにDXを推進する コンテナ化されたワークロードを管理 継続的な価値を生みだす「協創」への挑戦 データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある デジタル時代のITインフラ構築術
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
MOONGIFT: » 入力した直後にバリデーション「LiveValidation」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 人間は面白いもので、自分の好きな情報だけを見るようにフィルタリングをかけることができる。文字が見づらいコンピュータでは特にそうだ。書いてあるにも関わらず入力エラーが起こるなんて良くあることだ。 そして、それらの入力エラーはユーザにとって非常にストレスになる。自分自身、エラー画面で面倒になって止めてしまうなんてざらだ。そうした機会損失を防ぐためにもこのライブラリを使ってみよう。 今回紹介するオープンソース・ソフトウェアはLiveValidation、その場で行う入力チェックライブラリだ。 LiveValidationはJavaScriptベースの入力チェックライブラリで、特徴は何といってもその場で入力エラーをチェックできることにある。フォーム送信時にまとめてチェックすることもできる。いずれにせよエラーがあった際にはデータは送信されないのでユーザビリティは高い。
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
Accessible CSS Forms: Using CSS to Create a Two-Column Layout - replace tables with css layout form tutorial - WebSiteOptimization.com
Home » Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace tables with css layout form tutorial Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace tables with css layout form tutorial Summary: Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that w
inputEx - HTML Form作成Javascriptライブラリ
inputExは、クライアント側だけでバリデーションや入力補助つきのフォームを作成できるJavascriptライブラリだ。MITライセンスで、Yahoo UI libraryのバージョン2.5.1をベースにしている。 サンプルのページからデモを開くとわかるけれど、 JSON形式の短い記述のみで、きちんとしたフォームが使える。一般的なフォーム、URLやメールアドレス、IPアドレスなど特定のフォーマットに従ったフォーム、グループの制約を持つフォームやカラーピッカー、WISYWIGエディタまで、様々なフォームのための部品が提供されている。 ドキュメントもきちんとしているし、GUIでこのJSONデータを作成するためのフォームビルダも提供されているので、使うための敷居は低いだろう。 サーバ側でフォームを書かないため、このライブラリで作ったフォームは、Javascriptがオフになっていると動かなくな
離脱率90%は当たり前！？最後の難関『入力フォーム』の離脱を改善する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Autopopulating text input fields with JavaScript | 456 Berea Street
For both accessibility and usability reasons, all input fields and other form controls except buttons should have an associated label that clearly states what the purpose of the control is, or what kind of input the user is expected to fill it with. Sometimes the visual design places restrictions on those labels, in some cases to the extent that there is no room for a label. Perhaps one of the mor
Start | 和歌山大学メディアインテリジェンス研究室
和歌山大学メディアインテリジェンス研究室（西村竜一研究室）† 本研究室では、音声や画像、動画、自然言語、センサなどの「メディア」を活用した認識・理解の知的技術によって、人と人、人と機械の協働を豊かなものにするための教育・研究を行います。 2019年度から活動している研究室です。 本研究室の学部生は、システム工学部 メディアデザインメジャーに所属しています。大学院生の所属は、システム工学研究科 知的モデリングクラスタです。 なお、本研究室は、西村が所属（担当）するデータ・インテリジェンス教育研究部門及び学生自主創造支援部門（クリエ）とも協働することで教育・研究活動を進めています。 今後は、社会インフォマティクス学環の学生の受入も行う予定です。 ↑ お知らせ† 2023/12/9 大学院生（M2）の日田さんが国立研究開発法人情報通信研究機構（NICT）の研究員みなさまと共著で発表した『複数話者
Interaction Design Pattern Library - Welie.com
Pattern library All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully. User needs Patterns that meet a direct need of the user. Navigating around· Accordion · Headerless Menu · Breadcrumbs · Directory Navigation · Doormat Navigation · Double Tab Navigation · Faceted Navigation · Fly-out Menu · Home Link · Icon Menu · Main Navigation · Map Navigator ·
テキスト入力エリアにおける空白の価値 (ユーザビリティ実践メモ)
ECサイトの商品検索ボックスなどの入力フォームにおいて、以下のようにテキスト入力エリアに初期値として説明を入れているケースが見られます。 ユーザに入力を促す目的で使われていると考えられますが、この表現を利用しているECサイトで、ユーザに特定の商品の検索を促した際、以下のような行動が見られました。 商品名で検索しようとしたユーザは、まずプルダウンをクリックしました。 ユーザはプルダウンの候補の中で「製品」を選択し、キーワードを入れないまま矢印ボタンをクリックしました。 その結果、カテゴリだけを選んだ状態での検索となったため、キーワードの追加を求めるページが表示されました。 するとユーザは一瞬とまどった様子を見せた後、そのページで改めて製品名で検索し、目的の製品ページにたどり着きました。 その後ユーザへインタビューしたところ、以下のようなコメントが得られました。 キーワードを入れる場所があると
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
HisasAnn.com is for sale | HugeDomains
フォームで落書きを投稿できるようにするJavascriptライブラリ『<input type="draw" />』 | P O P * P O P
ドメインパーキング
http://www2.u-netsurf.ne.jp/~alt/mt/archives/20040324_2259.html
IE7 でフォームに値を入れて印刷プレビューすると…… | 水無月ばけらのえび日記