Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Basic Form Template



Happy Coding!
CODE:

  <!DOCTYPE html>
  <html lang="en-us">
  <head>
    <!-- Meta Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="custom.css">
    <!-- Page Title-->
    <title>Coding Commanders</title>
    <style>
      /*Form class*/
      form.myForm {
        border-style: double;
        border-color: #050937;
        border-width: 1px;
        color: #050937;
        padding-left: 15px;
        padding-bottom: 15px;
      }

      /* Question labels*/
     .redLabel {
       color: darkred;
       font-size: 16px;
       font-weight:800;
     }
    </style>
  </head>
  <body>
    <!-- Form-->
    <form class= "myForm" method= "post" action= "main.php">
        <h2>Form Heading</h2>
         <!-- Text imput field-->
         <label class = "redLabel" for = "firstName">First Name</label><br>
         <input type="text" name="firstName" placeholder="First Name" required><br>
         <label class = "redLabel" for = "lastName">Last Name</label><br>
         <input type="text" name="lastName" placeholder="Last Name"><br>
         <label class = "redLabel" for = "userEmail">Email Address:</label><br>
          <input type="email" name="userEmail" placeholder="youremail@email.com" required><br>
         <br><br>
         <!-- Select-->
         <label class = "redLabel" for = "mySelect">Question or Heading</label><br>
         <select name = "mySelect">
            <option>
            <option for = "mySelect" value = "1">Option 1</option>
            <option for = "mySelect" value = "2">Option 2</option>
            <option for = "mySelect" value = "3">Option 3</option>
            <option for = "mySelect" value = "4">Option 4</option>
         </select><br>
         <br><br>
         <!-- Radio buttons-->
         <label class = "redLabel" for = "myRadio">Question or Heading</label><br>
            <input type = "radio" name = "myRadio" value = "1">Option 1<br>
            <input type = "radio" name = "myRadio" value = "2">Option 2<br>
            <input type = "radio" name = "myRadio" value = "3">Option 3<br>
            <input type = "radio" name = "myRadio" value = "4">Over 100<br>
        <br><br>
        <!-- Checkboxes-->
        <label class = "redLabel" for = "myChecks">Question or Heading</label><br>
           <input type = "checkbox" name = "myChecks" value = "1">  Option 1<br>
           <input type = "checkbox" name = "myChecks" value = "2">  Option 2<br>
           <input type = "checkbox" name = "myChecks" value = "3">  Option 3<br>
         <br><br>
        <!-- Submit Button-->
        <input type="submit" value="Submit">
      </form>
    </body>
  </html>