How do you get a form down?

Asked

Viewed 1,140 times

1

I have this form:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Jornal Web</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="apple-touch-icon" sizes="180x180" href="galery/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="galery/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="galery/favicon-16x16.png">
    <link rel="manifest" href="galery/manifest.json">
    <link rel="mask-icon" href="galery/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/carousel.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">

    </style>
</head>
<body>
<div class="container">
    <form class="form-horizontal" method="post" action="/login">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h2>Entrar no Jornal Web</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group has-danger">
                    <label>Digite seu e-mail</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="text" name="email" class="form-control" id="email"
                               placeholder="[email protected]" required autofocus>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Digite sua senha</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="password" name="password" class="form-control" id="password"
                               placeholder="********" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" style="padding-top: .35rem">
                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                    <label class="form-check-label">
                        <input class="form-check-input" name="remember"
                               type="checkbox">
                        <span style="padding-bottom: .15rem">Lembrar-me</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" style="padding-top: 1rem">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <button type="submit" class="btn btn-success"><i class="fa fa-sign-in"></i> Login</button>
            </div>
        </div>
    </form>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.form-control').on('focus blur', function (e) {
            $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
        }).trigger('blur');
    });
</script>
</body>
</html>

Which I am developing for a login page. However in the version desktop, the form as well as the whole page is very up, and I would like to scroll down a bit the position of it.

I used some <br> but it seems wrong to use it this way. How to change through CSS?

html css

4 answers

3


To position elements use CSS. O <br> shall be used in word line breaking, as its name suggests. Use for example style="padding-top: 150px;" in his <body>, to position the way you want, or through the tag <style>:

body{
    padding-top: 150px;
}

You can also use the measures with percentage, for example:

body{
    padding-top: 15%;
}

Which brings greater responsiveness to your page and adaptation to different devices, and which I recommend using.

You can also use the margin instead of padding depending on the situation:

body{
    margin-top: 15%;
}

Values are all assumptions, adapt to what is needed.

If you don’t know the difference between margin and padding, recommend reading of that answer.

Related

1

Following the logic of little fella up there, If you don’t stay where you’re supposed to be, you can use:

<style>
    form
    {
        margin-top:50px;
        display:table;
    }
</style>

0

Try to use:

<head>
    ...
    <style>
        form {
            margin-top: 50px;
        }
    </style>
</head>

0

If you prefer, you could also use the property "position", with the value "relative" and resetting the position of the form from the top property. 

form{
 position: relative;
 top: 10%;
}

However, the most recommended way would be through '
' or even by the 'margin-top'.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.