[B! form] lesson5のブックマーク

HTML5におけるinput要素のpattern、type属性のおさらい - Qiita

おさらいシリーズ第4弾w HTML5ではinput要素が拡張されて正規表現による入力値バリデーションができるようになっている。利用するには、 <input pattern=""> のように pattern 属性値にバリデーション用の正規表現を書いてやればよい。 ──で、毎度UI作っていて正規表現パターンを調べるのが手間だったので、定形的な入力値については一度まとめておこうかと思った次第。まぁ、正規表現の自分用チートシートみたいなものですな。 pattern属性用正規表現サンプル集バリデーション内容正規表現（pattern属性）備考

lesson5 2022/02/25

form
html

リンク

Googleフォームのデザインをカスタマイズする方法プラグイン不要で簡単実装！ | Tekito style.me

お問い合わせフォームを作りたいけど、簡易的な機能でいいので簡単に実装したいという方も多いはず。 Googleフォームを埋め込むことも可能ですが、デザインがあからさまにGoogleフォームだと分かるのがネックです。そこで本記事では、Googleフォームを活用しつつ、デザインもお好みでカスタマイズできる方法を解説します。複雑なフォームは難しいのですが、HTMLとCSSが分かればプラグインも不要で簡単にフォームを実装できますよ！

lesson5 2020/09/09

form
google

リンク

今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

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

lesson5 2018/05/31

form

リンク

jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About

フォームの入力チェックは、JavaScriptでリアルタイムにできると便利ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかるフォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したいユーザの入力や選択にミスがあればエラー

lesson5 2015/06/18

リンク

[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack

デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co

lesson5 2015/06/10

css
form

リンク

フォーム周りで覚えておくと便利なCSS Snippets - NxWorld

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。各要素のデフォルトスタイルを削除フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

lesson5 2015/05/17

css
form

リンク

パイプを使って送信先を選択可能に | Contact Form 7 [日本語]

This page is also available in English. あなたが会社のサイトのウェブマスターになった場面を想像してください。そのサイト上に、送信者が宛先を選択できる仕組みのコンタクトフォームを設置することになったとしましょう。わかりやすい例として会社の CEO (ceo@example.com)、営業担当(sales@example.com)、サポート担当(support@example.com) の3つから宛先を選択できることにします。こういったコンタクトフォームは、Contact Form 7 の基本的な機能を使っても実現することは可能でした。まずドロップダウンメニューかラジオボタンを設置して(つまり次のようなフォームタグをフォームのテンプレート内に挿入するわけですが): [select your-recipient "ceo@example.com" "sa

lesson5 2014/12/04

リンク

Getting Started | bootstrap-select · SnapAppointments Developer

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. Download (v1.13.14) Getting Started Quick start Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.4.

lesson5 2014/05/21

リンク

input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js

地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。 input要素に入力パターンを組み込めるスクリプトです。クレカや電話番号などの数字の入力項目に良さそうですね。 $('#foo').formatter({ 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' });上記のように予めパターンを作成しておきます。 <input type="text" class="input" id="foo" maxlength="19" pattern="\d*">あとは指定したセレクタでマークアップすればパターンが適応されます。クレカ等なら、制作側はいちいち4つのinput要素を用意し、レイアウトする手間が省けて、ユーザーも別のinput要素に移動する

lesson5 2013/11/07

form
jquery

リンク

全日本＜label＞要素マークアップ検定

Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。仲間内の勉強会で、ちょっと遊びすぎましたｗRead less

lesson5 2013/08/12

ラベルってブラウザごとに動きが違うのがねぇ

form

リンク

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

必要ならどうぞ。デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

lesson5 2012/05/22

jquery
form

リンク

フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-

最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。具体的なポイントは以下のような項目になります。必須入力か

lesson5 2011/01/10

リンク

Tracking form submissions with Google Analytics | Contact Form 7

If you use Google Analytics to monitor web traffic on your site, you may also want to track form submissions. This article describes how to track form submissions as events with Google Analytics 4 (GA4). Note: This article will not go into the basic usage of Google Analytics. If you are not yet familiar with Google Analytics, please refer to Google’s documentation first. The simplest way to introd

lesson5 2010/01/21

リンク

アイトラッキングから検証した、使いやすいフォームの10のポイント

Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直にフォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ

lesson5 2009/06/04

リンク

MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介

入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非

lesson5 2009/06/03

リンク

デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。

こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、実現できなかったりすることもよくあります。そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。デザイナーの方は、フォームのデザインの参考に。コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。エラーメッセージはlocalizationディレクトリ内に18言語用意されています。日本語用は別途作成し、使用することが可能です。 jQuery

lesson5 2009/05/28

リンク

www.b326.com-官网首页

通过金名网(4.cn) 中介交易金名网(4.cn)是全球领先的域名交易服务机构，同时也是Icann认证的注册商，拥有六年的域名交易经验，年交易额达3亿元以上。我们承诺，提供简单、安全、专业的第三方服务！为了保证交易的安全，整个交易过程大概需要5个工作日。具体交易流程可“点击这里”查看或咨询support@goldenname.com。我要购买>> Process Overview: 4.cn is a world leading domain escrow service platform and ICANN-Accredited Registrar, with 6 years rich experience in domain name brokerage and over 300 million RMB transaction volume every year. We pro

lesson5 2009/04/16

リンク

px*blog | テキストボックス（input）やテキストエリア（textarea）をきれいに

web (23) 1223512230 できごと (2) 1194060480 ひとりごと (10) 1221212219 Comments Recent Comments sb移転に伴いpingとURL変更出会い 10.02 ALT属性入力するところのプルダウンメニューって otogawa 09.17 masa 09.15 IEのバグメモ otogawa 08.19 ikezawa 08.18 カラーピッカー＆文字リサイズ for Serene Bach 柚子 07.12 otogawa 07.08 柚子 07.07 わたし的、よくやるクラスネーミングわさび 07.01 otogawa 06.30 Trackback Recent Trackback IEのバグメモブログニュース 08.28 Serene Bachで各アーカイブごとにテンプレートの表示項目を制

lesson5 2009/04/09

リンク