How to align fields of a form

Question

Good, I am developing a webpage with a form. How can I align the text boxes to fill? I tried to put everything inside a div with the container class, I tried to set the size to approximate sizes, but there’s always a millimeter difference, and I tried to do it inside a table, but it’s small spacing. So far the code is 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>

Answer 1

You can do it with CSS using the tag <label>, thus:

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 the same way, but I think you don’t need to put (or might be putting wrong) php opening inside the fields input... I gave an edited in your code, taking out the openings of php just to test, take a look as it was (clicking below, in 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>