0

Quero deixar esses dois elementos alinhados e com o mesmo tamanho. Observem que eu já deixei os dois com o mesmo size e nada:

![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>

1
  • Olá! Onde está o estilo css do seu código? Posta ele também. Commented 24/03/2019 às 16:12

2 Respostas 2

1

Dentro do seu fieldset, use a tag <label>. A tag <label> define um rótulo para o elemento <input>. Depois mude seu comportamento natural inline para block, defina uma largura para o elemento e sua posição para esquerda com 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
  • 1
    muito obrigado cara fiquei muito tempo nossa obrigado de verdade vou continuar me esforçando. Commented 24/03/2019 às 17:29
0

Crie um arquivo CSS e faça uma tabela para conter o formulário:

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;
}

formulário

        <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .