Formulários de construção

Os formulários são uma parte essencial da Internet, pois fornecem uma maneira para os sites capturar informações dos utilizadores e processar solicitações e oferecem controles para quase todos os usos imagináveis de um aplicativo. Através de controles ou campos, os formulários podem solicitar uma pequena quantidade de informações - muitas vezes uma consulta de pesquisa ou um nome de utilizador e senha ou uma grande quantidade de informações, talvez informações de envio e cobrança ou um aplicativo de trabalho inteiro.

Precisamos de saber como criar formulários para adquirir a entrada do utilizador. Nesta lição, vamos discutir como usar o HTML para marcar um formulário, quais os elementos a usar para capturar diferentes tipos de dados e como formar formas com CSS. Não nos aprofundaremos em como as informações de um formulário são processadas e tratadas na parte traseira de um site. O processamento de formulários é um tópico mais profundo, fora do domínio deste livro. Por enquanto, ficaremos com a criação e o estilo de formulários.

Iniciar um Formulário

Para adicionar um formulário a uma página, usaremos o elemento <form>. O elemento <form> identifica onde os elementos de controlo da página apareceram. Além disso, o elemento <form> envolverá todos os elementos incluídos no formulário, bem como um elemento <div>.

<form action="/login" method="post">

...

</form>

Um grupo de atributos diferentes podem ser aplicados ao elemento <form>, sendo o mais comum ação e método. O atributo de ação contém o URL para o qual as informações incluídas no formulário serão enviadas para processamento pelo servidor. O atributo do método é o método HTTP que os browsers devem usar para enviar os dados do formulário. Ambos os atributos <form> pertencem ao envio e ao processamento de dados.

Campos de Texto e Textareas

Quando se trata de reunir a entrada de texto dos utilizadores, existem alguns elementos diferentes disponíveis para obter dados nos formulários. Especificamente, campos de texto e áreas de texto são usados para coletar dados baseados em texto ou string. Esses dados podem incluir passagens de conteúdo de texto, senhas, números de telefone e outras informações.

Campos de texto

Um dos elementos principais usados para obter texto de utilizadores é o elemento <input>. O elemento <input> usa o atributo de tipo para definir qual tipo de informação deve ser capturada dentro do controlo. O valor de atributo de tipo mais popular é o texto, que denota uma única linha de entrada de texto.

Junto com a configuração de um atributo de tipo, é a melhor prática dar um elemento de <input> também um atributo de nome. O valor do atributo de nome é usado como o nome do controlo e é enviado juntamente com os dados de entrada para o servidor.

<input type="text" name="username">

Campos de texto Demo

O elemento <input> é autónomo, o que significa que ele usa apenas uma tag e não envolve qualquer outro conteúdo. O valor do elemento é fornecido pelos seus atributos e pelos seus valores correspondentes.

Originalmente, os dois únicos valores de atributo do tipo de texto eram texto e senha (para entradas de senha), no entanto, o HTML5 trouxe um grupo de novos valores de atributo de tipo.

Esses valores foram adicionados para fornecer um significado semântico mais claro para os insumos, além de proporcionar melhores controles aos utilizadores. Se um browser não entender um desses valores de atributo de tipo HTML5, ele retornará automaticamente ao valor do atributo de texto. Abaixo está uma lista dos novos tipos de entrada de HTML5.

• color
• email
• range
• time
• date
• month
• search
• url
• datetime
• number
• tel
• week

Os seguintes elementos <input> mostram alguns desses valores de atributo de tipo HTML5 em uso, as figuras a seguir mostram como é que esses valores únicos podem aparecer dentro do iOS. Observe como os diferentes valores fornecem controlos diferentes, o que facilita a coleta de informações dos utilizadores.

<input type="date" name="birthday">

<input type="time" name="game-time">

<input type="email" name="email-address">

<input type="url" name="website">

<input type="number" name="cost">

<input type="tel" name="phone-number">

Textarea

Outro elemento que é usado para capturar dados baseados em texto é o elemento <textarea>. O elemento <textarea> difere do elemento <input> em que ele pode aceitar passagens maiores de texto que abrangem várias linhas. O elemento <textarea> também possui tags de início e fim que podem envolver texto sem formatação. Como o elemento <textarea> aceita apenas um tipo de valor, o atributo de tipo não se aplica aqui, mas o atributo name ainda é usado.

<textarea name="comment">Add your comment here</textarea>

Textarea Demo

O elemento <textarea> tem dois atributos de dimensão: cols para largura em termos da largura média de caracteres e linhas de altura em termos do número de linhas de texto visível. O tamanho de uma área de texto, no entanto, é mais comum ser identificado usando as propriedades de largura e altura dentro do CSS.

Múltipla escolha de inputs & Menus

Além dos controlos de entrada baseados em texto, o HTML também permite que os utilizadores selecionem dados usando múltiplas opções e listas suspensas. Existem algumas opções e elementos diferentes para esses controlos de formulário, cada um dos quais tem benefícios distintos.

Botões do rádio

Os botões de rádio são uma maneira fácil de permitir que os utilizadores façam uma escolha rápida de uma pequena lista de opções. Os botões de rádio permitem aos utilizadores selecionar apenas uma opção, ao contrário de várias opções.

Para criar um botão de opção, o elemento <input> é usado com um valor de atributo de tipo de rádio. Cada elemento de botão de rádio deve ter o mesmo valor de atributo de nome para que todos os botões dentro de um grupo correspondam uns aos outros.

Com entradas baseadas em texto, o valor de uma entrada é determinado pelo que um utilizador digita. Com botões de rádio, um utilizador faz uma seleção de múltipla escolha. Assim, temos que definir o valor de entrada, usando o atributo de valor, podemos definir um valor específico para cada elemento <input>.

Além disso, para pré-selecionar um botão de opção para utilizadores, podemos usar o atributo booleano verificado.

<input type="radio" name="day" value="Friday" checked> Friday

<input type="radio" name="day" value="Saturday"> Saturday

<input type="radio" name="day" value="Sunday"> Sunday

Botões do rádio Demo

Caixas de verificação

As caixas de verificação são muito semelhantes aos botões de rádio. Eles usam os mesmos atributos e padrões, com exceção da caixa de seleção como o seu valor de atributo de tipo. A diferença entre as duas é que as caixas de verificação permitem aos utilizadores selecionar vários valores e amarrá-los todos para um nome de controle, enquanto os botões de rádio limitam os usuários a um valor.

<input type="checkbox" name="day" value="Friday" checked> Friday

<input type="checkbox" name="day" value="Saturday"> Saturday

<input type="checkbox" name="day" value="Sunday"> Sunday

Caixas de verificação Demo

Listas suspensas

As listas suspensas são uma maneira perfeita de fornecer aos utilizadores uma longa lista de opções de forma prática. Uma longa coluna de botões de rádio ao lado de uma lista de opções diferentes não é apenas visualmente desagradável, é assustador e difícil para os utilizadores compreenderem, especialmente aqueles num dispositivo móvel. As listas suspensas, por outro lado, fornecem o formato perfeito para uma longa lista de opções.

Para criar uma lista suspensa, usaremos os elementos <select> e <option>. O elemento <select> envolve todas as opções do menu e cada opção de menu é marcada usando o elemento <option>.

O atributo name reside no elemento <select> e o atributo value reside nos elementos <option> que estão juntos no elemento <select>. O atributo value em cada elemento <option> corresponde ao atributo name no elemento <select>.

Cada elemento <option> envolve o texto (que é visível para os utilizadores) de uma opção individual dentro da lista.

Tal como o atributo booleano verificado para botões de opção e caixas de verificação, os menus suspensos podem usar o atributo booleano selecionado para pré-selecionar uma opção para utilizadores.

<select name="day">

<option value="Friday" selected>Friday</option>

<option value="Saturday">Saturday</option>

<option value="Sunday">Sunday</option>

</select>

Listas suspensas Demo

Seleções múltiplas

O múltiplo de atributos booleanos, quando adicionado ao elemento <select> para uma lista suspensa padrão, permite que um utilizador escolha mais de uma opção da lista de cada vez. Além disso, o uso do atributo booleano selecionado em mais de um elemento <opção> no menu irá pré-selecionar várias opções.

O tamanho do elemento <select> pode ser controlado usando CSS e deve ser ajustado adequadamente para permitir múltiplas seleções. Pode valer a pena informar aos utilizadores que para escolher várias opções, eles precisaram de manter pressionada a tecla Shift enquanto fazem o clique para fazer suas seleções.

<select name="day" multiple>

<option value="Friday" selected>Friday</option>

<option value="Saturday">Saturday</option>

<option value="Sunday">Sunday</option>

</select>

Seleções múltiplas Demo

Formulário de Botões

Depois de um utilziador inserir as informações solicitadas, os botões permitem ao utilziador colocar essa informação em ação.

Enviar entrada

Os utilizadores clicam no botão enviar para processar dados depois de preencher um formulário. O botão enviar é criado usando o elemento <input> com um valor de atributo de tipo de envio. O atributo de valor é usado para especificar o texto que aparece no botão.

<input type="submit" name="submit" value="Send">

Enviar entrada Demo

Botão de submeter

Como um elemento <input>, o botão enviar é autónomo e não pode envolver qualquer outro conteúdo. Se for desejado mais controlo sobre a estrutura e design da entrada, juntamente com a capacidade de juntar outros elementos, o elemento <button> pode ser usado.

O elemento <button> executa da mesma maneira que o elemento <input> com o valor de atributo de tipo de submit, no entanto, inclui etiquetas de abertura e fecho, que podem conter outros elementos. Por padrão, o elemento <button> atua como se tivesse um valor de atributo de tipo de envio, portanto, o atributo e o valor do tipo podem ser omitidos no elemento <button> se desejar.

Em vez de usar o atributo value para controlar o texto dentro do botão submit, o texto que aparece entre as tags de abertura e de fecho do elemento <button> aparecerá.

<button name="submit">

<strong>Send Us</strong> a Message

</button>

Botão de submeter Demo

Outras Entradas

Além dos aplicativos que acabamos de discutir, o elemento <input> possui alguns outros casos de uso. Estes incluem a passagem de dados ocultos e a anexação de arquivos durante o processamento do formulário.

Entrada oculta

As entradas ocultas fornecem uma maneira de passar dados para o servidor sem exibi-lo aos utilizadores. As entradas ocultas normalmente são usadas para rastrear códigos, chaves ou outras informações que não são pertinentes para o utilizadores, mas são úteis ao processar o formulário. Esta informação não é exibida na página, no entanto, ele pode ser encontrado visualizando o código-fonte de uma página. Portanto, não deve ser usado para informações sensíveis ou seguras.

Para criar uma entrada oculta, você usa o valor oculto para o atributo de tipo. Além disso, inclua os valores de atributo de nome e valor apropriados.

<input type="hidden" name="tracking-code" value="abc-123">

Entrada de arquivos

Para permitir que os utilizadores adicionem um arquivo a um formulário, como anexar um arquivo a um e-mail, use o valor do arquivo para o atributo de tipo.

<input type="file" name="file">

Entrada de arquivos Demo

Infelizmente, o estilo de um elemento <input> que tem um valor de atributo de tipo de arquivo é uma tarefa difícil com o CSS. Cada browser possui o seu próprio estilo de entrada padrão e nenhum fornece muito controlo para substituir o estilo padrão. O JavaScript e outras soluções podem ser empregadas para permitir a entrada de arquivos, mas são um pouco mais difíceis de construir.

Organizar elementos do formulário

Saber como capturar dados com entradas é metade da batalha. Organizar elementos de formulário e controlos de maneira utilizável é a outra metade. Ao interagir com formulários, os utilizadores precisam de entender o que está a ser solicitado e como fornecer a informação solicitada.

Ao usar rótulos, setas e legendas, podemos organizar melhor os formulários e orientar os utilizadores para adequá-los adequadamente.

Rótulo

Os rótulos fornecem legendas ou títulos para controlos de formulário, vinculando-os inequivocamente e criando uma forma acessível para todos os utilizadores e tecnologias assistivas. Criado usando o elemento <label>, os rótulos devem incluir texto que descreva as entradas ou controls que eles pertencem.

As etiquetas podem incluir um atributo for. O valor do atributo for deve ser o mesmo que o valor do atributo id no controle de formulário ao qual o rótulo corresponde. A correspondência dos valores de atributo for e id atribui os dois elementos, permitindo aos utilizadores clicar no elemento <label> para trazer foco para o controlo de formulário apropriado.

<label for="username">Username</label>

<input type="text" name="username" id="username">

Rótulo Demo

O elemento <label> pode conter os controlos de formulário, como botões de opção ou caixas de seleção. Isso permite a omissão dos atributos for e id.

<label>

<input type="radio" name="day" value="Friday" checked> Friday

</label>

<label>

<input type="radio" name="day" value="Saturday"> Saturday

</label>

<label>

<input type="radio" name="day" value="Sunday"> Sunday

</label>

Etiquetas com demonstração de entradas juntas

Fieldset

Fieldsets agrupam os controlos de formulário e os rótulos em seções organizadas. Muito parecido com uma <seção> ou outro elemento estrutural, o <fieldset> é um elemento de nível do bloco que envolve elementos relacionados, especificamente dentro de um elemento <form>, para uma melhor organização. Fieldsets, por padrão, também incluem um contorno de borda, que pode ser modificado usando CSS.

<fieldset>

<label>

`Username`

`<input type="text" name="username">`

</label>

<label>

`Password`

`<input type="text" name="password">`

</label>

</fieldset>

Fieldset Demo

Legenda

Uma legenda fornece uma legenda ou título para o elemento <fieldset>. O elemento <legend> envolve texto descrevendo os controlos de formulário que se enquadram no fieldset. A marcação deve incluir o elemento <legend> diretamente após a marcação <fieldset> de abertura. Na página, a legenda aparecerá na parte superior esquerda da borda do conjunto de campos.

<fieldset>

<legend>Login</legend>

<label>

`Username`

`<input type="text" name="username">`

</label>

<label>

`Password`

`<input type="text" name="password">`

</label>

</fieldset>

Legenda Demo

Atributos de formulário e entrada

Para acomodar todos os diferentes elementos de formulário, entrada e controlo, há uma série de atributos e valores correspondentes. Esses atributos e valores servem um grupo de funções diferentes, como desabilitar controlos e adicionar a validação de formulário. Descrito em seguida são alguns dos atributos mais utilizados e úteis.

Desativado

O atributo booleano desativado desliga um elemento ou controlo para que ele não esteja disponível para interação ou entrada. Os elementos que estão desativados não enviarão nenhum valor ao servidor para o processamento do formulário.

A aplicação do atributo booleano desativado a um elemento <fieldset> desativará todos os controlos de formulário dentro do fieldset. Se o atributo type tiver um valor oculto, o atributo booleano oculto será ignorado.

<label>

Username

<input type="text" name="username" disabled>

</label>

Desativado Demo

Marcador de posição

O atributo HTML5 do marcador de posição fornece uma dica dentro do controlo de formulário de um elemento <input> ou <textarea> que desaparece quando o controlo é clicado ou ganho de foco. Isso é usado para fornecer aos utilizadores informações adicionais sobre como a entrada do formulário deve ser preenchida, por exemplo, o formato do endereço de e-mail para usar.

<label>

Email Address

<input type="email" name="email-address" placeholder="[email protected]">

</label>

Marcador de posição Demo

A principal diferença entre os atributos do marcador de posição e do valor é que o texto do valor do atributo do valor permanece em vigor quando um controlo tem foco, a menos que um utilizador o exclua manualmente. Isso é ótimo para pré-preencher dados, como informações pessoais, para um utilizador, mas não para fornecer sugestões.

Requeridos

O atributo booleano HTML5 requerido impõe que um elemento ou controlo de formulário deve conter um valor ao ser enviado ao servidor. Se um elemento ou controlo de formulário não tiver um valor, uma mensagem de erro será exibida solicitando que o utilizador complete o campo requerido. Atualmente, os estilos de mensagem de erro são controlados pelo browser e não podem ser denominados com CSS. Elementos inválidos e controlos de formulário, por outro lado, podem ser denominados usando as pseudo-classes CSS do tipo opcional e opcional.

A validação também ocorre especificamente para o tipo de controle. Por exemplo, um elemento <input> com um valor de atributo de tipo de email exigirá não só que exista um valor dentro do controlo, mas também que seja um endereço de e-mail válido.

<label>

Email Address

<input type="email" name="email-address" required>

</label>

Requeridos Demo

Atributos adicionais

Outros atributos de controlo de forma incluem, mas não estão limitados ao seguinte. Sinta-se à vontade para pesquisar esses atributos, conforme necessário.

• accept
• formaction
• formnovalidate
• maxlength
• readonly
• autocomplete
• formenctype
• formtarget
• min
• selectionDirection
• autofocus
• formmethod
• max
• pattern
• step

Exemplo de formulário de login

O seguinte é um exemplo de um formulário de login completo que inclui vários elementos e atributos diferentes para ilustrar o que cobrimos até agora. Esses elementos são então denominados usando CSS.

HTML

<form>

<fieldset class="account-info">

`<label>`

  `Username`

  `<input type="text" name="username">`

`</label>`

`<label>`

  `Password`

  `<input type="password" name="password">`

`</label>`

</fieldset>

<fieldset class="account-action">

`<input class="btn" type="submit" name="submit" value="Login">`

`<label>`

  `<input type="checkbox" name="remember"> Stay signed in`

`</label>`

</fieldset>

</form>

CSS

*,

*:before,

*:after {

box-sizing: border-box;

}

form {

border: 1px solid #c6c7cc;

border-radius: 5px;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

overflow: hidden;

width: 240px;

}

fieldset {

border: 0;

margin: 0;

padding: 0;

}

input {

border-radius: 5px;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

margin: 0;

}

.account-info {

padding: 20px 20px 0 20px;

}

.account-info label {

color: #395870;

display: block;

font-weight: bold;

margin-bottom: 20px;

}

.account-info input {

background: #fff;

border: 1px solid #c6c7cc;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

color: #636466;

padding: 6px;

margin-top: 6px;

width: 100%;

}

.account-action {

background: #f0f0f2;

border-top: 1px solid #c6c7cc;

padding: 20px;

}

.account-action .btn {

background: linear-gradient(#49708f, #293f50);

border: 0;

color: #fff;

cursor: pointer;

font-weight: bold;

float: left;

padding: 8px 16px;

}

.account-action label {

color: #7c7c80;

font-size: 12px;

float: left;

margin: 10px 0 0 20px;

}

Demonstração necessária Demo

Na prática

Com uma compreensão de como criar formas no lugar, vamos criar uma página de registo para o nosso site da Conferência Estilos para que possamos começar a reunir interesse e vender ingressos para o evento.

1. Saltando no nosso arquivo register.html, começaremos por seguir o mesmo padrão de layout que usamos nas nossas páginas de alto-falantes e locais. Isso inclui adicionar um elemento <section> com um valor de atributo de classe da linha logo abaixo da seção de lead-in de registo e junto a um elemento <div> com um valor de atributo de classe da grade diretamente dentro do elemento <section>.

Nosso código logo abaixo da seção de entrada para a página Registo deve ser assim:

<section class="row">

<div class="grid">

`...`

</div>

</section>

Como uma atualização, o valor do atributo de classe da linha adiciona um fundo branco e fornece algum preenchimento vertical, enquanto o valor do atributo de classe da grade concentra o nosso conteúdo no meio da página e fornece algum preenchimento horizontal.

1. Dentro do elemento <div> com um valor de atributo de classe da grade, vamos criar duas colunas, uma que cobre dois terços da largura da página e uma que cobre um terço da largura da página. A coluna de dois terços será um elemento <seção> no lado esquerdo que informa aos utilizadores que eles devem se inscrever para a nossa conferência. A coluna de um terço, então, será um elemento <form> no lado direito, fornecendo uma maneira para os utilizadores se registarem para a nossa conferência.

Vamos adicionar estes dois elementos, e as suas correspondentes col-2-3 e col-1-3 classes, diretamente dentro do elemento <div> com um valor de atributo de classe da grade. Uma vez que ambos os elementos serão elementos de bloqueio em linha, precisamos de abrir um comentário diretamente após a etiqueta de fecho da coluna de dois terços e, em seguida, feche esse comentário diretamente antes da tag de abertura de uma terceira coluna.

No total, o código deve ser assim:

<section class="row">

<div class="grid">

`<section class="col-2-3">`

  `...`

`</section><!--`

`--><form class="col-1-3">`

  `...`

`</form>`

</div>

</section>

1. Agora, dentro da nossa coluna de dois terços, vamos adicionar alguns detalhes sobre o nosso evento e por que é uma boa ideia para aspirantes a designers e desenvolvedores de front-end participarem. Faremos isso usando um grupo de diferentes níveis de cabeçalho (juntamente com seus estilos pré-estabelecidos), um parágrafo e uma lista desordenada.

No nosso elemento <section> com um valor de atributo de classe de col-2-3, o código deve ser assim:

<section class="col-2-3">

<h2>Purchase a Conference Pass</h2>

<h5>9 per Pass</h5>

<p>Purchase your Styles Conference pass using the form to the right. Multiple passes may be purchased within the same order, so feel free to bring a friend or two along. Once your order is finished we&#8217;ll follow up and provide a receipt for your purchase. See you soon!</p>

<h4>Why Attend?</h4>

<ul>

<li>Over twenty world-class speakers</li>

`<li>One full day of workshops and two full days of presentations</li>`

`<li>Hosted at The Chicago Theatre, a historical landmark</li>`

`<li>August in Chicago is simply amazing</li>`

</ul>

</section>

1. Atualmente, a nossa lista não ordenada não possui marcadores de item de lista. Todos os estilos padrão do browser foram desligados pela restauração do CSS, nós adicionamos todo o caminho de volta na Lição 1. Vamos criar alguns estilos personalizados especificamente para esta lista desordenada.

Para fazer isso, vamos adicionar um valor de atributo de classe de porquê - atendemos à lista desordenada.

<ul class="why-attend">

`...`

</ul>

Com uma classe disponível para adicionar estilos, vamos criar uma nova seção para Registar estilos de página na parte inferior do nosso arquivo main.css. Dentro desta seção, vamos usar a classe para selecionar a lista não ordenada e adicionar uma lista de estilo de quadrado e algumas margens inferior e esquerda.

A nova seção na parte inferior do nosso arquivo main.css deve ser assim:

/*

========================================

Register

========================================

*/

.why-attend {

list-style: square;

margin: 0 0 22px 30px;

}

1. A seção de detalhes da nossa página de registo está completa, então agora é hora de abordar o nosso formulário de registo. Vamos começar por adicionar os atributos de ação e método ao elemento <form>. Uma vez que não configuramos o nosso processamento de formulário, esses atributos simplesmente serviram como espaços reservados e precisaram de ser revisados.

O código para o nosso elemento <form> deve ser assim:

<form class="col-1-3" action="#" method="post">

...

</form>

1. Em seguida, dentro do elemento <form>, adicionaremos um elemento <fieldset>. Dentro do elemento <fieldset>, adicionaremos uma série de elementos <label> que envolvem um determinado controlo de formulário.

Queremos coletar o nome de um utilizador, endereço de e-mail, número de passagens de conferência desejadas e quaisquer comentários potenciais. O nome, o endereço de e-mail e o número de passes de conferência são campos obrigatórios, e queremos garantir que usemos os elementos e atributos apropriados para cada controlo de formulário.

Com uma mistura de diferentes tipos de entrada, selecione menus, áreas de texto e atributos, o código para o nosso formulário deve ser o seguinte:

<form class="col-1-3" action="#" method="post">

<fieldset>

`<label>`

  `Name`

  `<input type="text" name="name" placeholder="Full name" required>`

`</label>`

`<label>`

  `Email`

  `<input type="email" name="email" placeholder="Email address" required>`

`</label>`

`<label>`

  `Number of Passes`

  `<select name="quantity" required>`

    `<option value="1" selected>1</option>`

    `<option value="2">2</option>`

    `<option value="3">3</option>`

    `<option value="4">4</option>`

    `<option value="5">5</option>`

  `</select>`

`</label>`

`<label>`

  `Comments`

  `<textarea name="comments"></textarea>`

`</label>`

</fieldset>

<input type="submit" name="submit" value="Purchase">

</form>

Aqui podemos ver cada controlO de formulário junto dentro de um elemento <label>. O controlo de formulário de nome usa um elemento <input> com um valor de atributo de tipo de texto, enquanto que o controlo de formulário de e-mail usa um elemento <input> com um valor de atributo de tipo de email.

Tanto os controlos de nome e Email incluem o atributo booleano exigido e um atributo de espaço reservado.

O controlo de formulário Número de Passes usa os elementos <select> e os elementos <option> juntos. O elemento <select> em si inclui o atributo booleano requerido e o primeiro elemento <option> inclui o atributo booleano selecionado.

O controle de formulário Comentários usa o elemento <textarea> sem modificações especiais. E, finalmente, fora do elemento <fieldset> é o controlo do formulário de envio, que é formado por um elemento <input> com um valor de atributo de tipo de submit.

1. Com o formulário no lugar, é hora de adicionar estilos a ele. Começaremos com alguns estilos padrão no elemento <form> e nos elementos <input>, <select> e <textarea>.

Dentro da seção de registo do nosso arquivo main.css, queremos adicionar os seguintes estilos:

form {

margin-bottom: 22px;

}

input,

select,

textarea {

font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

Começaremos por colocar uma margem de 22 pixels na parte inferior do nosso formulário para ajudar a espaçá-lo verticalmente além de outros elementos. Em seguida, adicionaremos alguns estilos baseados em fontes padrão - incluindo peso, tamanho, altura da linha e família - para todos os elementos <input>, <select> e <textarea>.

Por padrão, todo o browser possui a sua própria interpretação de como os estilos para controlos de formulário devem aparecer. Com isso em mente, repetimos os estilos baseados em fontes do nosso elemento <body> para garantir que nossos estilos permaneçam consistentes.

1. Vamos adicionar alguns estilos aos elementos dentro do elemento <fieldset>. Uma vez que podemos adicionar elementos adicionais <fieldset> mais tarde, vamos adicionar um valor de atributo de classe do grupo de registo ao nosso elemento <fieldset> existente e, a partir daí, podemos aplicar estilos exclusivos aos elementos aninhados dentro dele.

<fieldset class="register-group">

...

</fieldset>

Uma vez que o valor do atributo da classe do grupo de registo esteja no lugar, adicionaremos alguns estilos aos elementos juntos no elemento <fieldset>. Esses estilos apareceram no nosso arquivo main.css, abaixo dos estilos de formulário existentes.

.register-group label {

color: #648880;

cursor: pointer;

font-weight: 400;

}

.register-group input,

.register-group select,

.register-group textarea {

border: 1px solid #c6c9cc;

border-radius: 5px;

color: #888;

display: block;

margin: 5px 0 27px 0;

padding: 5px 8px;

}

.register-group input,

.register-group textarea {

width: 100%;

}

.register-group select {

height: 34px;

width: 60px;

}

.register-group textarea {

height: 78px;

}

Você perceberá que a maioria dessas propriedades e valores giram em torno do modelo de caixa, que cobrimos na Lição 4. Primeiro, estamos configurando o tamanho de diferentes controlos de formulário, garantindo que eles são definidos adequadamente. Além de adicionar alguns estilos de modelos de caixa, estamos a ajustar a cor e o tamanho da fonte de alguns elementos.

1. Até agora está tudo bem, a nossa forma está se a juntar muito bem. O único elemento restante ainda a ser denominado é o botão enviar. Como é um botão, nós realmente temos alguns estilos existentes que podemos aplicar aqui. Se pensarmos na nossa página inicial, a nossa seção de heróis continha um botão que recebeu alguns estilos por meio do valor do atributo da classe btn.

Vamos adicionar esse valor de atributo de classe, btn, juntamente com um novo valor de atributo de classe de btn-default para o nosso botão de envio. Especificamente, usaremos o nome da classe btn-default, pois este botão está a aparecer num fundo branco e será o estilo padrão para botões avançando.

<input class="btn btn-default" type="submit" name="submit" value="Purchase">

Agora, o nosso botão enviar tem alguns estilos compartilhados com o botão na página inicial. Usaremos o valor do atributo de classe padrão btn para então aplicar alguns estilos novos ao nosso botão de envio especificamente.

Voltando à seção de botões do nosso arquivo main.css, vamos adicionar o seguinte:

.btn-default {

border: 0;

background: #648880;

padding: 11px 30px;

font-size: 14px;

}

.btn-default:hover {

background: #77a198;

}

Estes novos estilos, que definem o tamanho e o fundo do nosso botão de envio, são combinados com os estilos de classe btn existentes para criar a apresentação final do nosso botão enviar.

A nossa página de registo está concluída e os participantes agora podem começar a reservar os seus ingressos.

Sumário

Os formulários desempenham um papel importante na forma como os utilizadores interagem, fornecem informações e agem nos sites. Tomamos todos os passos certos para aprender não apenas como marcar formas, mas também como modelá-las.

Para recapitular rapidamente, nesta lição discutimos o seguinte:

• Como iniciar um formulário;
• Formas de obter informações baseadas em texto dos utilizadores;
• Diferentes elementos e métodos para criar opções e menus de múltipla escolha;
• Quais elementos e atributos são utilizados melhor para enviar os dados de um formulário para processamento;
• Como organizar os formulários e dar forma à estrutura de controlos e significado;
• Um grupo de atributos que ajudam a coletar dados mais qualificados.

A nossa compreensão de HTML e CSS está progredindo muito bem, e nós só temos mais um componente para aprender: tabelas. No próximo capítulo, veremos como organizar e apresentar dados com tabelas.