How to make form in HTML and CSS

How to make form in HTML and CSS

How to make form in HTML and CSS – In this article, we are going to talk about How to make the form in HTML and CSS. This content is going to be very helpful. In this context, all your doubts will also be get cleared. So, read this article till last.

How to make form in HTML and CSS
How to make form in HTML and CSS

What is HTML?

HTML (Hypertext Markup Language) is the standard language used to create web pages. It provides a structure for the content on a webpage, such as headings, paragraphs, and links. HTML uses tags, which are enclosed in angle brackets < >, to define the different elements on a webpage. For example, an H1 tag is used to create a level 1 heading, and a P tag is used to create a paragraph.

HTML also allows you to add images, videos, and other multimedia to a webpage, as well as create links to other pages or websites. Additionally, it provides a way to create forms for user input, such as text fields, checkboxes, and buttons.

HTML documents are typically saved with the .html or .htm file extension and are rendered by web browsers such as Chrome, Firefox, and Safari. It’s important to note that HTML alone is only responsible for the structure and content of a website and not its design.

In recent years, HTML has been updated to include new features, such as HTML5, which is an updated version of the language that adds new tags and features, such as video playback and offline storage. HTML5 aims to improve the semantic structure of documents and make them more accessible to users and search engines.

Overall HTML is the backbone of a website, it provides the structure and content for a webpage, and it’s the starting point for any website. With the help of CSS and JavaScript, it’s possible to create visually appealing and interactive websites.

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the layout and design of a webpage. It allows you to apply styles (such as colours, fonts, and spacing) to the HTML elements on a webpage, separating the presentation of a website from its structure. This separation of concerns allows you to make changes to the visual design of a website without affecting the underlying HTML structure.

CSS uses selectors to target specific HTML elements, and then applies styles to those elements. The styles can be specified in a separate CSS file, or directly within the HTML document. CSS selectors can be based on the element type, class, or id, allowing you to target specific groups of elements or individual elements.

CSS provides a wide range of properties and values that can be used to control the layout, colour, and typography of a webpage. It also enables you to create responsive designs, which adapt to different screen sizes and devices. Additionally, CSS provides features like animations and transitions to create dynamic effects on web pages.

With the help of CSS, it’s possible to create visually appealing and consistent designs across multiple web pages, making it easier to maintain and update a website. CSS is a widely-used and powerful tool, used by web developers to create visually attractive and responsive web pages.

How to create forms in HTML?

Creating forms in HTML is relatively simple. The basic structure of a form consists of an <form> element, which encloses the form‘s controls and inputs. The <form> element has several attributes, such as action and method, which specify where the form data is sent and how it is sent.

Here is an example of a basic form with text input, password input, and a submit button:

Copy code<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">
</form>

In this example, the form has two text inputs, one for the username and one for the password, and a submit button. The “label” element is used to create a label for each input field, this is important for accessibility, so users can understand what information is expected on each field.

Forms can also include other types of inputs, such as checkboxes, radio buttons, and select lists. Here is an example of a form with a select list:

Copy code<form>
  <label for="gender">Select your gender:</label>
  <select id="gender" name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <input type="submit" value="Submit">
</form>

It’s also possible to create forms that allow file uploads, by using the “input” element with the “file” type.

Copy code<form>
  <label for="file">Upload a file:</label>
  <input type="file" id="file" name="file">
  <input type="submit" value="Submit">
</form>

How to use CSS in HTML form?

There are several ways to use CSS in an HTML form. One way is to create a separate CSS file and link it to your HTML document using the <link> tag. For example:

Copy code<link rel="stylesheet" type="text/css" href="styles.css">

Another way is to include the CSS styles directly within the HTML document using the <style> tag. For example:

Copy code<head>
  <style>
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
    }
  </style>
</head>

To apply styles to specific form elements, you can use CSS selectors to target them. For example, to style all text inputs on a form, you can use the input[type=text] selector. To style a specific input by its id, you can use the “#” symbol before the id, like this: “#myinput”, and to style a specific input by its class, you can use the “.” symbol before the class name, like this: “.myinput”.

Here’s an example of how you can use CSS to style a form:

Copy code<form>
  <label for="name">Name:</label>
  <input type="text" id="name" class="form-input">

  <label for="email">Email:</label>
  <input type="email" id="email" class="form-input">

  <input type="submit" value="Submit">
</form>
Copy code.form-input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

#name {
  border: 2px solid blue;
}

#email {
  border: 2px solid green;
}

With this example, the class form input will be applied to all inputs, while the ids name and email will have different borders, blue and green respectively. It’s important to note that is possible to use CSS to style forms in many different ways, these are just some examples, you can use CSS to change the layout, colour, and typography of a form, and also create dynamic effects with animations and transitions.

How to create a form using HTML and CSS Javascript?

Creating a form using HTML, CSS, and JavaScript involves several steps:

  1. Create the HTML structure for the form: This includes creating the <form> element, and adding the various form controls and inputs, such as text inputs, checkboxes, and submit buttons.
  2. Style the form using CSS: Use CSS to control the layout, colour, and typography of the form and its elements. You can use CSS selectors to target specific form elements and apply styles to them.
  3. Add interactivity and validation using JavaScript: Use JavaScript to add interactivity to the form, such as form validation, which checks if the form’s inputs contain valid data before submitting the form. You can also use JavaScript to add dynamic effects and animations to the form.

Here’s an example of a basic form with text input, a password input, and a submit button, styled with CSS, and with a simple validation using JavaScript:

HTML

Copy code<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" class="form-input">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" class="form-input">

  <input type="submit" value="Submit" id="submit-btn" class="form-submit">
</form>

CSS

Copy code.form-input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
.form-submit {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
}

JavaScript

Copy codeconst submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function(e) {
  e.preventDefault();
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  if (username === "" || password === "") {
    alert("Please fill out all fields");
  } else {
    alert("Form submitted successfully

Also, Read

Leave a Comment