Tips今回ご紹介するのは、HTML5とCSS3だけでメールフォームのValidationして、更に入力ヒントまで出してしまおうというハイパーな技です!とにもかくにもデモをご覧ください。http://source-marine.net/css-mania/sample/css3-and-html5-validation/すごい便利ですね。ソースを見ていきます。></head><body></body></html>まあ、普通のhtml5ですね。name="contact_form"></form>formも普通のフォームです。最近ふと思うんですが、inputやらtextareaやらやたらリストで囲む傾向があるような気がするんですけど、これはどういう意味があるんでしょう?SEO?って考えるとメールフォームのキーワードで検索でひっかけようとするほど意味のないことはないと思うのでこの辺りはあまり合点がいかないような気がします。それ以外は普通のフォームですね。class=”form_hint”>で囲んだところがヒントとして表示されるんですね。required/>placeholderを追加します。placeholderはテキストフィールドなどに入力欄に初期表示する内容を指定するやつですね。html5からの機能です。blue;}ってすると、大抵のブラウザでplaceholderにスタイルを設定できるとな!時間の都合で実証をしてないです。position:relative;}リストのスタイルを設定。#777;}リストの最初と最後に下線を引く設定。{margin-left:156px;}フォームエレメントのスタイル設定なかなか、秘密にたどり着けない感じがもどかしい。inset;}っと色々たくさん書いておりますが、要するにsubmitにグラデーションの設定をしています。(ばっさり切ってしまった)なんかこう簡単にできないもんでしょうか!-webkitやら-mozやら-msやら・・・。各ブラウザが勝手な設定作りだすからこんなことになるんだよ!ついでに、inputとtextareaに影つけて、フォーカスした時に、影の色を変えて背景色を白にして。padding-right:70px;}inputとtextareaにフォーカスされたときに右側にpaddingをつけます。.25s;}これは、CSSでトランジションをつけてますね。すると「スパーンッ!」とpaddingが付かづになめらかーに「にょき」っとpaddingがつけられるんですねぇ。素晴らしい!ちょっと勉強になりました。center;}この:requiredっというのがよくわかりませんが、どうやら必須入力を意味するアスタリクスをbackgroundを表示しているようですね。すると、inputやらtextareaの背景が設定できるということか・・・・。思って:requiredを消してみたが何も変化なし・・・。required/>ってするとrequiredで入力チェックをするんですね。ついでにここに背景のスタイル入れちぇってことのようです。すれば、必須入力が分かりやすくてしかも作る側にも優しいのでいいですね。すると必須入力を飛ばしてsubmit(送信ボタン)押そうとすると「このフィールドを入力してください」っと注意がでると言うわけです。!type=”text”っというのは普段僕らも使い慣れたinputに設定するタグですが、html5だとこれにtype=”email”とtype=”url”っというのができるのです。するとiPhoneやらなんやらで入力の配列がメールようになったり、URLようになったりします。確かに、あれこれ押して記号をだすのは面倒です。スマホはめんどくさいです。required/>っとします。#b03535}focus:invalidでフォーカスされたらスタイルを変更。これは何かと使えそうな予感がします。#28921f;}:required:validで入力されたらスタイルを変更。この場合は緑に変わりますね。ちなみにtype=”email”やtype=”url”とすることで、2バイト文字(要するに日本語)は正しい文字列として扱わなくなるので入力のやり直しを命ぜられます。CSSなのかhtmlなのかわかりませんが、入力値をリアルタイムでチェックしていますね。/>っとすることで、validのパターンが設定できます。(http|https)://.+の部分は正規表現のようですね。none;}ヒントのスタイル設定です。none;っとなっていますね。left:-6px;}ヒントスタイルの前に\25C0で記号を使って吹き出しを表現しています。*/ここでvalidが通ったら色が変わる設定をしていますね。inline;にして表示するようにしています。これでめでたく完成でございます。便利になったHTML5っという感じがしますが、問題はIEがついてこないことですね。Chromeを入れましょう!とはいえ、emailにしても要は@マークがついているかどうかしかチェックしていないので、細かい所までチェックしようとしたらやはりjavascriptっということになりますね。この辺りはまだまだと言ったところでしょうか。スマホサイトのメールフォームなんかはこの辺りとjavscritpで連携させて上手く使えば今まで以上に簡単にメールフォームが作れそうな気がしますね。代表デザイン・コーディング・PHPアプリケーションまでこなす。マルチデザインプログラマ。Usソースマリンは福岡で活動しているデザイン・プログラム事務所です。デザイン・ムービー制作、CMS・プログラム構築、ウェブマーケティング、イラスト作成などなどお気軽にご相談下さい。