Aulas Particulares no Profes
Aulas particulares Tarefas Tira-dúvidas Planos Entrar Criar conta
Foto de Marcir D.
Marcir há 11 meses
Enviada pelo
Site

Html- css

Olá, boa tarde! Preciso deixar duas caixa de texto uma ao lado da outra com os titulos em cima, gostaria que alguém pudesse me ajudar por gentileza, irei deixar o código que estou fazendo e a foto de como tem que ficar e como o meu está.

Código HTML:

<!doctype HTML>
 
<HTML lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Atividade Formulário</title>
<link rel="stylesheet" href="estilo.css"/>
 
</head>
<body>
 
<h1>Formulário Teste</h1>
 
<label id="nome" class="rotulo">
Nome:
</label>
<br>
<input type="text" name="nome"/>
 
<label>
Sobrenome:
</label>
<input type="text" name="sobrenome"/>
 
<br>
<label>Sexo</label>
<br>
<input type="radio" name="sexo" value="Masculino"/>Masculino
<input type="radio" name="sexo" value="Feminino"/>Feminino
<br>
<br>
<label id="email" class="rotulo">
E-mail
</label>
<br>
<input type="text" name="email"/>
 
<br>
<br>
<label id="telefone" class="rotulo">
Telefone
</label>
<br>
<input type="text" name="telefone"/>
 
<br>
<br>
<label id="cidade" class="rotulo">
Cidade
</label>
<br>
<input type="text" name="cidade"/>
 
 
<label>Estado</label>
<select name="estado"> <!---caixa de texto--->
 
<option value="acre">
AC
</option>
 
<option value="alagoas">
AL
</option>
 
<option value="Amapá">
AP 
</option>
 
<option value="Amazonas">
AM
</option>
 
<option value="Bahia">
BA
</option>
 
<option value="ceara">
CE
</option>
 
<option value="df">
DF
</option>
 
<option value="es">
ES
</option>
 
<option value="goias">
GO
</option>
 
<option value="maranhao">
MA
</option>
 
<option value="mt">
MT
</option>
 
<option value="MS">
MS
</option>
 
<option value="minas gerais">
MG
</option>
 
<option value="para">
PA
</option>
 
<option value="paraiba">
PB
</option>
 
<option value="parana">
PR
</option>
 
<option value="pernambuco">
PE
</option>
 
<option value="piaui">
PI
</option>
 
<option value="rj">
RJ
</option>
 
<option value="rn">
RN
</option>
 
<option value="rs">
RS
</option>
 
<option value="rondonia">
RO
</option>
 
<option value="roraima">
RR
</option>
 
<option value="sc">
SC
</option>
 
<option value="sp">
SP
</option>
 
<option value="sergipe">
SE
</option>
 
<option value="tocantins">
TO
</option>
 
</select>
 
<br>
<br>
<label id="mensagem" class="rotulo">
Mensagem
</label>
<br>
<textarea name="texto" rows="5" cols="80">
</textarea>
<legend>Newsletter</legend>
<input type="checkbox" name="carac" value="valid"/>Gostaria de receber Newsletter da empresa
<br>
<br>
<input type="submit" id="botao" value="Enviar"/>
 
 
 
</body>
</html>

Código css:
 
label{
font: 12px Arial, Verdana;
color: black;
}
 
 
input[type="text"],[type="nome"],[type="sobrenome"]{ 
background-color: rgb(220, 220, 220);
border: 1px solid #333;
padding: 4px;
}
 
 
 
input[type="text"]:hover{
background-color: #CCFFCC;
border: 1px solid gray;
padding: 5px;
}
 
#botao{
padding: 5px;
background-color:#FFA500;
border: 1px solid #FFA500;
color: #fff;
font-weight: bold ;
}
 
#botao:hover{
padding: 5px;
background-color: #FF6600;
border: 1px solid #FF6600;
color: #fff;
font-weight: bold;
}
 
link com as fotos (https://drive.google.com/drive/folders/1bU9RkcsItyJVCTgVw656gh5nE6OQVWOr?usp=sharing)

Desde já agradeço!!


Informática Geral
2 respostas
Foto do professor Gustavo S.
Professor Gustavo S.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 11 meses
Contatar Gustavo
1) Tem algumas coisas "desnecessárias" no css:

- input[type="text"],[type="nome"],[type="sobrenome"]: nenhum input tem o type "nome" ou "sobrenome". Vc pode colocar essa condição soh commo:

- input[type="text"]


2) Vc fez td como um código estático em HTML, no entanto, tem MTA coisa repetitiva lá. Qdo eh assim, EU prefiro (gosto pessoal), criar os elementos em JavaScript. O código original (com o "style" dentro do código) tem mais de 200 linhas, enquanto o código alterado tem menos de 80. Eu prefiro desta forma, mas eh uma questão de gosto pessoal.

Basicamente, tdos os inputs são criados em um objeto:

let inpputs = [
    [
        {id: 'nome', type: 'text', class: 'rotulo'},
        {id: 'sobrenome', type: 'text', class: 'rotulo'},
    ],
    [
        {id: 'masculino', name: 'sexo', type: 'radio', value: 'Masculino'},
        {id: 'feminino', name: 'sexo', type: 'radio', value: 'Feminino'},
    ],
    [{id: 'email', type: 'text', class: 'rotulo'}],
    [{id: 'telefone', type: 'text', class: 'rotulo'}],
    [
        {id: 'estado', tag: 'select' },
        {id: 'codade', type: 'text', class: 'rotulo'}
    ]
];


E uma função cria os elementos no DOM com base nesse objeto. A manutenção é mais simples, e o código é bem mais compacto.


3) Quanto a dxar as linhas lado a lado, vc tem q colocar cada "linha" dentro de um div com {display: flex}, e cada coluna desta linha com {display: grid}. O script que eu mandei já faz isso:
    - Cada linha de "inputs" eh uma lista de objetos
        - Cada object desta lista de objetos é uma coluna da linha

4) Esta versão está BEEEEM crua. Não me preocupei com detalhes adicionais como alinhamento, distanciamento, etc. A idéia é só dar uma possível solução para o seu problema (soh a dica "3" seria suficiente pra resolver), mas se vc quiser se aprodundar mais, podemos marcar uma aula.
 
Um arquivo funcionando está em: https://1drv.ms/u/s!Ap0t_qN6guxq1eZm-CT6abw1nm9MVw?e=dNJ5Wh

Att,

Gustavo
0 0

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Envie uma dúvida grátis
Resposta na hora da Minerva IA e de professores particulares
Enviar dúvida
Foto do professor Paulo S.
Professor Paulo S.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 10 meses
Contatar Paulo

Crie em css que sai perfeito para oque voce quer fazer.

0 0

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Minerva IA
do Profes
Respostas na hora
100% no WhatsApp
Teste-me
Envie suas dúvidas pelo App. Baixe agora
Precisa de outra solução? Conheça
Aulas Tarefas Tira-dúvidas
Aulas particulares Encontre um professor para combinar e agendar aulas particulares Buscar professor