あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る
サンプルについてメールアドレスとURLを入力して送信するフォームです。リアルタイムで入力値のフォーマットと入力の有無のチェックを行います。入力値に問題がなければ、送信ボタンが押せるようになります。ボタンを押すと、入力値がアラートとして表示されます。※サンプルなので、かなりシンプルに作っています。 サンプルのソースコードはGitHubで確認可能です。 maechabin/react-validation-form – GitHub実際にReactの実装を行っているのが以下のJSファイルとなります。 https://github.com/maechabin/react-validation-form/blob/master/src/app.js実装方法の説明の前にReactの基礎知識の説明や開発環境の構築方法などは省略します。その辺の情報については、当ブログの以下の記事などを参考にしてください
[Rails 4.1] ActiveModelを使って、DBと関係ないFormを作り、確認画面付きのお問い合わせフォームを作る方法 - Qiita
はじめに ユーザーからのお問い合わせフォームを出す為に、お問い合わせ内容がActionMailerで届くような感じのものを作りたいと思います。 かなりあっさりできます。 ActionMailerの設定 ActionMailerで、Gmailの設定をする場合は以下の感じにしました。 # ActionMailer config.action_mailer.default_url_options = { :host => 'localhost:3000' } config.action_mailer.raise_delivery_errors = true config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { #:enable_starttls_auto => false, :add
![[Rails 4.1] ActiveModelを使って、DBと関係ないFormを作り、確認画面付きのお問い合わせフォームを作る方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f62a03ee1120a8268dc1c09cd792784405bb6ab/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlMjA0LjElNUQlMjBBY3RpdmVNb2RlbCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MCU4MURCJUUzJTgxJUE4JUU5JTk2JUEyJUU0JUJGJTgyJUUzJTgxJUFBJUUzJTgxJTg0Rm9ybSVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MiU4QSVFMyU4MCU4MSVFNyVBMiVCQSVFOCVBQSU4RCVFNyU5NCVCQiVFOSU5RCVBMiVFNCVCQiU5OCVFMyU4MSU4RCVFMyU4MSVBRSVFMyU4MSU4QSVFNSU5NSU4RiVFMyU4MSU4NCVFNSU5MCU4OCVFMyU4MiU4RiVFMyU4MSU5QiVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZWIzMWVmZDNkYWJhOTkzNzBiY2I3NTA2OWU0YzUxMDg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjb2xvcnJhYmJpdCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzVkYWE3NzRhZDk0NGI5OWZhN2I0OThhNWQwNWUxNDI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Ddae6a1f2ec3efca220b0504a08c69dce)
Rails4でFormオブジェクトを作る際に気をつける3つのポイント
Railsで実際にFormオブジェクトを作ってみたらいくつか気をつけるポイントがあったので紹介します。 ActiveRecord / Rails / Ruby この記事はRuby on Rails Advent Calendar 2014の2日目です。 1日目は@miyukkiさんの「結局Ruby on RailsとPHPってどっちが優れてるの？」でした。おつかれさまでした。 Formオブジェクトとは Formオブジェクトはその名の通り入力フォーム用のオブジェクトです。 フォームとモデルがうまく対応しているときはActiveRecordをそのまま使えば良いのですが、 複数モデルを作りたかったりモデルとは違うValidationを行いたかったりする場合にはFormオブジェクトを使うと便利です。 Formオブジェクトのサンプルコードはこんな感じになります。 class Blog::SiteFo
[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
