65aab4db-9cd7-4814-842a-5ede4f798861
prompter
how to create a sign up form using HTML and CSS and JS , the sign up form should ask for the following information : 
- first name
- last name
- email adress
- phone number 
- password 
- password confirmation
use form validation to avoid getting false information
fdd1e6c7-605c-4ba7-82cd-ccaaf6dfe4de
65aab4db-9cd7-4814-842a-5ede4f798861
assistant
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";
}
```