HTML - Exemplo de Formulário - Simples - VSC

por **HuemersonFMG** Seg 10 Out 2022, 18:45

HTML - Exemplo de Formulário - Simples - VSC

Um pequeno exemplo de como criar um formulário HTML, via Visual Studio Code.

Llidar com dados de formulário no lado do servidor não é fácil, um formulário HTML é uma forma coletar informações do usuário e enviar para um servidor web.

O elemento <form> definirá onde e como enviar os dados, de acordo com os atributos action e method.

Para isto precisamos dar um nome a nossos dados. Esses nomes são importantes para o navegador que informando que nome dar a cada parte de dados, e para o servidor, permitindo que o servidor lide com estas partes de dados por seus nomes.

Para nomear seus dados, você precisará usar o atributo name em cada campo do formulário que irá recolher uma parte específica dos dados.

No Index.html

Código:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/Styles.css"> </head> <body> <h2 id="Estilo">FMG - FORMULÁRID DE ARRECADAÇÃO DE DADOS</h2> <form action="https://familiagarcia-samp.forumeiros.com/" method="post"> <div> <label for="nome">Nome:</label> <input type="text" id="nome" value="Nome"/> </div> <div> <label for="email">E-mail:</label> <input type="email" id="email" value="email@email"/> </div> <div> <label for="msg">Mensagem:</label> <textarea id="msg"></textarea> </div> <div class="button"> <button type="submit">Enviar seus dados agora</button> </div> </form> </body> </html>

Alterando Estilos do Formulário
No css/Styles.css:

Código:: form { /* Para centralizar o form na página */ margin: 0 auto; width: 400px; /* Para ver as bordas do formulário */ padding: 1em; border: 1px solid #CCC; border-radius: 1em; } form div + div { /* Adicionado algum espaço entre cada conjunto de campos do form */ margin-top: 1em; } label { /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */ display: inline-block; width: 90px; text-align: right; } input:focus, textarea:focus { /* Dar um pouco de destaque nos elementos ativos */ border-color: #000; } #Estilo { /* Para centralizar o form na página */ margin: 0 auto; width: 400px; text-align: center; color: blue; } input, textarea { /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/ font: 1em sans-serif; /* Para dar o mesmo tamanho a todos os campo de texto */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* Para harmonizar as bordas nos campos de texto*/ border: 1px solid #999; } textarea { /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/ vertical-align: top; /* Para dar espaço suficiente para digitar algum texto */ height: 5em; /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Não funciona em todos os browsers */ resize: vertical; } .button { /* Para posicionar os botões para a mesma posição dos campos de texto */ padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */ } button { /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/ margin-left: .5em;

HTML - Exemplo de Formulário - Simples - VSC Imc1212

Dom	Seg	Ter	Qua	Qui	Sex	Sáb
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Dom	Seg	Ter	Qua	Qui	Sex	Sáb
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

HTML - Exemplo de Formulário - Simples - VSC

HTML - Exemplo de Formulário - Simples - VSC

HTML - Exemplo de Formulário - Simples - VSC

IMPORTANTES