この記事では、HTMLとCSSで応答性の高いサインアップフォームを作成する方法を学びます。 また、javascriptを使用して簡単なパスワード検証を追加する方法についても説明します。
どのようなタイプのウェブサイトにも、サインアップフォームが不可欠です。 あなたのウェブサイトにサインアップフォームがある場合、顧客はあなたの組織についての詳細を簡単に知ることができます。 さらに重要なのは、ビジネスが適切な種類の加入者とそのデータにアクセスできるようにすることです（もちろん、彼らの許可を得て）。
このサインアップフォームテンプレートのコードはシンプルで理解しやすいです。 私たちの便宜のために、メインのHTMLファイル内にスタイリングとjavascriptコードが含まれています。 私たちは、登録フォームに基本的な構造を与えるためにHTMLフォームを使用しています。 私たちは、このフォームのためのneumorphicデザインを作成しようとしました。
パスワードの検証には、javascriptを使用した正規表現パターンマッチングを使用しました。 それについての詳細を読むには、正規表現をご覧ください。 この特定の設計では、パスワードパターンを8-15文字の英数字にするように設定しました。 ユーザーが入力したパスワードがパターンに従わない場合、パスワード入力フィールドの境界線は赤に変わり、一致する場合は緑に変わります。 同様に、パスワードの確認も同様です。 また、フォームでは、パスワードの確認入力フィールドに入力されたパスワードが以前に入力されたパスワードと一致するかどうかも確認されます。
以下は、サインアップフォームHTMLのソースコードです。 私たちは、あなたがコードと一緒に下に埋め込まれたビデオを見ることをお勧めします。
コード：
あなたは、このリンクからサインアップフォームのHTMLコードをダウンロードすることができます。
も読む:
- どのようにHTMLとCSSで応答透明なログインページを作成するには？
- どのようにHTMLとCSSを使用して応答お問い合わせページテンプレートを作るには？
- HTMLとCSSを使って基本的なログインフォームと登録フォームを作るには？
- HTMLとCSSで応答404ページが見つからないようにする方法は？