An HTML form is used to create a user interface for web applications. It allows users to input data, which can then be sent to a server for processing. CSS (Cascading Style Sheets) is used to style and layout the form, while JavaScript is used to add interactivity and dynamic behavior to the form, such as form validation and submission. Together, these technologies can be used to create user-friendly and responsive forms for web applications. Here I have shared a simple form using html css and JavaScript.

Example of Simple HTML Form

Here is an example of a simple HTML form that uses CSS for styling and JavaScript for form validation:

HTML:

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" required>
  <br>
  <input type="submit" value="Submit">
</form>

CSS:

#myForm {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 0 auto;
}
label {
  display: block;
  margin-bottom: 10px;
}
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript:

const form = document.getElementById("myForm");
form.onsubmit = function(e) {
  e.preventDefault();
  if (form.checkValidity()) {
    alert("Form submitted successfully!");
  } else {
    alert("Please fill out all fields correctly.");
  }
};

Output:




This is a simple example and can be more complex, but it gives you an idea of how the three technologies can be used together to create a functional form.

Also Read:

Categorized in:

HTML & CSSJavaScript

Tagged in:

, , ,