Aligning Fields on a Form

Question

Aligning Fields on a Form

Navigation

#1 by (4 votes)

0

Well, I'm developing a webpage with a form. How can I align text boxes to fill in? I tried to put everything inside a div with the class container, I tried to set the size to approximate sizes, but there are always millimeters of difference, and I tried to do it inside a table, but they got small spacings. So far the code looks like this:

<div style="margin-top: 30px;" class="container">
        <form method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?>">

            <h3>Dados Funcionario nº<?php echo $registo["IDFuncionario"]; ?></h3><br>
            <p>Nome <input type="text" name="Nome" size="50" value="<?php echo $registo["Nome"]; ?>"></p>
            <p>Username<input type="text" name="username" size="47" value="<?php echo $registo["username"]; ?>"></p>
            <p>Password<input type="text" name="password" size="47" value="<?php echo $registo["password"]; ?>"></p>
            <p>Morada<input type="text" name="morada" size="49" value="<?php echo $registo["morada"]; ?>"></p>
            <p>Contacto <input type="text" name="contacto" size="47" maxlength="9" value="<?php echo $registo["contacto"]; ?>"></p><br>
            <p><input type="submit" value="Alterar" name="alterar"><input type="reset" value="Repor" name="B2"></p>
        </form>
</div>

html css

asked by anonymous 21.04.2015 / 23:54

1 answer

How to View SQL Query in an Array Error sending form with if: else condition in laravel

score 4 · Answer 1

You can do with CSS using the <label> tag, like this:

label.hora {

    display: inline-block;
    width: 90px;
}

<label for="input1" class="hora">Entrada 1:</label>
<input type="time" id="input1"><br>

<label for="input2" class="hora">Entrada 22:</label>
<input type="time" id="input2">

I put your code in the same way, but I think you do not have to put (or might be putting it wrong) the opening of the php inside the fields input ... I gave one edited in your code, taking the php openings only to test, take a look as it was (click below, execute code snippet):

label.hora {

    display: inline-block;
    width: 90px;
}

   <div style="margin-top: 30px;" class="container">
<form method="POST" action="">

<h3>Dados Funcionario nº</h3><br>
<label class="hora">Nome </label><input type="text" name="Nome" size="50"><br>
<label class="hora">Username</label><input type="text" name="username" size="47"><br>
<label class="hora">Password</label><input type="text" name="password" size="47"><br>
<label class="hora">Morada</label><input type="text" name="morada" size="49"><br>
<label class="hora">Contacto</label><input type="text" name="contacto" size="47" maxlength="9"><br>
<p><input type="submit" value="Alterar" name="alterar"><input type="reset" value="Repor" name="B2"></p>
</form>
</div>