住所入力フォームなどで使う都道府県の並び順について調べてみました | えすたくぶろぐ
先日、某サイトの住所入力フォームで都道府県を選択する時に、都道府県の並び順がアイウエオ順になっていて驚きました。都道府県の項目の選択肢が「愛知県」から表示されていて最初全く意味がわかりませんでしたし。普段、北海道で始まって沖縄で終わる、北から南に並ぶ順序に慣れているので、かえって自分の住んでいる県を探すのが大変でした。 たぶん、サイト制作者さんはアイウエオ順に並べることで探しやすくなるだろうって思ったのかもしれませんが。なんというか、金額で4桁ごとにカンマが打ってあったり、タッチパネルキーボードでアイウエオ順に並んでいるのを見た時と同じような感覚を持ちました（笑） 他にも今まで見たフォームで違和感を覚えたのは、「北海道、青森県、岩手県…」と一応北から南へ順番に並んでいるんですが、福島県で東北地方が全部出た次は関東になるのかと思いきや新潟県になってたりした並び順とか。緯度を基準にすればそうな
お問い合わせフォームのWordPressプラグインのinquiry form creatorが便利だった。 / Maka-Veli .com
有名なようですし日本人Developerさんだったので既にご存知だろうと思いますけど、使ってみてなかなか痒いところに手が届いてくれたのでご紹介。あー、これはクライアントワークで使えるなぁーと思いました。簡単なフォーム程度でOKのサイトだったらコレで十分なんじゃないでしょうか。 inquiry form creatorの便利だったところ 日本語 確認画面、サンキュー画面がある フォーム項目の追加が簡単 標準でバリデーションがけっこうある ユーザーに自動返信ができる お問い合わせ内容が管理画面上で確認できる お問い合わせ内容をCSVに落とせる と、思ったんですが、同作者さん( horike 氏) の新しい（？）フォームプラグイン Trust Form のが良さそうですね。 アップデート日時が古いからおかしいなと思ったらこんなのあったのですねー・・・orz （そういえば前にWP詳しい人がT
input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
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>
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
フォーム自動入力(x-autocompletetype)の実験
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんり Google Chrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには) Google Chrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値を email とか sname
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 | HTML5でサイトをつくろう
jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 スマートフォン向けフレームワーク注目の「jQuery Mobile」の第2弾の記事です。前回はjavascriptを一行も書かずにjQuery Mobileでページを作成してみましたが、今回はスマホサイトで、google Mapsやお問い合わせフォームの設置など、より実践的に使える内容を作っていきたいと思います。 前回の記事はこちらになりますので見ていない人はこちらから見るとより今回の記事がわかりやすいくなります。 スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 さて前回もあげましたが、jQuery Mobileのメリットと言えば！ マルチデバイスに対応できる クロスブラウ
通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か
どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
【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要素の
お手軽WordPress Tips：1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう
WordPress3.2のリリースも間近に控え、 より楽しみが増える今日この頃ですが、 3.1から増えた新機能の投稿フォーマット がさほど普及していない印象が否めない ので微力ながら貢献してみようかなと 思います。 カスタム投稿タイプやカスタムタクソノミーなど、便利な新規能が山盛りなWordPressなんですが、Webデザイナーさんにとって嬉しい新機能といえば「投稿フォーマット」ではないかなと勝手に思い込んでいます。 1行のコードだけで済むので導入も楽ですし、デザインに貢献出来る機能でもありますので、「知らなかったよ！」という方はぜひ使ってみてください。 以下、参考になるページです。 投稿フォーマット – WordPress CodexWordPress3.1の新機能投稿フォーマットを試してみた。 | Simple ColorsSimple Colorsさん(@jim0912)が分かりやす
webアプリケーションの脆弱性とは？ - OKWAVE
こんにちは！ 「フォームを勝手にサブミットしてしまう」 その認識でだいたいあってます！たぶん！ そのmixiの例だと、 入力画面 → (送信1) → 確認画面 → (送信2) → 完了 ってなるわけですが、 いくら確認画面が間にあったところで、 (送信2)の部分を「勝手にサブミット」しちゃえばいいわけです。 ※ただし今のmixiや、ちゃんとしたwebサービスは送信時にトークンをつけるとかCSRF対策してるのでできません 実際の攻撃の例としては、mixiやtwitterなどの多くの人が繋がっている投稿型サイトで、 「こんにちはこんにちは！！ このリンク先すごいよ！ http://～」 のような書き込みをしておき、 そのリンク先でformやJavaScript等で「自動的に勝手にサブミット」してしまいます。 画面には何も表示されなくてもかまいません。 そしてさらに勝手に書き込む内容を 「こんに
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
jQueryベースのWebフォームライブラリ「jFormer」
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
ヤフーにおけるインプットバリデーション「何も信じるな」 (Yahoo! JAPAN Tech Blog)
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、R＆D統括本部 開発推進室 セキュリティプラットフォーム技術 セキュリティスペシャリストの戸田 薫です。 今回は、私たちが普段からヤフーのシステムに対する入力にどのような注意を払っているのか、そのいくつかをご紹介致します。 入力とは? Webサイトを運営している場合、どのような入力があるでしょうか？ たとえば、Webサービスには、以下の入力があります。 Cookie URL GET/POSTのデータ ファイルのアップロード その他リクエストヘッダ そのほかにもいくつもあります。 環境変数 設定ファイル クローラが取得したデータ パートナー企業のAPIから取得したデータ（XMLやJSONなど） パートナー企業の入稿用 F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kit
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発
