Why are HTML Div Tags in my code not working? [closed]-CodePudding

I need to put a div tag around each form field and label text; however, for some reason HTML is not recognizing the tags and so I was wondering what am I doing wrong?

<!DOCTYPE html>
<html lang="en">
<title>Join a social network</title>
<link rel="stylesheet" href="styles.css">

<body>
   <h1>Join a social network</h1>

  

   <form action="https://wp.zybooks.com/form-viewer.php" method="POST" enctype="multipart/form-data"></form>

    <div>
      <label for = "fullName">Full Name: </label>
      <input type="text" id="fullName" name="fullName" required>
    </div>

    <div>
      <label for = "email">Email address: </label>
      <input type="text" id="email" name="email" required>
    </div>

    <div>
      <label for = "about">About you: </label>
      <input type="textarea" id="about" name="about" rows="3" cols="50">
    </div>

    <div>
      <label for = "picture">Photo: </label>
      <input type="file" id="picture" name="Photo">
    </div>

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

</body>


</html>

CodePudding user response：

You have closed your form just after creating it! You need to put the input tags with labels inside the form tag! Hope this helps(^_^)

CodePudding user response：

div {
  border: solid 1px #f00;
}

<!DOCTYPE html>
<html lang="en">
<title>Join a social network</title>
<link rel="stylesheet" href="styles.css">

<body>
  <h1>Join a social network</h1>



  <form action="https://wp.zybooks.com/form-viewer.php" method="POST" enctype="multipart/form-data">

    <div>
      <label for="fullName">Full Name: </label>
      <input type="text" id="fullName" name="fullName" required>
    </div>

    <div>
      <label for="email">Email address: </label>
      <input type="text" id="email" name="email" required>
    </div>

    <div>
      <label for="about">About you: </label>
      <input type="textarea" id="about" name="about" rows="3" cols="50">
    </div>

    <div>
      <label for="picture">Photo: </label>
      <input type="file" id="picture" name="Photo">
    </div>

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


</html>

I added a border to the divs. It seems that they are working fine. Also, you closed the <form> as soon as you opened it.

CodePudding user response：

Add all the div tags inside form tag. As your all the div tags are outside the form, it is not able to control the divs.