<form> displaying elements horizontally-CodePudding

I was learning html and I tried to create really simple login page
because I am using php along side I used form to call php later
but then I created form and but some inputs there is display them
next to each other in one line instead one on top of others
Code:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <title>CAW - Logowanie</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <form id="login_form" method="post">
        <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/>

        <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;"/>

        <input type="submit" value="Zalogój się"/>
    <form>

</body>
</html>

How it is looking:

What I expect:

CodePudding user response：

There are several ways to get the result you are looking for. I have listed a couple of the more common ones below:

Method 1: Display Grid

Like many before me have said, applying a display of grid to the form element will cause things within the form to be displayed in a column order by default. This does have the unfortunate result of stretching everything out to the full width of the form as well however.

.form-grid {
  display: grid;
}

.form-grid input {
  margin: 5px;
}

<!-- Display Grid -->
<form id="login_form" method="post" >
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

If elements stretching to the full width is not something you want, but you still want to use display: grid;, you can use additional content boxes within the form to keep those things from stretching:

.form-grid {
  display: grid;
}

.form-grid input {
  margin: 5px;
}

<!-- Display Grid with Inner Boxes -->
<form id="login_form" method="post" >
  <div>
    <input type="text" name="login" placeholder="E-Mail"/>
  </div>
  <div>
    <input type="password" name="passwd" placeholder="Hasło"/>
  </div>
  <div>
    <input type="submit" value="Zalogój się"/>
  </div>
<form>

This results in something a little closer to the screenshot you provided.

Method 2: Display Flex Flex Flow Column

The second method you could use is display: flex; with the flex-flow property set to column. This takes the flexibility of display: flex and aligns the elements within it vertically:

.form-flex {
  display: flex;
  flex-flow: column;
  
  /* additionally you can add this to keep the full width issue from happening */
  align-items: start;
}

.form-flex input {
  margin: 5px;
}

<!-- Display Flex   Column -->
<form id="login_form" method="post" >
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

Method 3: Display Block Inputs

The third method you could use is to give each input within a form a display: block property:

.form-block-inputs input {
  display: block;
  
  margin: 5px;
}

<!-- Display Block Inputs -->
<form id="login_form" method="post" >
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

Method 4: The Bad One

The final method that you technically could use (although I'd strongly encourage you didn't) is to add a line-break after each input (with the <br> tag). While this technically does achieve the result you were looking for, it's hacky and could cause problems if you need to scale this form out any further or display it on other screen sizes.

#login_form input {
  margin: 5px;
}

<!-- The Bad One -->
<form id="login_form" method="post">
  <input type="text" name="login" placeholder="E-Mail"/>
  <br>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <br>
  <input type="submit" value="Zalogój się"/>
<form>

Hopefully this was helpful. Please let me know if you need any further clarification on any of these!

CodePudding user response：

I used display: grid; in the parent element (in this case <form>)

and automatically will be like you want

<form style="display: grid;" id="login_form" method="post">
  <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;" />

  <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;" />

  <input type="submit" value="Zalogój się" />
</form>

CodePudding user response：

    <!DOCTYPE HTML>
    <html lang="pl">
    <head>
        <meta charset="utf-8"/>
        <title>CAW - Logowanie</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    
        <form id="login_form" method="post">
            <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/><br>
    
            <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;"/><br>
    
            <input type="submit" value="Zalogój się" style="margin: 5px 0 0 5px"/>
        <form>
    
    </body>
    </html>

CodePudding user response：

What you need to do is just wrap the input and the button inside a tag separately and give whitespace tp divs, not the input elements.

Check the following code

    <form id="login_form" method="post">
            <div style="margin-bottom: 10px;"><input type="text" name="login" placeholder="E-Mail"/></div>
            <div style="margin-bottom: 10px;"><input type="password" name="passwd" placeholder="Hasło"/></div>
            <div><input type="submit" value="Zalogój się"/></div>
<form>