お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 １．問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」を紹介します。 JSON2HTML １．概要 「JSON2HTML」はJSONデータをHTMLにマッピングするためのHTMLテンプレートエンジンです。 次のようなJSONデータがあるとします。 var data = [ { 'name': 'A', 'value': 10 }, { 'name': 'B', 'value': 20 }, { 'name': 'C', 'value': 30 } ]; たとえば、このJSONデータから次のようなHTMLを出力することができます。 <ul> <li>A (10)</li> <li>B (20)</li> <li>C (30)</li> </ul> jQueryプラグインとnode.jsパッケージの2種類が配布されています。 ２．ダウンロード JSON2HTML
jQueryで新しい要素を作成する方法
jQueryで新しい要素を作成する方法を紹介します。 ここでは新しい要素を作成方法と、新しく作った要素にコンテンツを加える方法、そしてウェブページに追加するまでの手順を解説します。 このエントリーはビギナーの方向けの内容です。 １．新しい要素を作る jQueryで新しい要素を作る場合、たとえばp要素を作るには、次のように作りたいタグを直接記述します。 var paragraph = $('<p>'); 次のように記述してもOKです。 var paragraph = $('<p></p>'); 空要素で記述してもOKです。 var paragraph = $('<p />'); jQuery1.3以前では要素を必ず「/」で閉じていなければいけなかったため、一番最初の書き方はNGでしたが、1.4以降では閉じなくても大丈夫になりました。 ２．新しく作った要素にコンテンツを追加する 新しく作った要
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
A personal exploration of design, technology, & rebellion.
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
