フォーム(18)

18follower
harada さんのアバター 933views

WordPressのフロントエンド投稿フォームに投稿タグのサジェスト機能を付ける

これまでに投稿したタグを全ては覚えていられないので、タグのサジェスト機能があればいいなとずっと思っていたのですが、やっと実装できました。 jQueryプラグインでも様々なサジェスト機能がありますが、今回欲しかったのは下記の要件を満たすプラ... 2014年7月31日
harada さんのアバター 2,323views

フォームで入力した内容を別の項目へ同時にコピーする

Javascript <script type="text/javascript"> function incopy(frmObj){     frmObj.elements["field_1&q... 2014年7月1日
harada さんのアバター 23,464views

Bootstrapでポップオーバー(Popovers)を表示する

フォームの項目説明などに便利なポップオーバーの表示方法です。 デモはこちら CSS <link href="bootstrap.css" rel="stylesheet" type="text/css" /> Javas... 2014年4月10日
harada さんのアバター 216views

ボタンでリンクする

ボタンでリンクするためのタグです。フォーム系のモック作成時によく使います。 <input type="button" onclick="location.href='http://hackno... 2014年4月9日
harada さんのアバター 1,791views

CSSだけでラジオボタンを選択した時のスタイルを変更する

ラジオボタンで選択したテキストのスタイルを太字にする場合です。 HTML <label> <input type="radio" onclick="planChange();"... 2014年4月2日
harada さんのアバター 3,745views

CSSだけで吹き出しツールチップを表示する

CSS .tooltip{ display:inline-block; position:relative; text-decoration:none; color:#fff; text-align:center; width:16px;... 2014年4月1日
harada さんのアバター 340views

フォームのチェックボタンで表示を切り替える

<script type="text/javascript"> function payChange(){ radio = document.getElementsByName('payChange... 2014年3月31日
harada さんのアバター 4,102views

指定文字数を入力したら自動で次のフィールドへ移動させる

4桁打ったら自動で次のフィールドへフォーカスが移動するようにします。 <script type="text/javascript"> function nextField(i, n, m) { if (... 2014年3月19日
harada さんのアバター 951views

クレジットカード情報入力フォームを補助してくれるjQueryプラグイン

Creditly.jsというjQueryプラグインを利用します。デモもこちらから確認できます。 ソースはGitHubから落とせます。 <link rel="stylesheet" href="file... 2014年3月18日
harada さんのアバター 587views

リアルタイムでエラーチェックする(2)

リアルタイムでエラーチェックするの続きです。引き続きjQuery Live Form Validation というjQueryプラグインを利用しています。 パスワードは文字数の条件を追加、他の項目は入力必須に設定しています。 <s... 2014年3月14日
harada さんのアバター 412views

IEでもplaceholder属性をvalue値に変換して表示

<input type="text" placeholder="テキストを入力してください" size="30" id="s"> <scrip... 2014年3月10日
harada さんのアバター 2,282views

セレクトボックスでの複数選択を簡単にするjQueryプラグイン

Aipo.comのユーザー選択画面だとCtrlを押しながらでないと複数ユーザーを一気に選択できないため、もっと簡単にできる方法はないかなと探していて見つけたjQueryプラグインです。jQuery multiselectから、デモが確認とダ... 2014年3月7日
harada さんのアバター 2,394views

リアルタイムでエラーチェックする

<アンケート調査結果Vol.2イライラ編>ユーザーがフォーム入力中イラつく原因 を見ていたら、1位は「イライラの理由1位「正しく入力したつもりがエラーと判定される」75%」らしいです。私も確かに経験があります。旅行サイトとかに多いですよね・... 2014年3月6日
harada さんのアバター 2,122views

テキストの長さに応じて自動でテキストエリアを広げてくれるjQueryプラグイン

これ、地味に使えそうですね。いちいちテキストエリアを広げるのって、いつも面倒に思ってました。jQuery Autosizeを利用します。 ヘッダに追加 <script src="//ajax.googleapis.com... 2014年3月5日
harada さんのアバター 646views

郵便番号から住所を自動入力

ajaxzip3を利用することで、簡単に郵便番号から住所を自動入力できるようになります。 ヘッダに追加 <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajax... 2014年3月4日
harada さんのアバター 367views

ページを開いた時に特定の入力欄にフォーカスする

<body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> &... 2014年3月3日
harada さんのアバター 3,034views

メールアドレス入力フォームにドメインのサジェスト機能をつける(2)

jQuery UIを利用して、@マーク以降のドメインをサジェストする方法です。 <form> <input class="domain-autocomplete" id="demo" type="text" name="... 2014年2月24日
harada さんのアバター 1,371views

メールアドレス入力フォームにドメインのサジェスト機能をつける

email-autocompleteというjQueryプラグインを利用することで、メールアドレス入力フォームに簡単にドメインのサジェスト機能を付けられます。 <form>       <input type=&quo... 2014年2月21日