入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
ドラッグ＆ドロップでお好みのHTMLフォームを作成できるサイト「FormBakery」 : 二十歳街道まっしぐら
FormBakeryはフォーム作成を支援してくれるサービスです。 お問い合わせ欄などに利用する「フォーム」がありますが、 ドラッグ＆ドロップで必要な機能を並べるだけでHTMLコードを生成してくれます。 以下に使ってみた様子を載せておきます。 まず「FormBakery」にアクセスしましょう。 ログインなど不要で、アクセス後すぐに利用できますよ。 このように必要な機能をドラッグ＆ドロップで配置し、 詳細を記入していきます。 実際のフォームがイメージできるのでわかりやすいですね。 あとは「Export」より、HTMLコードをコピーすれば完了。 お好きな場所にペーストしてフォームを利用しましょう。 HTMLコードを打ってフォームを作成するのが煩わしい方は是非ご活用下さい！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
