our logo - study4details

comprehensive study approach

HTML: How to make forms

A form usually have inputs and labels that describe the inputs. Inputs enables us put data in a predefined containers for further processing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <h2>Registration Form</h2>
    <form action="submit.php" method="POST">
        <label for="firstname">First Name:</label><br>
        <input type="text" id="firstname" name="firstname" required><br><br>
        
        <label for="secondname">Second Name:</label><br>
        <input type="text" id="secondname" name="secondname"><br><br>
        
        <label for="surname">Surname:</label><br>
        <input type="text" id="surname" name="surname" required><br><br>
        
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="dob">Date of Birth:</label><br>
        <input type="date" id="dob" name="dob" required><br><br>
        
        <label for="enrollment_date">Enrollment Date:</label><br>
        <input type="date" id="enrollment_date" name="enrollment_date" required><br><br>
        
        <label for="mobile_number">Mobile Number:</label><br>
        <input type="tel" id="mobile_number" name="mobile_number" pattern="[0-9]{10}" required><br><br>
        
        <label for="resident_area">Resident Area:</label><br>
        <input type="text" id="resident_area" name="resident_area" required><br><br>
        
        <label for="region">Region:</label><br>
        <input type="text" id="region" name="region" required><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this form:
Each input field (<input>) is associated with a <label> for better accessibility.
The required attribute is used for fields that must be filled out before submitting the form.
The form action attribute is set to “submit.php”, which means when the form is submitted, it will send the data to a PHP script named submit.php.
The PHP script (submit.php) will receive the form data using $_POST method, where you can process the submitted data.
Remember to create a submit.php file where you can handle the form submission and process the data sent from this HTML form.

Styling the form

The form on itself won’t look good on the browser. Just like a great structure without painting. We need to make it appealing by painting it using the CSS.

Creating a professional-looking form involves several design considerations such as layout, typography, colors, and spacing. Here’s a basic example of CSS styles that you can apply to your form to achieve a professional appearance:

/* Resetting default browser styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f0f0f0;
  padding: 20px;
}

/* Form container styles */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Form title styles */
.form-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Form input styles */
.form-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Form submit button styles */
.form-submit {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.form-submit:hover {
  background-color: #45a049;
}

/* Form fieldset and legend styles (optional for grouping) */
fieldset {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
}

legend {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Form labels styles */
label {
  font-weight: bold;
}

/* Optional: Responsive design */
@media (max-width: 768px) {
  .form-container {
    width: 90%;
  }
}

Form Centering: form is styled to be a flex container with flex-direction: column, which stacks its children vertically. align-items: center centers items horizontally within the form, and justify-content: center centers items vertically, making the form centered on the page.

Label Styling: label elements within the form are styled with font-weight: bold to make them bold and color: blue to make their text blue.

Input Styling: input elements within the form have border: 2px solid black to create a bold border around each input field. font-weight: bold ensures that the text inside inputs is bold. Padding and margin are adjusted to provide spacing around the inputs.

Explanation:

  1. Reset Styles: The * selector is used to reset default styles and ensure consistent box sizing.
  2. Body Styles: Sets a basic font, line height, and background color for the body.
  3. Form Container: Defines a centered container (form-container) with a white background, padding, rounded corners, and a subtle box shadow for depth.
  4. Form Title: Styles the form title (form-title) with a larger font size, bold weight, and bottom margin.
  5. Form Inputs: Basic styling for form inputs (form-input) with padding, border, and rounded corners.
  6. Submit Button: Styled as a green button (form-submit) with white text, padding, rounded corners, and hover effect.
  7. Fieldset and Legend (optional): Provides additional styling for grouping form elements.
  8. Labels: Styles labels (label) with bold font weight.
  9. Responsive Design: Includes a media query for smaller screens to adjust the form container width.

How to integrate the CSS into the html?

Link your CSS file to HTML:

In your HTML file, use the <link> tag to include the CSS file. Place this <link> tag inside the <head> section of your HTML document. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, CSS!</h1>
    <p>This is a simple example of linking CSS to HTML.</p>
</body>
</html>

In this example, the <link> tag specifies the rel attribute as "stylesheet" to indicate it’s linking to a stylesheet. The href attribute specifies the path to your CSS file (styles.css in this case). If your CSS file is in the same directory as your HTML file, you can just use the filename. If it’s in a different directory, specify the relative path from the HTML file to the CSS file.

More posts