AUTORAÇÃO MULTIMÍDIA II

PROFESSORES:

HENRIQUE SÉRGIO LIMA PEQUENO

ORGANIZAÇÃO DA AULA

 O que são Formulários

 “Desenhando” um formulário
 Elemento form
 Enviando dados para um servidor
 Método GET
 Método POST

 Elementos label, input e textarea

 Elemento button
 Utilizando CSS para organizar um formulário
O QUE SÃO FORMULÁRIOS?

 Principal ponto de interação entre usuário e website

 Utilizados para enviar dados a servidor remoto ou para trabalhar a interação com o usuário

 Formado por um ou mais widgets (campos de texto, caixas de seleção, botões, checkboxes ou radio buttons)
“DESENHANDO” UM FORMULÁRIO

 Recomenda-se, antes de codificar seu formulário, pensar e desenhar um rascunho de seu formulário

 Uma máxima construída pela experiência do usuário (UX): Quanto maior o formulário, maiores as chances de dispersão do
usuário.

 DICA: Extenso Guia para a usabilidade em formulários Web (http://www.smashingmagazine.com/tag/forms/)

 QUESTÕES A SE CONSIDERAR (BY ADAM SILVER)

 Seja conciso: não use mais palavras que o necessário. No entanto, seja econômico sem comprometer a clareza da informação.
 Seja consistente. Adote o mesmo tom e padrão de palavras, formalismos e pontuação.
 Seja específico quanto a feedbacks. Utilize uma linguagem clara para indicar o que há de errado no preenchimento de dados de um
formulário .
 Não utilizem jargões nem tecnicismos. Seja o mais humano possível.
 Tenha um plano de linguagem criterioso. Caso tenha uma linguagem despojada, um retorno de mensagem de erro mal realizado, pode ser
visto como sarcasmo.
 Use um tom ativo. Por exemplo, use “Entre com seu nome” e não “Primeiro nome deve ser entrado”
 Não envergonhe o usuário. Deixe o usuário saber qual o erro e como consertá-lo, sem julgamentos.

 REFERÊNCIA: SILVER, A. Form Design Pattherns: A pratical guide to designing and coding simple and inclusive forms for the web.
ELEMENTO <form>

 Todo formulário inicia com o elemento <form>. Consiste em um contêiner específico para conter um formulário. Possui,
também atributos opcionais para configurar o comportamento do formulário.

<form action="/my-handling-form-page" method="post"> </form>

 Atributo action: define a localização de destino para os dados coletados

 Atributo method: define qual o método de envio de dados http (usualmente get ou post))
ENVIANDO DADOS PARA UM SERVIDOR

 Método GET

 Método POST
DIAGRAMA DE FLUXO
DEFININDO P/ ONDE ENVIAR OS DADOS

 <form action="https://example.com">
MÉTODO GET

 Exemplo:
<form action="http://www.foo.com" method="GET">
<div>
<label for="say">What greeting do you want to say?</label>
<input name="say" id="say" value="Hi">
</div>
<div>
<label for="to">Who do you want to say it to?</label>
<input name="to" id="to" value="Mom">
</div>
<div>
<button>Send my greetings</button>
</div>
</form>
 MÉTODO GET: DADOS NA BARRA ENDEREÇO

CHAMADA http:

GET /?say=Hi&to=Mom HTTP/2.0

Host: foo.com
MÉTODO POST

<form action="http://www.foo.com" method="POST">

<div>

<label for="say">What greeting do you want to say?</label>

<input name="say" id="say" value="Hi">

</div>

<div>

<label for="to">Who do you want to say it to?</label>

<input name="to" id="to" value="Mom">

</div>

<div>

<button>Send my greetings</button>

</div>

</form>
CHAMADA HTTP

POST / HTTP/2.0

Host: foo.com

Content-Type: application/x-www-form-urlencoded

Content-Length: 13

say=Hi&to=Mom
ELEMENTO <label>

 Define um rótulo para uma série de campos de um formulário

 Muito útil para o trabalho de programas de leitura de tela

 Facilita a interação dos usuários com o formulário, pois amplia a região de clique dos campos.
ELEMENTO <button>

 Botão responsável por fazer ações como enviar dados e “resetar” valores do formulário.

 Possui o atributo type que aceita os valores: submit, reset e button.

ELEMENTO <select>

 Elemento que define uma lista drop-down

 Por padrão, o primeiro item fica selecionado. Para definir qual opção será selecionada, utiliza-se o atributo selected

 Ex:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
ELEMENTO <select>

 Para especificar o número de valores visíveis, utilize o atributo

size.
<form action="/action_page.php">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select><br><br>

<input type="submit">

</form>
ELEMENTO <select>

 Permitindo múltiplas seleções

<form action="/action_page.php">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select><br><br>

<input type="submit">

</form>
ELEMENTO <textarea>

 Campo para entrada de múltiplas linhas de texto.

 Atributos rows e cols definem, respectivamente, a quantidade de linhas e colunas da caixa de texto.
 Ex 1:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

 Ex 2 (CSS):
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
 OS ELEMENTOS <fieldset> e <legend>

 O elemento <fieldset> é utilizado para agrupar dados relacionados em um formulário.

 O elemento <legend> define um título/rótulo para o elemento <fieldset>
 Ex:
<form action="/action_page.php">

<fieldset>

<legend>Dados Pessoais:</legend>

<label for="fname">Primeiro nome:</label><br>

<input type="text" id="fname" name="fname" value="José"><br>

<label for="lname">Sobrenome:</label><br>

<input type="text" id="lname" name="lname" value="Maria"><br><br>

<input type="submit" value="Submit">

</fieldset>

</form>
ELEMENTO <input>

 Tipo <text>: linha simples de texto

 Tipo <email>: linha simples de texto que aceita apenas endereços de email

 Tipo<textarea>: campo de texto de contém múltiplas linhas de texto

ELEMENTO <input>

Tipo Descrição
<input type="text"> Campo p/ entrada de texto de linha simples
Apresenta um radio button (para selecionar uma opção
<input type="radio">
dentre muitas)
Exibe um checkbox (para selecionar zero ou muitas
<input type="checkbox">
escolhas)
<input type="submit"> Apresenta um botão de envio do formulário.
<input type="button"> Mostra um botão clicável.
ELEMENTO input type=“text”

 <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
ELEMENTO input type=“password”

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
ELEMENTO input type=“submit”

 <form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
ELEMENTO input type=“reset”

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" <br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" ><br><br>

<input type="submit" value="Submit">

<input type="reset">

</form>
ELEMENTO input type=“radio”

 <form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
ELEMENTO input type=“checkbox”

 <form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
ELEMENTO input type=“button”

<!DOCTYPE html>
<html>
<body>

<h2>Input Button</h2>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

</body>
</html>
ELEMENTO input type=“color”

 <form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
ELEMENTO input type=“range”

 <form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
ELEMENTO input type=“date”

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
ELEMENTO input type=“email”

 <form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
ELEMENTO input type=“file”

<form action="/action_page.php">

<label for="myfile">Select a file:</label>

<input type="file" id="myfile" name="myfile"><br><br>

<input type="submit" value="Submit">

</form>
ELEMENTO input type=“search”

 Campos específicos para a realização de consultas

 Ex1.:
<label for="site-search">Search the site:</label>

<input type="search" id="site-search" name="q">

<button>Search</button>
ELEMENTO input type=“search”

Ex2:

<form>

<div>

<label for="mySearch">Search for user</label>

<input type="search" id="mySearch" name="q" placeholder="User IDs are 4–8 characters in length" required size="30"
minlength="4" maxlength="8" />

<button>Search</button>

</div>

</form>
ATRIBUTO multiple

 Permite ao usuário inserir múltiplos valores em um campo

<input>

<form action="/action_page.php">

<label for="files">Select files:</label>

<input type="file" id="files" name="files"

multiple><br><br>

<input type="submit" value="Submit">

</form>
ATRIBUTO maxlength

 Define o número máximo de caracteres de um campo <input>

 Obs.: este atributo delimita a entrada de dados, mas não oferece nenhum feedback

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>


ATRIBUTOS min e max

 Define o número mínimo e máximo de valores de um campo

<input>
 Pode trabalhar com os tipos: number, range, date, datetime-
local, month, time and week

<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5"><br><br>
<input type="submit" value="Submit">
</form>
ATRIBUTO placeholder

 Indica ao usuário que tipo de informação é esperada para um

campo <input>

 Pode ser utilizado com os tipos: text, search, url, tel, email e
password

<form action="/action_page.php">

<label for="phone">Enter a phone number:</label>

<input type="tel" id="phone" name="phone" placeholder="123-

45-678"><br><br>

<input type="submit" value="Submit">

</form>
CRITÉRIO PARA O USO DO ATRIBUTO <placeholder>

A label e placeholder possuem conteúdos similares,

logo o emprego do placeholder é desnecessário
CRITÉRIO PARA O USO DO ATRIBUTO <placeholder>

A descrição do placeholder ficou comprometida em

razão do tamanho caixa de texto
CRITÉRIO PARA O USO DO ATRIBUTO <placeholder>

Recomenda-se, em muitas situações, colocar a dica

acima do campo
ATRIBUTO pattern

 Especifica um padrão regular para a entrada de dados. A

restrição é verificada quando o usuário tenta submeter o
formulário

 Pode ser utilizado com os tipos: text, date, search, url, tel,
email e password

<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code"
name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
ATRIBUTO pattern – Sintaxe básica

 <input type="text" name="campo" pattern="regex" title="Mensagem de erro">

 Onde:

 type: O tipo de campo de entrada (ex.: text, email, tel)

 name: Nome do campo

 pattern: Expressão regular que define o formato esperado

 title: Mensagem de erro exibida se a entrada não corresponder ao padrão.

ATRIBUTO pattern – Exemplos de Uso

• Validação de Números de Telefone:

• Permitir apenas números no formato (XX) XXXX-XXXX ou (XX) XXXXX-XXXX:

 <input type="tel" name="telefone" pattern="\(\d{2}\) \d{4,5}-\d{4}" title="Formato

esperado: (XX) XXXX-XXXX ou (XX) XXXXX-XXXX">
ATRIBUTO pattern – Exemplos de Uso

 Validação de Senhas:

• Senha com pelo menos uma letra maiúscula, uma minúscula, um número,
e mínimo de 8 caracteres:
 <input type="password" name="senha" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="A senha deve conter pelo menos 8 caracteres, incluindo uma letra maiúscula, uma
minúscula e um número.">
ATRIBUTO pattern – Exemplos de Uso

 Validação de CEP (Brasil):

• Permitir apenas números no formato XXXXX-XXX:

 <input type="text" name="cep" pattern="\d{5}-\d{3}" title="Formato esperado:
XXXXX-XXX">
ATRIBUTO pattern – Exemplos de Uso

 Validação de E-mail (simplificada):

• Verificar se o formato básico de um e-mail está correto:

 <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9-]+\.[a-z]{2,}$"
title="Formato esperado: [email protected]">
EXEMPLO DO USO DO ATRIBUTO PATTERN (1)

<p>

<label>Enter your phone number in the format (123) - 456 - 7890

(<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>) -

<input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -

<input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>

</label>

</p>
EXEMPLO DO USO DO ATRIBUTO PATTERN (2)

<form>

<div>
<label for="uname">Choose a username: </label>

<input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters">
<span class="validity"></span> <p>Usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>Submit</button>

</div>

</form>
EXERCÍCIO 1

 Crie um formulário com um campo de entrada para nomes de usuário que deve:

 Começar com uma letra maiúscula.

 Ter entre 5 e 12 caracteres.

 Não permitir caracteres especiais.

 Adicione uma mensagem de erro personalizada usando o atributo title.

RESOLUÇÃO DO EXERCÍCIO 1

<!DOCTYPE html> <label for="username">Nome de Usuário:</label>

<html lang="pt-BR"> <input type="text" id="username" name="username"

pattern="[A-Za-z][A-Za-z0-9]{4,11}" title="O nome de usuário
<head>
deve começar com uma letra e ter entre 5 e 12 caracteres, sem
<meta charset="UTF-8"> caracteres especiais." required>
<meta name="viewport" content="width=device-width, initial- <input type="submit" value="Enviar">
scale=1.0">
</form>
<title>Validação de Nome de Usuário</title>
</body>
</head>
</html>
<body>

<form>
EXERCÍCIO 2

 Crie um formulário com um campo para entrada de senhas que deve:

• Ter pelo menos 10 caracteres.

• Incluir pelo menos uma letra maiúscula, uma letra minúscula, um número, e um
caractere especial (ex.: !, @, #, etc.)
RESOLUÇÃO DO EXERCÍCIO 2

<!DOCTYPE html> <input type="password" id="password" name="password"

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}"
<html lang="pt-BR">
title="A senha deve ter pelo menos 10 caracteres, incluindo uma
<head> letra maiúscula, uma letra minúscula, um número e um caractere
<meta charset="UTF-8"> especial." required>

<meta name="viewport" content="width=device-width, initial- <input type="submit" value="Enviar">

scale=1.0"> </form>
<title>Validação de Senha Forte</title> </body>
</head> </html>
<body>

<form>

<label for="password">Senha:</label>
EXPLICAÇÃO DO EXERCÍCIO 2

 (?=.*\d): • .*[A-Z]:Verifica se existe pelo menos uma letra maiúscula em

qualquer posição na senha.
• (?=...): É uma "lookahead assertion", que verifica se uma condição
é atendida. Com os lookaheads, você está apenas afirmando a  (?=.*[@#$%^&+=!]):
existência dos elementos necessários na string, não importando
• [@#$%^&+=!]: Representa qualquer um dos caracteres especiais
onde eles aparecem ou em que ordem.
listados: @, #, $, %, ^, &, +, =, !.
• \d: Representa qualquer dígito (0-9).
• .*[@#$%^&+=!]:Verifica se existe pelo menos um desses
• .*\d:Verifica se existe pelo menos um dígito em qualquer posição caracteres especiais em qualquer posição na senha.
na senha.
 .{10,}:
 (?=.*[a-z]):
• .: Representa qualquer caractere (exceto quebras de linha).
• [a-z]: Representa qualquer letra minúscula (a-z).
• {10,}: Indica que a senha deve ter no mínimo 10 caracteres. O
• .*[a-z]: Verifica se existe pelo menos uma letra minúscula em número após a vírgula define o número mínimo de ocorrências,
qualquer posição na senha. sem um limite máximo (qualquer número maior ou igual a 10 é
permitido).
 (?=.*[A-Z]):
• [A-Z]: Representa qualquer letra maiúscula (A-Z).
ATRIBUTO required

 Define a obrigatoriedade de preenchimento de um

campo para que o formulário possa ser enviado.

 Pode ser utilizado com os tipos: text, search, url, tel, email,
password, date pickers, number, checkbox, radio e file.

 <form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required>
</form>
ATRIBUTO AUTOCOMPLETE

 <form action="/action_page.php" autocomplete="on">

O ELEMENTO DATALIST

 Descrição:
• O <datalist> é um elemento que define uma lista de opções pré-definidas que pode ser usada em conjunto com um campo <input>. Ele
permite que o usuário escolha uma opção da lista ou digite seu próprio valor.
 Uso:
• O <datalist> é usado junto com o elemento <input>. As opções dentro do <datalist> aparecem como sugestões quando o usuário
começa a digitar no campo <input>.
 Funcionalidade:
• Sugestões, mas não obrigatório: O <datalist> oferece sugestões de preenchimento, mas o usuário não é obrigado a selecionar uma
dessas opções. O usuário pode inserir um valor diferente que não está na lista de sugestões.
• Pesquisa: O <datalist> permite que o usuário pesquise as opções ao digitar, o que é útil quando há muitas opções e o usuário deseja
uma busca rápida.
O ELEMENTO DATALIST
 <form action="/action_page.php">

 <input list="browsers" name="browser">

 <datalist id="browsers">

 <option value="Internet Explorer">

 <option value="Firefox">

 <option value="Chrome">

 <option value="Opera">

 <option value="Safari">

 </datalist>

 <input type="submit">

 </form>
EXEMPLO DE DATALIST

1. <!DOCTYPE html> 13. <datalist id="fruits">

2. <html lang="pt-BR"> 14. <option value="Maçã">
3. <head> 15. <option value="Banana">
4. <meta charset="UTF-8"> 16. <option value="Laranja">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17. <option value="Manga">
6. <title>Exemplo de Datalist</title> 18. <option value="Pera">
7. </head> 19. <option value="Uva">
8. <body> 20. <option value="Abacaxi">
21. </datalist>
9. <h2>Escolha ou digite uma fruta</h2> 22. <input type="submit" value="Enviar">
23. </form>
10. <form action="/submit" method="post">
11. <label for="fruit">Fruta:</label> 24. </body>
12. <input list="fruits" id="fruit" name="fruit" placeholder="Escolha ou digite 25. </html>
uma fruta" required>
O ELEMENTO OUTPUT

O <output> é um elemento HTML usado para representar o resultado de um cálculo

ou a resposta de uma operação em um formulário interativo.
ATRIBUTO ONINPUT

 Permite executar uma função ou um script sempre que o valor de um elemento de

formulário mudar. Esse atributo é especialmente útil para criar interações em tempo real,
pois ele reage a qualquer alteração feita pelo usuário no campo de entrada.
 Sintaxe:
 <elemento oninput="funçãoOuExpressão">

 Obs.: Ooninput aplicado ao <form> monitora as mudanças em qualquer

elemento de entrada que faz parte desse formulário, como <input>,
<textarea>, <select>, etc.
EXERCÍCIO 1

 Crie um formulário que visualize o

resultado de um seletor (range) em
um output.
O ELEMENTO OUTPUT

<form action=""
oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>
0
<input type="range" id="a" name="a" value=”100">
100 +
<input type="number" id="b" name="b" value="50">
=
<!--<output name="x" for="a b"></output>-->
<output id="x"></output>
<br><br>
</form>
EXERCÍCIO 2

 Utilizando <input type=“number”> crie um formulário que realiza a soma de dois campos numbers. Exiba em um output.

 Obs.: utilize o atributo oninput

ELEMENTO PROGRESS

- O elemento <progress> é usado para representar o progresso de uma tarefa ou processo que pode ser
determinado com base em um valor numérico. Geralmente, ele é usado para mostrar o andamento de
operações em tempo real, como carregamento de páginas, upload de arquivos ou processamento de
dados.
- O <progress> usa os atributos value (valor atual) e max (valor máximo) para indicar o progresso
da tarefa. O valor máximo (max) representa o ponto de conclusão total da tarefa.
<h3>Form progress elemento</h3>
<form>
<p> Progress: <progress value=“30” max=“100”></p>

</form
EXERCÍCIO 3

 Faça um formulário que utilizem os elementos range, progress e output. O usuário deve, ao utilizar o slider, ver a mudança de
satus no progress e visualizar o valor no output.
ELEMENTO METER

- O elemento <meter> é usado para representar uma medida em um intervalo específico. Geralmente, é usado para exibir
informações como medidores de temperatura, níveis de bateria, pontuações ou qualquer outra medida quantitativa em um
intervalo conhecido.

- O <meter> usa os atributos value (valor atual), min (valor mínimo) e max (valor máximo) para representar a medida. O valor
mínimo (min) e o valor máximo (max) definem o intervalo em que a medida está sendo feita.

<h3> Form meter element</h3>

<form>

Voter turnout: <meter value=0.45></meter><span>45%</span>

</form>
EXERCÍCIO 2

 Ajuste o o exercício anterior, substituindo <progress> por <meter>.

EXEMPLO
EXEMPLO DE FORMULÁRIO
<form action="" method="post">

<div>

<label for="nome"> Nome: </label>

<input type="text" id="nome” name=“nome”/>

</div>

<div>

<label for="email">E-mail</label>

<input type="email" id="email" name=“email”/>

</div>

<div>

<label for="msg">Mensagem</label>

<textarea id="msg” name=“msg></textarea>

</div>

<div>

<input type=“submit” value=”Enviar sua mensagem”/>

</div>

</form>
UTILIZANDO CSS PARA ORGANIZAR UM FORMULÁRIO

 Centralizar o formulário na página

form {

margin: 0 auto;

width: 400px;

/*Bordas do formulário*/

padding: 1em;

border: 1px solid #CCC;

border-radius: 1em;

}
UTILIZANDO CSS PARA ORGANIZAR UM FORMULÁRIO

 Adicionar espaço entre os campos do formulário

form div + div {

margin-top: 1em;

}
UTILIZANDO CSS PARA ORGANIZAR UM FORMULÁRIO

 Aumentando a legibilidade dos campos fazendo um alinhamento à direita, e garantindo que as labels tenham o mesmo tamanho
e alinhamento

label {

display: inline-block;

width: 90px;

text-align: right;

}
UTILIZANDO CSS PARA ORGANIZAR UM FORMULÁRIO

 Harmonização de conteúdo de fonte, tamanho e bordas.

input, textarea {
font: 1em sans-serif;
/* Para dar o mesmo tamanho a todos os campo de texto */
width: 300px;
box-sizing: border-box;
/* Para harmonizar o look & feel das bordas nos campos de texto*/
border: 1px solid #999;
}
UTILIZANDO CSS PARA ORGANIZAR UM FORMULÁRIO

 Definindo o espaço de um elemento <textarea> para a entrada de informações.

textarea {

vertical-align: top;

height: 5em;

resize: vertical;