HTML Checkbox não alinha com os outros campos.

Air-Gear · 5 de setembro de 2019

Olá pessoa!

Eu fiz um formulário conforme me pedira e agarrei na parte do checkbox. Isso porque ele precisa ficar alinhado a esquerda dos campos, mas ficou centralizado. EU tentou mudar, mas acaba desconfigurando tudo que fiz. Alguém pode me ajudar? O código.


<!DOCTYPE html>
<html>
	<head>
		<title>Formulário de Teste</title>
		<meta charset="utf-8">
		<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="topo">
			<div class="topointerior">
				<div class="logomarca">
					Formulário de teste
				</div>
			</div>
		</div>
		<form name="formulario" id="formulario" method="POST">
			<label for="data">Data:</label>
			<input type="date" name="data" placeholder="Digite a data" autofocus maxlength="30" required autocomplete="off"><br><br>

			<label for="texto">Texto:</label>
			<input type="text" name="texto" placeholder="Digite um texto" required><br><br>

			<label for="checkbox">Checkbox:</label>
			<input type="checkbox" name="checkbox" placeholder="" required><br><br>

			<label for="textogrande">Texto grande:</label>
			<textarea name="textogrande" placeholder="Digite um texto grande" required></textarea><br><br>
			<div class="button">
				<button type="submit">Submit</button>
			</div>
		</form>
	</body>
</html>

/*A fonte-base em todo o site sera Arial*/
* {
	font-family:Arial;
}

body{
	margin:0;
	padding:0;
	background-color:#DDD;
}

/*Cabeçalho do site*/
.topo{
	height:141px;
	background-image: url("./topo.png");
	background-repeat: repeat-x;
}

/*Cria um retangulo transparente que centraliza todo o conteudo*/
.topointerior{
	padding-top:47px;
	width:1000px;
	margin:auto;
	color:#FFFFFF;
}

/*Logomarca na posição esquerda*/
.logomarca{
	float:left;
	font-size:24px;
	line-height:50px; /*Centralizar a logomarca verticalmente */
}

form{
	width:970px;
	height:350px;
	margin:auto;
	padding:20px;
	background-color:#FFFFFF;
}

input{
	padding:5px;
	font-size:13px;
}

form div + div {
    margin-top: 1em;
}

label {
    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
    display: inline-block;
    width: 120px;
}

input, textarea {
    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
    font: 1em sans-serif;

    /* Para dar o mesmo tamanho a todos os campo de texto */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Para harmonizar o look & feel das bordas nos campos de texto*/
    border: 1px solid #999;

    /* Para ver as bordas do input */
	border: 1px solid #CCC;
	border-radius: 10px;
}

input:focus, textarea:focus {
    /* Dar um pouco de destaque nos elementos ativos */
    border-color: #000;
}

textarea {
    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
    vertical-align: top;

    /* Para dar espaço suficiente para digitar algum texto */
    height: 10em;

    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
    resize: vertical;
}

.button {
    /* Para posicionar os botões para a mesma posição dos campos de texto */
    padding-left: 120px; /* mesmo tamanho que os elementos do tipo label */
}
button {
    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
    margin-left: .5em;
    padding: 5px 20px 5px 20px;
}

DiF · 5 de setembro de 2019

@Air-Gear Olá, poderia postar um print do problema para ser visualizado?

Desta forma, fica mais fácil de dizer como resolver

Air-Gear · 6 de setembro de 2019

@dif

gramosiri · 6 de setembro de 2019

@Air-Gear oi, pelo o que percebi o problema está no width do input, textarea arquivo style.css

input, textarea {
    font: 1em sans-serif;
    width: 300px; /******* AQUI ********/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
	border: 1px solid #CCC;
	border-radius: 10px;
}

Você esta dando um tamanho de 300px pra todos os inputs, testei o input do checkbox separado com uma class para os inputs e deu certo. Veja:

<input class="check" type="date" name="data" placeholder="Digite a data" autofocus maxlength="30" required autocomplete="off"><br><br>

Segue os dois arquivos para melhor entendimento:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Formulário de Teste</title>
		<meta charset="utf-8">
		<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="topo">
			<div class="topointerior">
				<div class="logomarca">
					Formulário de teste
				</div>
			</div>
		</div>
		<form name="formulario" id="formulario" method="POST">
			<label for="data">Data:</label>
			<input class="check" type="date" name="data" placeholder="Digite a data" autofocus maxlength="30" required autocomplete="off"><br><br>

			<label for="texto">Texto:</label>
			<input class="check" type="text" name="texto" placeholder="Digite um texto" required><br><br>

			<label for="checkbox">Checkbox:</label>
			<input class="check" type="checkbox" name="checkbox" placeholder="" required><br><br>

			<label for="textogrande">Texto grande:</label>
			<textarea name="textogrande" placeholder="Digite um texto grande" required></textarea><br><br>
			<div class="button">
				<button type="submit">Submit</button>
			</div>
		</form>
	</body>
</html>

CSS

/*A fonte-base em todo o site sera Arial*/
* {
	font-family:Arial;
}

body{
	margin:0;
	padding:0;
	background-color:#DDD;
}

/*Cabeçalho do site*/
.topo{
	height:141px;
	background-image: url("./topo.png");
	background-repeat: repeat-x;
}

/*Cria um retangulo transparente que centraliza todo o conteudo*/
.topointerior{
	padding-top:47px;
	width:1000px;
	margin:auto;
	color:#FFFFFF;
}

/*Logomarca na posição esquerda*/
.logomarca{
	float:left;
	font-size:24px;
	line-height:50px; /*Centralizar a logomarca verticalmente */
}

form{
	width:970px;
	height:350px;
	margin:auto;
	padding:20px;
	background-color:#FFFFFF;
}

input{
	padding:5px;
	font-size:13px;
}

form div + div {
    margin-top: 1em;
}

label {
    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
    display: inline-block;
    width: 120px;
}

textarea {
    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
    font: 1em sans-serif;

    /* Para dar o mesmo tamanho a todos os campo de texto */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Para harmonizar o look & feel das bordas nos campos de texto*/
    border: 1px solid #999;

    /* Para ver as bordas do input */
	border: 1px solid #CCC;
	border-radius: 10px;
}
.check {
    font: 1em sans-serif;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    border: 1px solid #CCC;
    border-radius: 10px;
}

input:focus, textarea:focus {
    /* Dar um pouco de destaque nos elementos ativos */
    border-color: #000;
}

textarea {
    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
    vertical-align: top;

    /* Para dar espaço suficiente para digitar algum texto */
    height: 10em;

    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
    resize: vertical;
}

.button {
    /* Para posicionar os botões para a mesma posição dos campos de texto */
    padding-left: 120px; /* mesmo tamanho que os elementos do tipo label */
}
button {
    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
    margin-left: .5em;
    padding: 5px 20px 5px 20px;
}