Leave form fields aligned and of the same size

Asked

Viewed 935 times

0

I want to keep these two elements aligned and of the same size. Note that I have already left the two with the same size and nothing:

![inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Nivas tag input html5</title>
    <meta charset="utf-8">
    <style type="text/css">
   </style>
</head>

<body>
    <form name="F_aula" method="post" action="">

    <!--- Associar label com os elementos- boa pratica -->
     <fieldset id="Nome"><legend>Nome de usuario</legend>
        <p>Nome:<input  type="text" name="tNome" id="cNome" maxlength="" ="10" size="20" ></p>

        <p>Idade:<input type="numbe" name="yIdade" maxlength="3" size="20"></p>

          <p>E-mail:<input type="text" name="tEmail" id="oEmail" max="40
          " size="20"></p>

    </fieldset><br><br><br>

        <!--- Novos inputs e atributos HTML5 --->

        <!---- E-mail--->
        <!---- E-mail atributo required--->
    <fieldset id="email"><legend> E-mail do usuario</legend>
      <p>E-mail:</p>
        </fieldset><br><br><br>

        <!---- Número--->
    <fieldset id="numero"><legend>Número de telefone</legend>
         <p>Número</p>
         </fieldset>
        </form>
</body>
</html>

html css html5

  • Hello! Where is the css style of your code? Put it too.

2 answers

0


Inside your fieldset, use the tag <label>. The tag <label> defines a label for the element <input>. Then change your natural behavior inline for block, set a width for the element and its left position with float: left.

 fieldset#Nome label {
   display: block;
   width: 10%;
   float:left;
 }
<form name="F_aula" method="post" action="">
<!--- Associar label com os elementos- boa pratica -->
<fieldset id="Nome"><legend>Nome de usuario</legend>

    <p><label for="cNome">Nome:</label>
    <input  type="text" name="tNome" id="cNome" maxlength="" ="10" size="20"></p>
    <p><label for="yIdade">Idade:</label>
    <input type="numbe" name="yIdade" maxlength="3" size="20"></p>
    <p><label for="oEmail">E-mail:</label>
    <input type="text" name="tEmail" id="oEmail" max="40" size="20"></p>

</fieldset>

  • 1

    Thank you very much man I stayed long our thank you really I will keep striving.

0

Create a CSS file and make a table to contain the form:

body {
font-family: Verdana, Arial, sans-serif;
font-size: smaller;
padding: 50px;
color: #555;
}

h1 {
text-align: left;
letter-spacing: 6px;
font-size: 1.4em;
color: #be7429;
font-weight: normal;
width: 450px;
}

table {
width: 580px;
padding: 10px;
background-color: #c5e7e0;
}

th {
text-align: left;
border-bottom: 1px solid;
}

td {
padding: 10px;
}

form 

        <table border="0" cellpadding="5" cellspacing="2">
            <thead>
                <tr>
                    <th colspan="2">texto:</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Nome:</td>
                    <td><input type="text" name="name" /></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input type="email" name="email" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="Aciona" />
                        &nbsp;&nbsp;
                        <input type="reset" value="Reseta" />
                    </td>                        
                </tr>                    
            </tbody>
        </table>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.