タグ

Webデザインとフォームに関するNATTIのブックマーク (6)

  • jQueryベースのWebフォームライブラリ「jFormer」

    WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta

    jQueryベースのWebフォームライブラリ「jFormer」
  • [JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer

    簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止(CAPTCHAは無し) 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。

  • フォーム関連要素(1) HTML5で既存のinputタイプに加わった6つの変更点

    HTML5はフォーム関連要素もパワーアップ! HTML5へのバージョンアップに当たり、<form>要素や<input>要素に代表される「入力フォーム」についても、非常に多くの変更が行われました。 もともとアプリケーションプラットフォームを志向していなかったこともあり、HTMLにおける入力フォームは非常に貧弱で、ユーザーにとっても使いやすいものではありませんでした。それを補うため、JavaScriptを用いてリッチな入力フォームを実現するのが一般的でしたが、JavaScriptを用いる方法には「セマンティックが不明確になる」「JavaScriptが動作しない環境では利用できない」といった弱点もありました。 そこで、HTML5ではさまざまな点から入力フォームを見直し、さまざまな機能強化が図られました。具体的には、以下のような点が挙げられます。

    フォーム関連要素(1) HTML5で既存のinputタイプに加わった6つの変更点
  • CSS3とjQueryでフォームを美しく装飾する方法

    2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです!そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト! フォームの仕様 今回チャレンジするフォームの主な仕様です! グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける(モダンブラウザ) 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ?という人もひとつひとつ記述していけば意外と簡単に作れるはずです!リンクをクリックで各項目にジャンプします。 テキストボック

    CSS3とjQueryでフォームを美しく装飾する方法
  • http://www.designwalker.com/2010/06/jquery-forms.html

    http://www.designwalker.com/2010/06/jquery-forms.html
  • スタイリッシュなWEBフォームの実装例いろいろ:phpspot開発日誌

    25 Stylish Examples of Web Forms スタイリッシュなWEBフォームの実装例がいろいろと紹介されており、一部ご紹介。 フォームというと簡単なデザインで済ましてしまう場合が多いと思いますが、こうしたところにもこだわっていると力の入れ加減が伝わってきますね。 デザイン自体もなかなか難しいと思いますが、参考にして綺麗なフォームが作れそう。 Alexandru Cohaniuc 壁に貼ったみたいなインタフェースでオシャレ Tea Round App 角丸で立体的なフォームがナイス Grooveshark 子ダイアログ風のポップアップフォーム Substrakt Matt Pixelight Creative 全部見る デザインを学んだ上で、ユーザビリティについても考え、あくまで利用者視点にたった使いやすいフォームを作りたいものですね 関連エントリ CSSでデザインされた

  • 1