Aulas Particulares no Profes
Aulas particulares Tarefas Outros recursos Planos Entrar Cadastre-se

Html- css

Informática Geral

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


Foto de Marcir D.
Marcir perguntou há 1 mês

Sabe a resposta?

Ganhe 10 pts por resposta de qualidade
Responder dúvida
1 resposta
0
votos
Nenhum usuário votou nessa resposta como útil.
Professor Gustavo S.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 mês
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

Envie uma dúvida gratuitamente

Envie sua primeira dúvida gratuitamente aqui no Tira-dúvidas Profes. Nossos professores particulares estão aqui para te ajudar.

Enviar dúvida

Professores particulares de Informática Geral

+ Ver todos
Encontre professor particular para te ajudar nos estudos
R$ 100 / h
Gustavo S.
São Paulo / SP
Gustavo S.
4,4 (29 avaliações)
Horas de aulas particulares ministradas 2 horas de aula
Tarefas resolvidas 56 tarefas resolvidas
Identidade verificada
  • CPF verificado
  • E-mail verificado
Informática Geral - VB.net Informática Geral - C Informática Geral - Python
Mestrado: Ciências Econômicas (Fundação Getúlio Vargas (FGV))
Professor de Matemática, Cálculo, Informática Geral
Contatar Ver WhatsApp
R$ 50 / h
Cileide B.
Santo André / SP
Cileide B.
5,0 (6 avaliações)
Horas de aulas particulares ministradas 11 horas de aula
Tarefas resolvidas 1 tarefa resolvida
Identidade verificada
  • CPF verificado
  • E-mail verificado
1ª hora grátis
Informática Geral - PowerPoint Informática Geral - Excel Informática Geral - Informática para concurso
Especialização: Neuroeducação (Descomplica )
Com mais de 15 anos de experiência eu posso te ensinar excel de maneira eficiente, fácil e definitiva,
Contatar Ver WhatsApp
R$ 65 / h
Wendel S.
São Paulo / SP
Wendel S.
4,6 (14 avaliações)
Horas de aulas particulares ministradas 95 horas de aula
Tarefas resolvidas 26 tarefas resolvidas
Identidade verificada
  • CPF verificado
  • E-mail verificado
1ª hora grátis
Informática Geral Básico Pacote Office
Especialização: Formação Pedagógica para Educação Profissional ( Centro Paula Souza)
Professor de Computação e Administração que alia teoria com a prática buscada pelo mercado de trabalho. Vamos formar uma parceria de sucesso !
Contatar Ver WhatsApp
Envie uma tarefa, lista de exercícios, atividade ou projeto
  • Você define o prazo
  • Professores fazem propostas e você escolhe o melhor
  • Interação com o professor por chat
  • Se não gostar da resolução, reembolsamos
Enviar Tarefa
Últimas dúvidas de Informática - Informática Geral
Meu pc não está ligando Dúvida boba De quantos meses tem que ser o plano? Gsuo h61v10c suporta xeon e5 2650 v4? Pcie express 4.0 reconhece como 3.0 100 de uso processod Cupins

Envie uma dúvida gratuitamente

Envie sua primeira dúvida gratuitamente aqui no Tira-dúvidas Profes. Nossos professores particulares estão aqui para te ajudar.

Enviar dúvida
Disciplinas principais
Matemática Física Química Português Biologia Engenharia Cálculo História Excel Inglês Estatística Matemática Financeira Geografia Filosofia Informática Geral Direito Administração Sociologia Português para estrangeiros Economia Literatura Letras Redação Ciências Contábeis Computação Farmácia-Bioquímica Pedagogia Medicina Enfermagem Espanhol História da Arte Redes de Computadores Ciências Sociais
Encontre um professor e combine aulas particulares Presenciais ou Online
Buscar professor particular

Recursos Profes

O Profes é uma solução completa de aprendizagem, com diversos recursos para
você aprender do jeito mais eficiente e personalizado possível.

Aulas Buscar
Está precisando de um professor particular?
Mais de 50.000 dos melhores professores em todas as disciplinas. Encontre o seu.
Tarefas Pedir
Precisa de ajuda numa atividade, lista, TCC, etc?
Peça ajuda em uma atividade. Receba ofertas e escolha. Ela será entregue no seu prazo.
Turmas Procurar
Aprenda em uma Turma de poucos alunos com um professor ao vivo?
Cursos com até 5 alunos ministrado por um professor ao-vivo a um preço acessível.
Profes Já Pedir
Está precisando de uma aula particular agora?
Uma aula imediata na Sala Profes. As aulas são cobradas por minuto.
Cursos Encontrar
Precisa aprender em um Curso gravado completo?
Cursos gravados pelos melhores professores. Para você ver quando, onde quiser e no seu tempo.
Tira-dúvidas Enviar dúvida
Tem uma dúvida pontual e gostaria de ter ela respondida?
Dúvidas pontuais respondidas rapidamente pelos professores.