Pacato
Julho 27, 2016, 6:31pm
#1
Olá, estou criando um formulário com bootstrap e estou querendo alinhar um text area, com 3 input text, onde o text area ficaria do lado destes 3 campos, mas não consigo, o text area fica alinhado com o primeiro campo depois o 2 e o 3 input text fica abaixo do text area e nao do tamanho exato do lado
<div class="row">
<div class="form-group col-md-3">
<label for="objetivo">Objetivo</label>
<textarea name="objetivo" id="objetivo" class="form-control" rows="5" placeholder="Objetivo" required></textarea>
</div>
<div class="form-group col-md-3">
<label for="descricao">Descrição</label>
<textarea name="descricao" id="descricao" class="form-control" rows="5" placeholder="Descrição" required></textarea>
</div>
<div class="form-group col-md-3">
<label for="posicionamento">Posicionamento</label>
<textarea name="posicionamento" id="posicionamento" class="form-control" rows="5" placeholder="Posicionamento" required></textarea>
</div>
<div class="form-group col-md-3">
<label for="observacao">Observação</label>
<textarea name="observacao" id="observacao" class="form-control" rows="5" placeholder="Observação" required></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="envolvidosNome1">Envolvidos</label>
<input type="text" class="form-control" required value="" id="nomEnvolvidos1" placeholder="Nome">
</div>
<div class="form-group col-md-2">
<label for="envolvidosArea1"> </label>
<input type="text" class="form-control" required value="" id="envolvidosArea1" placeholder="Área/Empresa">
</div>
<div class="form-group col-md-2">
<label for="envolvidosTel1"> </label>
<input type="text" class="form-control" required value="" id="envolvidosTel1" placeholder="Telefone">
</div>
<div class="form-group col-md-4">
<label for="observacao">Observação (Envolvidos)</label>
<textarea name="EnvolvidosObservacao" id="EnvolvidosObservacao" class="form-control" rows="5" placeholder="Observação" required></textarea>
</div>
</div>
Pacato:
<div class=“row”>
<div class="row">
<div class="form-group col-md-3">
<label for="envolvidosNome1">Envolvidos</label>
<input type="text" class="form-control" required value="" id="nomEnvolvidos1" placeholder="Nome">
</div>
<div class="form-group col-md-2">
<label for="envolvidosArea1"> </label>
<input type="text" class="form-control" required value="" id="envolvidosArea1" placeholder="Área/Empresa">
</div>
<div class="form-group col-md-2">
<label for="envolvidosTel1"> </label>
<input type="text" class="form-control" required value="" id="envolvidosTel1" placeholder="Telefone">
</div>
<div class="form-group col-md-4">
<label for="observacao">Observação (Envolvidos)</label>
<textarea name="EnvolvidosObservacao" id="EnvolvidosObservacao" class="form-control" rows="5" placeholder="Observação" required></textarea>
</div>
</div>
Vejo que está criando um formulario, para eu entender melhor oq deseja me diga porque tantas divs?
Pacato
Julho 29, 2016, 5:27pm
#3
É que não manjo muito e fui criando de um modelo da net.
ok, blz… olha vc já tinha id nos forms não precisa dessas divs. para alinhas é bom usar css. olha o seu formulario oq fiz nele. la no topo criei um campo de estilo.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Meu Formulario</title>
<style>
.alinhamento{
display: inline-block;
width: 120px;
}
</style>
</head>
<body>
<form>
<fieldset> <legend> Tabela</legend>
<p><label for="objetivo" class="alinhamento">Objetivo:;</label><textarea name="objetivo" id="objetivo" class="form-control" rows="5" placeholder="Objetivo" required="required"> </textarea></p>
<p> <label for="descricao" class="alinhamento">Descrição:</label><textarea name="descricao" id="descricao" class="form-control" rows="5" placeholder="Descrição" ></textarea></p>
<p><label for="posicionamento" class="alinhamento">Posicionamento:</label><textarea name="posicionamento" id="posicionamento" class="form-control" rows="5" placeholder="Posicionamento" required></textarea></p>
<p><label for="observacao" class="alinhamento">Observação:</label>
<textarea name="observacao" id="observacao" class="form-control" rows="5" placeholder="Observação" required></textarea></p>
<p><label for="envolvidosNome1" class="alinhamento">Envolvidos</label>
<input type="text" class="form-control" required value="" id="nomEnvolvidos1" placeholder="Nome"></p>
<p><label for="envolvidosArea1" class="alinhamento">Envolvidos(2)</label>
<input type="text" class="form-control" required value="" id="envolvidosArea1" placeholder="Área/Empresa"></p>
<p><label for="envolvidosTel1"class="alinhamento">Envolvidos(3)</label>
<input type="text" class="form-control" required value="" id="envolvidosTel1" placeholder="Telefone"></p>
<p><label for="observacao" class="alinhamento">Observação (Envolvidos)</label>
<textarea name="EnvolvidosObservacao" id="EnvolvidosObservacao" class="form-control" rows="5" placeholder="Observação" required></textarea></p>
</fieldset>
</form>
</body>
</html>
RESULTADO ABAIXO APOS CORREÇÃO DO SEU CODIGO.
Pacato
Julho 29, 2016, 5:55pm
#6
é que quero criar uma estrutura de campos um do lado do outro… para não ficar um embaixo do outro.
Que tal assim???
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Meu Formulario</title>
<style>
.alinhamento{
display:inline-block;
float:right;
width:100%;
position:absolute;
}
.form-control{
margin-top:20px;
}
</style>
</head>
<body>
<form>
<fieldset> <legend> Tabela</legend>
<label for="objetivo" class="alinhamento">Objetivo:</label><textarea name="objetivo" id="objetivo" class="form-control" rows="5" placeholder="Objetivo" required> </textarea>
<label for="descricao" class="alinhamento">Descrição:</label><textarea name="descricao" id="descricao" class="form-control" rows="5" placeholder="Descrição" ></textarea>
<label for="posicionamento" class="alinhamento">Posicionamento:</label><textarea name="posicionamento" id="posicionamento" class="form-control" rows="5" placeholder="Posicionamento" required></textarea>
<label for="observacao" class="alinhamento">Observação:</label>
<textarea name="observacao" id="observacao" class="form-control" rows="5" placeholder="Observação" required></textarea>
<label for="envolvidosNome1" class="alinhamento">Envolvidos</label>
<input type="text" class="form-control" required value="" id="nomEnvolvidos1" placeholder="Nome">
<label for="envolvidosArea1" class="alinhamento">Envolvidos(2)</label>
<input type="text" class="form-control" required value="" id="envolvidosArea1" placeholder="Área/Empresa">>
<label for="envolvidosTel1"class="alinhamento">Envolvidos(3)</label>
<input type="text" class="form-control" required value="" id="envolvidosTel1" placeholder="Telefone">
<label for="observacao" class="alinhamento">Observação (Envolvidos)</label>
<textarea name="EnvolvidosObservacao" id="EnvolvidosObservacao" class="form-control" rows="5" placeholder="Observação" required></textarea>
</fieldset>
</form>
</body>
</html>
