Question 177601 in Html Question posted in
Some basic documentation can be found here.

Why is the submit button not aligned with the input text in my HTML form?

The submit button is not under input text.enter image description here[enter imaenter image description herege description here](https://phpout.com/wp-content/uploads/2023/05/oCsgK.png)enter image description here

Illustrate code if possible so that I could learn from its logic.

Tags:

2

Answers


  1. 0

    check it here, it is look normal example

    

    

    

    #title{
  font-size: 64px;
  color: black;
  font-family: 'Times New Roman';
}
form{
  border-color: black;
  box-shadow: 5px 5px 5px;
  justify-content: center;
  width: 500px;
  height: 500px;
  align-items: center;
  position: absolute;
  background-color: burlywood;
  right: 0;
  left: 0;
}
    

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/action_page.php">
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="John" /><br />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
      <input type="submit" value="Submit" />
    </form>
    <script src="./index.js"></script>
  </body>
</html>
    

    

    

    

    here if you don’t know how to write the code snippet on StackOverflow question
    

    for short code use this character  write code between “`
    Login or Signup to reply.
  2. 0

    You didn’t close your head tag,form tag.

    place this in your todo.css

    #title {
    font-size: 64px;
    color: black;
    font-family: 'Times New Roman' Times, serif;
}
    
form {
    border-color: black;
    box-shadow: 5px 5px 5px;
    justify-content: center;
    width: 500px;
    height: 500px;
    align-items: center;
    position: absolute;
    background-color: burlywood;
    right: 0;
    left: 0;
}

    place this in your todo.js

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="todo.css">
</head>
<body>
    <form  id="form">
        <h3 id="title" style="text-align: center;">To-Do List</h3>
        <h3 id="label" style="text-align: center;">Input List</h3>
        <input type="text" id="input" >
        <button for="input" id="submit">Submit</button>
        <label for="" id="list"></label>
    </form>
    <script src="todo.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search