モバイルウェブのコンバージョンを改善する - フォーム編
インターネットが登場して 20 年以上が経過し、時代はデスクトップからモバイルへと移り変わりました。モバイルでは、単に小さな画面に対応しているだけでなく、よりスピード感のある体験が求められています。それは E コマースビジネスも例外ではありません。 モバイルでの決済において、66% がネイティブアプリではなくウェブ上で行われているというデータがあります。検索結果からアプリをインストールしてまで商品を購入するのは手間がかかりすぎるため、そのままウェブ上で決済しようとする人が多いことが原因と考えられます。 ただ逆にモバイルウェブサイトは、デスクトップのウェブサイトと比較として、コンバージョンレートが 66% 低いというデータも存在します。これは逆に言えば、モバイルウェブでのコンバージョンレートにはまだ伸びしろがある、ということも意味しています。 そこで今回は、フォームを改善することでモバイルウ
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
ウェブフォームの構成要素 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
inputやtextareaの入力補助 - 1000ch.net
inputやtextareaの入力補助 <input>の入力補助には<datalist>を使ったものがある。補助候補を<datalist>と<option>を使って定義し、そのIDを適用先の<input>のlist属性に付与する。以下サンプル。 See the Pen Input suggestion using datalist by 1000ch (@1000ch) on CodePen. Chromeだと領域の右端に▼が表示されているし、候補のドロップダウンやその▼はまさにブラウザネイティブのUIといった感じだが、どうもスタイリングが出来ない。古いという意味で信頼性に欠けるがRelevant Dropdowns: Polyfill for Datalistにも不可能っぽいことが書いてある。Shadow DOMだろうからインスペクタ使ってセレクタを調べようとしたけど、フォーカスアウトす
HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
HTML5のスマホ対応の基礎知識とハマリどころ3選
HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | DevelopersIO
HTML5でinputタグのタイブが追加されましたが、現行のiPhone、Androidでどのくらい使えるのか調べてみました。 OSとブラウザに関しては以下の機種で調べています。 iPhone 5(iOS6)のSafari Galaxy S3(Android 4.04)のGoogle Chrome バージョン18 目次 テキスト入力 検索(search) 数値(number) 電話番号(tel) URL(url) メールアドレス(email) 日付・時間指定 時間(time) 日付(date) 日時(datetime) 日時(datetime-local) 週(week) 月(month) その他 範囲から指定(range) 色選択(color) テキスト入力 まずはテキスト入力系の属性を調べてみます。 見た目が変わったり、フォーカスインした際の入力モードが変わります。 検索(search
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ | HTML5でサイトをつくろう
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下記に各属性ごとの特徴をピックアップし、現状で対応しているブラウザの画面キャプチャを掲載しました。だだし、現状(※2011年9月)の対応状況になります。 search 『type=”search”』の主な特徴 1行テキストの入力フィールドで表示され検索向けであることを表します。 input要素の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://dl.dropbox.com/u/6353012/inputCheckButton/index.html