Alinhar campos [RESOLVIDO]

7 de fevereiro de 2013 6 respostas

Pacato 7 de fevereiro de 2013

Pessoal tudo bom?

alguem poderia me ajudar a alinhar estes 3 capos para deixar na mesma linha?

<script type="text/javascript">
function mais(id, campo) {
	var valor = "<input type='text' name='"+campo+"' value=''><br>";
	var nova = document.getElementById(id);
	var novadiv = document.createElement("div");
	var nomediv = "div";
	novadiv.innerHTML = "<input type='text' name='"+campo+"' value=''>";
	nova.appendChild(novadiv);
	}
	</script>

<body> 
<center>
<form name="form" method="GET">
Equipamento <input type="text" name="campo1" value="">
<input type="button" value="adicionar input" onClick="mais('aqui','campo1')">
<div id="aqui"></div>
Operadora <input type="text" name="campo2" value="">
<input type="button" value="adicionar input" onClick="mais('aqui2','campo2')">
<div id="aqui2"></div>
Status <input type="text" name="campo3" value="">
<input type="button" value="adicionar input" onClick="mais('aqui3','campo3')">
<div id="aqui3"></div>
<input type="submit">
</form>

6 Respostas

rcerullo 7 de fev. de 2013

Não sei se é o que você precisa, mas dá para alinha com tabela:

<html>

<script type="text/javascript">
function mais(id, campo) {
    var valor = "<input type='text' name='"+campo+"' value=''><br>";
    var nova = document.getElementById(id);
    var novadiv = document.createElement("div");
    var nomediv = "div";
    novadiv.innerHTML = "<input type='text' name='"+campo+"' value=''>";
    nova.appendChild(novadiv);
    }
    </script>

<body>
	<center>
	<form name="form" method="GET">
		<table>
			<tr>
				<td>Equipamento</td>
				<td><input type="text" name="campo1" value=""><br><div id="aqui"></div></td>
				<td><input type="button" value="adicionar input" onClick="mais('aqui','campo1')"></td>
			</tr>
			<tr>
				<td>Operadora</td>
				<td><input type="text" name="campo2" value=""><br><div id="aqui2"></div></td>
				<td><input type="button" value="adicionar input" onClick="mais('aqui2','campo2')"></td>
			</tr>
			<tr>
				<td>Status</td>
				<td><input type="text" name="campo3" value=""><br><div id="aqui3"></div></td>
				<td><input type="button" value="adicionar input" onClick="mais('aqui3','campo3')"></td>
			</tr>
			<tr>
				<td colspan="3"><input type="submit"></td>
			</tr>
		</table>
	</form>

</html>

Pacato 7 de fev. de 2013

oi rcerullo
Valeu pela resposta… é quase isso… queria deixar os 3 na mesma linha…

Pacato 7 de fev. de 2013

Consegui...

<form name="form" method="GET">   
        <table>   
            <tr>   
                <td>Equipamento</td>   
                <td><input type="text" name="campo1" value=""><br><div id="aqui"></div></td>   
                <td><input type="button" value="adicionar input" onClick="mais('aqui','campo1')"></td>   
   
                <td>Operadora</td>   
                <td><input type="text" name="campo2" value=""><br><div id="aqui2"></div></td>   
                <td><input type="button" value="adicionar input" onClick="mais('aqui2','campo2')"></td>   
 
                <td>Status</td>   
                <td><input type="text" name="campo3" value=""><br><div id="aqui3"></div></td>   
                <td><input type="button" value="adicionar input" onClick="mais('aqui3','campo3')"></td>   
             </tr>   
        </table>
        <input type="submit">    
    </form>

rof20004 7 de fev. de 2013

Voce pode por dentro da tag

ou voce pode por cada parte dentro de tags

separadas, lembrando que uma linha do DOM vai ate 16

Exemplo:

<p class="grid_16">
    <input type="text" name="campo1" value="">
    <input type="button" value="adicionar input" onClick="mais('aqui','campo1')">
    <input type="text" name="campo2" value=""><br><div id="aqui2">
    <input type="button" value="adicionar input" onClick="mais('aqui2','campo2')">
    <input type="text" name="campo3" value=""><br><div id="aqui3"></div>
    <input type="button" value="adicionar input" onClick="mais('aqui3','campo3')">
</p>

Para controlar o tamanho dos campos voce precisara usar o atributo “size”, que determina o tamanho de cada input.

rof20004 7 de fev. de 2013

é, usando tabela é mais bonitinho =D, parabens.

Pacato 7 de fev. de 2013

Mesmo assim valeu a dica rof20004

Criado 7 de fevereiro de 2013

Ultima resposta 7 de fev. de 2013

Respostas 6

Participantes 3

6 Respostas

Topicos relacionados