Here's an example of how you could create a sign up form using HTML, CSS, and JavaScript with form validation:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer><script />
    <title>Sign up</title>
</head>
<body>
    <form id="signup-form">
        <div class="form-group">
          <label for="first-name">First Name:</label>
          <input type="text" id="first-name" name="first-name" required>
        </div>
        <div class="form-group">
          <label for="last-name">Last Name:</label>
          <input type="text" id="last-name" name="last-name" required>
        </div>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="phone">Phone Number:</label>
          <input type="tel" id="phone" name="phone" required>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
          <label for="confirm-password">Confirm Password:</label>
          <input type="password" id="confirm-password" name="confirm-password" required>
        </div>
        <button type="submit">Sign Up</button>
      </form>
</body>
</html>
```

```css
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

button[type="submit"] {
  padding: 0.5rem 1rem;
  background-color: lightblue;
  color: white;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}
```

```js
const form = document.querySelector("#signup-form");
const passwordInput = document.querySelector("#password");
const confirmPasswordInput = document.querySelector("#confirm-password");

form.addEventListener("submit", (event) => {
    event.preventDefault();

    const inputs = ["first-name", "last-name", "email", "phone", "password", "confirm-password"];
    const phoneRegex = new RegExp("[0-9][0-9| ]+");
    const values = [];

    for (const input of inputs) {
        const value = form.elements[input].value;

        if (!value) {
            return inputError(input);
        } else {
            form.elements[input].style.border = undefined;
        }

        values.push(value);
    }

    const emailValue = values[inputs.indexOf("email")];
    const phoneValue = values[inputs.indexOf("phone")];
    const passwordValue = values[inputs.indexOf("password")];
    const passwordConfirmValue = values[inputs.indexOf("confirm-password")];

    if (!emailValue.includes("@")) { return inputError("email") }


    if (!phoneRegex.test(phoneValue)) {return inputError("phone")}

    if (passwordValue !== passwordConfirmValue) {
        inputError("password");
        return inputError("confirm-password");
    }


});

function inputError(inputName) {
    form.elements[inputName].style.border = "1px solid red";
}
```
นี่คือตัวอย่างวิธีที่คุณสามารถสร้างแบบฟอร์มลงทะเบียนโดยใช้ HTML, CSS และ JavaScript พร้อมการตรวจสอบแบบฟอร์ม: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- 8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial-scale=1.0"> <link rel ="stylesheet" href="style.css"> <script src="script.js" defer><script /> <title>ลงทะเบียน</title> </head> <body> <form id="signup- แบบฟอร์ม"> <div class="form-group"> <label for="first-name">ชื่อ:</label> <input type="text" id="first-name" name="first-name " จำเป็น> </div> <div class="form-group"> <label for="last-name">นามสกุล:</label> <input type="text" id="last-name" name= "นามสกุล" จำเป็น> </div> <div class="form-group"> <label for="email">อีเมล:</label> <input type="email" id="email" name=" อีเมล" จำเป็น> </div> <div class="form-group"> <label for="phone">หมายเลขโทรศัพท์:</label> <input type="tel" id="phone" name="phone" จำเป็น> </div> <div class="form-group"> <label for="password">รหัสผ่าน:</label> <input type="password" id="password" name="password" required> < /div> <div class="form-group"> <label for="confirm-password">ยืนยันรหัสผ่าน:</label> <input type="password" id="confirm-password" name="confirm-password " จำเป็น> </div> <button type="submit">ลงทะเบียน</button> </form> </body> </html> ``` ```css .form-group { display: flex; ทิศทางแบบยืดหยุ่น: คอลัมน์; ขอบล่าง: 1rem; } ป้ายกำกับ { น้ำหนักแบบอักษร: ตัวหนา; ขอบล่าง: 0.5rem; } อินพุต [type = "ข้อความ"], อินพุต [ประเภท = "อีเมล"], อินพุต [ประเภท = "tel"], อินพุต [type = "รหัสผ่าน"] { การขยาย: 0.5rem; ขนาดตัวอักษร: 1rem; รัศมีชายแดน: 0.25rem; เส้นขอบ: 1px สีเทาทึบ; } ปุ่ม [type = "ส่ง"] { การขยาย: 0.5rem 1rem; สีพื้นหลัง: ฟ้าอ่อน; สี: ขาว; รัศมีชายแดน: 0.25rem; เส้นขอบ: ไม่มี; เคอร์เซอร์: ตัวชี้; } ``` ```js const form = document.querySelector("#signup-form"); const รหัสผ่านInput = document.querySelector("#password"); const ConfirmPasswordInput = document.querySelector("#confirm-password"); form.addEventListener("submit", (event) => { event.preventDefault(); const inputs = ["ชื่อ", "นามสกุล", "อีเมล", "โทรศัพท์", "รหัสผ่าน", "ยืนยัน -password"]; const phoneRegex = new RegExp("[0-9][0-9| ]+"); ค่า const = []; for (const อินพุตของอินพุต) { const value = form.elements[input] .value; if (!value) { return inputError(input); } else { form.elements[input].style.border = undefinition; }values.push(value); } const emailValue = ค่า[inputs.indexOf(" อีเมล")]; const phoneValue = ค่า [inputs.indexOf("โทรศัพท์")]; const รหัสผ่านValue = ค่า [inputs.indexOf("รหัสผ่าน")]; const รหัสผ่านConfirmValue = ค่า [inputs.indexOf("ยืนยันรหัสผ่าน") ]; if (!emailValue.includes("@")) { return inputError("email") } if (!phoneRegex.test(phoneValue)) {return inputError("phone")} if (passwordValue !== รหัสผ่านConfirmValue) { inputError("password"); return inputError("confirm-password"); } }); ฟังก์ชั่น inputError (ชื่ออินพุต) { form.elements [inputName].style.border = "1px solid red"; } ```
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence