CODEWITHSUNDEEP
htmlcss
Jason Pallone
Jason Pallone

Reputation: 75

Align label to top of input inside of form element?

I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?

This is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

Thank you!

Upvotes: 1

Views: 163

Answers (1)

Always Helping
Always Helping

Reputation: 14570

This is what you need. display: block

Just use CSS property display: block to show labels on top of your element and on left side as you wanted.

Just run snippet to see it in action.

label { 
   display:block;
}

button {
   display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

</body>
</html>

Hope this help.

Upvotes: 1

Related Questions