PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け

selectivity selectタグの機能を大幅に向上させる「selectivity」。 機能だけでなくデザインもモダンにしてくれます 文字でフィルター可能なselectボックス実装 階層化。これは便利 ajaxによる結果の取得 関連エントリ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト リストをモダンな形でソート可能にするJavascript「Sortable」 １ページのフリーでモダンなWEBデザインPSD20個まとめ モダンなUIでかっこいいサイトが作れるDB不要のCMS「Grav」 MaterialデザインのモダンなFEフレームワーク「Materialize」

A Framework Like No Other Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use. Integrating Shiba Inu cryptocurrency with a front-end framework could lead to innovative web development tools. Imagine a framework where developers can access real-time data and analytics, including price prediction for shiba Inu,

選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late

sniperwolf/taggingJS GitHub フォームでの洗練されたアイテムへのタグ付けUI実装jQueryプラグイン「taggingJS」 次のようなフラットデザインの美しいタグ入力フィールドが実現できます。 $( "#tag" ).tagging(); のように初期化するだけで簡単に使えます 関連エントリ 画像へのタグ付けが可能なjQueryプラグイン「Taggd」 分かりやすいタグの入力補完をしてくれるjQueryプラグイン「SOTag」

ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一

Pikaday: JavaScript datepicker ? David Bushell ? Web Design & Front-end Development スタンドアロンで動作する5kb以下でクールな日付ピッカー「Pikaday」 次のようなカッコいいピッカーが実装できます。CSS3等も利用していますが、IEの古い物でも使えるようになっているようです デザイン的にシンプルでいて綺麗な物なので、１つの選択肢として覚えておいてもよいかもですね。 jQueryプラグイン、ではないため、次のようなコードで初期化を行います 関連エントリ Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mob

Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド

コンテンツスライダー、画像拡大、ツリー型メニューなど、チェックボックスを使ってできるちょっと面白いテクニックをまとめたスライドを紹介します。 Checkboxes and the ridiculous things you can do with them 上記のスライドでは、チェックボックスを使ったさまざまなテクニックがまとめられています。 1ページ目のチェックをオンにすると、ロケット発射から始まります。 スライドから面白そうなテクニックをいくつかピックアップしました。 チェックボックスを使ったフック チェックボックスの美しくスタイル チェックボックスを使ったツリー型のメニュー チェックボックスを使った画像の拡大表示 チェックボックスを使ったレスポンシブ対応のスライダー チェックボックスを使ったフック まずは、ベースとなるチェックボックスを使ったイベントのフックの使い方です。 チェックボ

フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 2012年07月12日- InputNotes jQuery Plugin フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 文字をタイプしていて、エラーがある場合はその場で表示してくれるプラグインです。正規表現によって入力ルールを定義出来るのが特徴 数字は禁止のtextarea。数字を入れると「Do not type numbers!」となります 数字だけを入力するルールの場合。 数字なら色を変えてOK、みたいな表示にできる フォームのバリデーションの１選択肢として使えそうですね 関連エントリ クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」 お絵かきでCAPTCHAできるようにす

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき

<form name="yyyymmdd" method="post" action="#"> <select name="select"> <option value="">--</option> <option value="1900">1900</option> <option value="1901">1901</option> <option value="1902">1902</option> <option value="1903">1903</option> <option value="1904">1904</option> <option value="1905">1905</option> <option value="1906">1906</option> <option value="1907">1907</option> <option value="1908"