User:HTMLとCSSおよびJSを使用してサインアップフォームを作成する方法は、サインアップフォームに次の情報を要求する必要があります。
- ファーストネーム
- 苗字
- メールアドレス
- 電話番号
 - パスワード
 - パスワードの確認
フォーム検証を使用して、誤った情報を取得しないようにします Assistant:フォーム検証を備えたHTML、CSS、およびJavaScriptを使用した単純なサインアップフォームの例を次に示します。

HTML：

'' Php
<form id = "signup-form">
  <div>
    <ラベル= "first-name">名：</label>
    <input type = "text" id = "first-name" name = "first-name"必須>
  </div>
  <div>
    <ラベル= "last-name">姓：</label>
    <input type = "text" id = "last-name" name = "last-name"必須>
  </div>
  <div>
    <ラベル= "email">電子メール：</label>
    <入力タイプ= "email" id = "email" name = "email"必須>
  </div>
  <div>
    <ラベル= "電話">電話番号：</label>
    <入力タイプ= "tel" id = "電話" name = "電話"必須>
  </div>
  <div>
    <ラベル= "パスワード">パスワード：</label>
    <入力タイプ= "パスワード" id = "password" name = "password"必須>
  </div>
  <div>
    <label for = "password-confirm">パスワードの確認：</label>
    <入力型= "パスワード" id = "password-confirm" name = "password-confirm" reby
  </div>
  <ボタンタイプ= "submit">サインアップ</button>
</form>
'' '

CSS：
'' css
＃signup-form {
  パディング：20px;
  バックグラウンドカラー：＃f2f2f2;
  幅：500px;
  マージン：自動;
}

＃signup-formラベル{
  表示ブロック;
  マージンボトム：10px;
  font-weight：bold;
}

＃signup-form input [type = "text"]、
＃signup-form input [type = "email"]、
＃signup-form input [type = "tel"]、
＃signup-form input [type = "password"] {
  幅：100％;
  パディング：10px;
  マージンボトム：20px;
  ボックスサイズ：ボーダーボックス;
  ボーダー：1pxソリッド#ccc;
  ボーダーラジウス：5px;
}

CSS：

＃signup-form button [type = "submit"] {
  幅：100％;
  パディング：10px;
  バックグラウンドカラー：＃4CAF50;
  色：白;
  国境：なし;
  ボーダーラジウス：5px;
  カーソル：ポインター;
}

＃signup-form button [type = "submit"]：hover {
  バックグラウンドカラー：＃3e8e41;
}
'' '

JavaScript：

'' javascript
const form = document.queryselector（ "＃signup-form"）;
const passwordinput = document.queryselector（ "＃password"）;
const passwordconfirminput = document.queryselector（ "＃password-confirm"）;

form.addeventlistener（ "submit"、（event）=> {
  event.preventdefault（）;

  if（passidentinput.value！== passwordconfirminput.value）{
    アラート（ "パスワードとパスワードの確認は一致しません。"）;
    戻る;
  }

  alert（ "フォームが正常に提出されました！"）;
}）;
'' ' 
User:HTMLにCSSとJavaScriptを使用するにはどうすればよいですか？HTMLを「signup.html」というファイルにコピーし、cssを「signup.css」というファイルにコピーし、javascriptを「signup.js」というファイルにコピーしました。これらすべてのファイルを同じディレクトリに配置し、ブラウザに「signup.html」ファイルを開きました。ただし、CSSで定義されているスタイルのいずれも使用していないようであり、JavaScriptのアラートメッセージは「サインアップ」ボタンを押しても表示されません。

また、ユーザーが入力するものを記録できるように、これをどのように展開しますか？
HTMLファイルにCSSおよびJavaScriptファイルを含めるには、「signup.html」に以下を追加します。

`` html
<！doctype html>
<html>
    <head>
        <title>サインアップ</title>
        <link rel = "styleSheet" type = "text/css" href = "signup.css">
    </head>
    <body>
        <form id = "signup-form">

                ...

        </form>
        <スクリプトsrc = "signup.js"> </script>
    </body>
</html>
`` `

`signup.js`を更新して、フォームデータをサーバーに投稿する必要があります。

「JavaScript
const form = document.queryselector（ "＃signup-form"）;
const passwordinput = document.queryselector（ "＃password"）;
const passwordconfirminput = document.queryselector（ "＃password-confirm"）;

form.addeventlistener（ "submit"、（event）=> {
    event.preventdefault（）;

    if（passidentinput.value！== passwordconfirminput.value）{
        アラート（ "パスワードとパスワードの確認は一致しません。"）;
        戻る;
    }

    const firstname = document.queryselector（ "＃first-name"）。value;
    const lastname = document.queryselector（ "＃last-name"）。value;
    const email = document.queryselector（ "＃email"）。value;
    const phone = document.queryselector（ "＃phone"）。value;
    const password = passwordinput.value;

    let data = {
        ファーストネーム、
        苗字、
        Eメール、
        電話、
        パスワード
    }

    fetch（ 'signup'、{
        方法：「投稿」、
        ヘッダー：{
            「コンテンツタイプ」：「アプリケーション/json」
        }、
        ボディ：json.Stringify（データ）
    }）
        .then（res => res.json（））
        .then（res => {
            if（res.success）{
                // TODO：たとえば、ホームページにリダイレクトするなど、成功事例を処理します
            } それ以外 {
                // todo：エラーケースを処理し、ユーザーに指定された入力が無効であることを知らせてください
            }
            console.log（res.message）;
        }）
        .catch（err => {
            // todo：エラーケースを処理し、何かがうまくいかなかったことをユーザーに知らせてください
            console.log（err）;
        }）;
}）;
`` `

`signup.css`では、「css：」を含む行を誤って追加したことに注意してください。そのラインは削除する必要があります。謝罪。


展開するには、1つのオプションがExpressでnode.jsを使用することです。ファイルを作成 `server.js`：

「JavaScript
const express = require（ 'express'）;
const app = express（）;

const host = 'localhost';
const port = 8080;

// JSONペイロードによる着信要求の解析を有効にします
app.use（express.json（））;
// CSS、JS、画像などの静的ファイルを提供します...
//注：通常、静的リソースは「/public」フォルダーで提供されます
app.use（express.static（__ dirname））;

//サインアップルート
app.get（ '/signup'、（req、res）=> {
    res.sendfile（__ dirname + '/signup.html'）;
}）;
app.post（ '/signup'、（req、res）=> {
    if（validateignupbody（req.body））{
        // TODO：データベースに書き込むなど、サインアップデータを処理します。
        //注：DBに書き込む前にパスワードを暗号化してください！
        res.send（{success：true、message： 'signup complete！'}）;
    } それ以外 {
        res.send（{success：false、message： 'サインアップ失敗！'}）;
    }
}）;
const validatesignupbody =（body）=> {
    // TODO：受信したデータの正しさを検証します
    trueを返します。
}

app.listen（port、（err）=> {
    if（err）{
        console.log（ "サーバーの起動時のエラー"）;
    } それ以外 {
        console.log（ `サーバーはhttp：// $ {host}で実行されています：$ {port}`）;
    }
}）;
`` `

`npmインストールExpress`を使用してExpressをインストールします。
最後に、サーバーを実行します： `node server.js`。

これで、「http：// localhost：8080/signup」にアクセスして、サインアップページをテストする準備ができました。


これらは、機能と構造が欠けている単純な例のスクリプトであることに注意してください。実際のアプリケーションでは、コードの保守性を確保するために、コードとプロジェクトの構造が異なります。